NativeScript + Vue でフォントアイコン(FontAwesome)を使う

NativeScript VueでFontAwesomeのアイコンを使う方法。
FontAwesome以外の他のフォントアイコンでも同様の方法が使える。

ダウンロード

まず、FontAwesomeのttfファイルを入手する。
以下からダウンロード。

注意するべき点としては、2020/2/5現在、v5系は使えないので、v4.7をダウンロードすること。

配置

ダウンロードした font-awesome-4.7.0.zip を解凍し、fonts/fontawesome-webfont.ttf というファイルを、NativeScript Vueプロジェクトの app/assets/fonts フォルダ内にコピーする
コピーしたファイルを、 FontAwesome.ttf にリネームする(これが重要)

使うための前準備

グローバルのスタイルシートである app/app.scss に以下を記述。

app/app.scss

.fa {
  font-family: FontAwesome;
}

使い方

まず、使いたいアイコンフォントのユニコード文字列を知る必要がある。
FontAwesomeであれば、FontAwesomeで使いたいアイコンフォントのページを開くと、以下に表示されている。

ここでは、歯車のアイコンフォントが使いたい。
\uをプレフィックスとしてつければユニコード指定できる。
歯車アイコンの文字コードが f013 なので、ここでは、以下のように\uf013と指定する。

components/App.vue

<Button :text="'\uf013'" class="fa"></Button>

以下のように、アイコンフォントが表示されればOK。