- Version: 1.1.4
- GitHub: https://github.com/stevenkolstad/nativescript-vue-fonticon
- NPM: https://www.npmjs.com/package/nativescript-vue3-fonticon
- Downloads:
- Last Day: 1
- Last Week: 10
- Last Month: 18
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 inapp/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. |