[question] how to import/inline font icons (instead of using require) with {N} 7, 8 and higher

[johandrott]

This plugin stopped working after upgrading to Nativescript 8.

We used to be able to initialize the plugin with

TNSFontIconModule.forRoot({
      fa: require("../assets/css/font-awesome.css").default,
    }),

as described in this issue #62 (comment) but this no longer works.

I think this has something to do with the new Webpack config that came with NS8. The config object in TNSFontIconService now look like this:

{
      mdi: {
        default: {
          type: "stylesheet",
          stylesheet: {
            rules: [
              {
                type: "rule",
                selectors: [".mdi-3d_rotation:before"],
                declarations: [
                  {
                    type: "declaration",
                    property: "content",
                    value: '"\\ue000"',
                  },
                ],
              },
            ],
          },
        },
      },
    };

which is incompatible with the mapCss function. The code fails on let sets = data.split("}");

[NathanWalker]

The solution is to just inline it via imported .ts, for example:

import { TNSFontIconModule, USE_STORE } from 'nativescript-ngx-fonticon';
import { fontAwesome } from '../font-awesome';

imports: [
  TNSFontIconModule.forRoot({}),
],
providers: [
    {
      // ensure dependency injector inlines icons sets (TNSFontIconModule.forRoot doesn't work with inlining)
      provide: USE_STORE,
      useValue: {
        fa: fontAwesome
      }
    }
  ]

Where font-awesome.ts [in part] looks like this [take note of the double slash escape which can be added via search/replace] (same can be done with any font icon .css when dropping in .ts):

export const fontAwesome = `.fa-glass:before{content:"\\f000"}.fa-music:before{content:"\\f001"}.fa-search:before{content:"\\f002"}.fa-envelope-o:before{content:"\\f003"}.fa-heart:before{content:"\\f004"}.fa-star:before{content:"\\f005"}.fa-star-o:before{content:"\\f006"}.fa-user:before{content:"\\f007"}.fa-film:before{content:"\\f008"}.fa-th-large:before{content:"\\f009"}.fa-th:before{content:"\\f00a"}.fa-th-list:before{content:"\\f00b"}.fa-check:before{content:"\\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\\f00d"}.fa-search-plus:before{content:"\\f00e"}.fa-search-minus:before{content:"\\f010"}.fa-power-off:before{content:"\\f011"}`;

[johandrott]

I can confirm that this works well with NativeScript 8, thanks @NathanWalker

[PetroSuch]

Hi guys, please tell me, how to use material design icons, in nativescript+angular project? export const mdi = ' .mdi-account-arrow-left-outline::before { content: "\F0B52"; }'

`{

      provide: USE_STORE,
      useValue: {
        fa: iconMoon,
        mdi: mdi,
      }
    }`

<Label class="mdi" [text]="'mdi-account-arrow-right-outline' | fonticon"></Label>

[johandrott]

@PetroSuch, looks like you forgot to escape the slash by adding a double slash.

.fa-glass:before{content:"\\f000"}

Just do a search and replace in the .ts file, then it should work.

[PetroSuch]

@johandrott, Thanks for your answer, it helped me to fix the problem May i use css class for showing icons ?

.fa-sg-filter:before{content:"eb2b";} .fa-sg-filter:after{content:"eb2c";}

i want to use :after and :before pseudo-classes, for showing the full icon. Now i see the plugin nativescript-ngx-fonticon only uses :before