CODEWITHSUNDEEP
nativescript-vue
Mennolp
Mennolp

Reputation: 424

nativescript-fonticon for nativescript-vue

I am trying to add the plugin: nativescript-fonticon

I am currently stuck on the part where I have to convert the css file.

In the readme it states that I have to configure my css and converter before I can start converting:

import * as application from 'application';
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';

TNSFontIcon.debug = true; <-- Optional. Will output the css mapping to console.
TNSFontIcon.paths = {
  'fa': 'font-awesome.css',
  'ion': 'ionicons.css'
};
TNSFontIcon.loadCss();

application.resources['fonticon'] = fonticon;
application.start({ moduleName: 'main-page' });

How am I supposed to do this in nativescript-vue?

Upvotes: 1

Views: 951

Answers (2)

Lochlan
Lochlan

Reputation: 101

You look like you're on the right track. You should put the initialising code in your main.js file (or whatever the entry point file is named).

Here's how to get it to work in NativeScript-Vue.

Download and extract fontawesome-free-5.9.0-web.zip from here.

Add webfonts/fa-brands-400.ttf, webfonts/fa-regular-400.ttf and webfonts/fa-solid-900.ttf to app/fonts directory.

Add css/fontawesome.css to app/assets directory. Remove any non fa-*:before classes from this file.

In your app's main.js. You should see a console log for each class when starting your app.

import { TNSFontIcon, fonticon } from 'nativescript-fonticon'

TNSFontIcon.debug = true
TNSFontIcon.paths = {
  'fa': './assets/fontawesome.css',
}
TNSFontIcon.loadCss()
Vue.filter('fonticon', fonticon)

In your app's main css file, e.g. app.scss.

.fa-brands {
  font-family: "Font Awesome 5 Brands", "fa-brands-400";
}

.far {
  font-family: "Font Awesome 5 Free", "fa-regular-400";
  font-weight: 400;
}

.fas {
  font-family: "Font Awesome 5 Free", "fa-solid-900";
  font-weight: 900;
}

Now use them in your view.

<Label :text="'fa-facebook-f' | fonticon" class="fa-brands" />
<Label :text="'fa-eye' | fonticon" class="far" />
<Label :text="'fa-eye' | fonticon" class="fas" />

Upvotes: 3

Mennolp
Mennolp

Reputation: 424

I have found a blog that actually uses the fonticons plugin and how to use it: https://nativescript-vue.org/blog/using-fonticons/

EDIT: After a few Nativescript and Nativescript-Vue updates it does not seem to work properly. It's rather hard to use. I suggest importing the font and using the respective unicodes like this:

Data:

icon: '\ue905'

Markup:

<Label class="ico" :text="icon"/>

Upvotes: 2

Related Questions