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 */
- view
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:
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 */
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:
Vue ...
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. |