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

Using

License

MIT