A simpler way to use font icons with NativeScript + Vue.js

The Problem

You can use icon fonts with NativeScript by combining a class with a unicode reference in the view:

• CSS

/* app.css or styles.scss */
.fa {
  font-family: FontAwesome;
}

• view

<label class="fa" text="\uf293"></label>

This works but keeping up with unicodes is not fun.

The Solution

With this plugin, you can instead reference the fonticon by the specific classname:

<FontIcon name="fa-play" @tap="tapAction" />

Prerequisites / Requirements

You will have to manually install the fonts you want to use.

Install

npm install nativescript-vue-fonticon --save
or
yarn add nativescript-vue-fonticon

Usage

FontAwesome will be used in the following examples but you can use any custom font icon collection.

• Place font icon .ttf file in app/fonts, for example:

fonts/FontAwesome.ttf

• Create base class in app.css global file, for example:

/* app.css or styles.scss */
.fa {
  font-family: FontAwesome;
}

NOTE: Android uses the name of the file for the font-family (In this case, fontawesome-webfont.ttf. iOS uses the actual name of the font; for example, as found here. You could rename the font filename to FontAwesome.ttf to use just: font-family: FontAwesome. You can learn more here.(http://fluentreports.com/blog/?p=176).

• Copy css to app somewhere, for example:

assets/css/font-awesome.css

Then modify the css file to isolate just the icon fonts needed. Watch this video to better understand.

• Configure your fonts and setup the converter:

import Vue from 'nativescript-vue'
import FontIcon from 'nativescript-vue-fonticon'

import './styles.scss'

Vue.use(FontIcon, {
  componentName: 'FIcon', // <-- Optional. Will be the name for component icon.
  debug: true, // <-- Optional. Will output the css mapping to console.
  paths: {
    fa: './assets/css/font-awesome.css',
    ion: './assets/css/ionicons.css'
  }
})

...

API

Installing

| Parameters | Type | Default | Description | | --------------- | --------- | ---------- | --------------------------------------- | | componentName | String | FontIcon | Name for component icon. | | debug | Boolean | false | Show output the css mapping to console. | | paths | Object | | Object of paths to css fonts. |

Using

| Parameters | Type | Default | Description | | ---------- | ------------------ | ------- | ------------------------------------------------------------------------------- | | name | String | | Name of class icon. | | color | String | | Sets a solid-color value to the matched view’s foreground or can use class too. | | size | [String, Number] | 15 | Size icon. | | type | String | fa | CSS class icon to use. | | @tap | Function | | Listener of tap event. |

License

MIT