nativescript-vue3-fonticon
by markmorchella | v1.1.4
A simpler way to use font icons with NativeScript + Vue.js
npm i --save nativescript-vue3-fonticon

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

LICENSE Contributions

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