はじめに

NativeScript(NativeScript-Vue) で FontAwesome などのアイコンフォントを使用する方法。

TL;DR

• 基本は 公式ガイド: Icon Fonts 通り
• .ttf を app/fonts に配置
• app.css(app.scss) に font-family, font-weight の記述を追加
  • font-family: iOS/Android 両対応の場合はフォント名とファイル名で定義
• unicode でアイコン表示
  • mixin 作っておくと便利になる

目次

1. はじめに
2. TL;DR
3. 環境・条件
4. 詳細
   1. 導入手順
      1. FontAwesome ダウンロード/配置
      2. 対応 class の定義
      3. 動作確認
   2. 使いやすいように改良
      1. 参考: FontAwesome Free 全 unicode 登録版
5. まとめ
6. その他・メモ
7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.4
BuildVersion:	19E287

$ node -v
v12.7.0

$ npm -v
6.10.3

$ tns --version
6.4.0

$ grep -C1 version package.json
"tns-android": {
  "version": "6.0.0"
},
"tns-ios": {
  "version": "6.4.2"
}

$ tns plugin
Dependencies:
┌──────────────────────────────┬─────────┐
│ Plugin                       │ Version │
│ @nativescript/theme          │ ^2.2.1  │
│ @vue/devtools                │ ^5.0.6  │
│ nativescript-socketio        │ ^3.2.1  │
│ nativescript-toasty          │ ^1.3.0  │
│ nativescript-vue             │ ^2.4.0  │
│ nativescript-vue-devtools    │ ^1.2.0  │
│ tns-core-modules             │ ^6.0.0  │
└──────────────────────────────┴─────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.0.2  │
│ nativescript-dev-webpack           │ ^1.0.0  │
│ nativescript-vue-template-compiler │ ^2.0.0  │
│ nativescript-worker-loader         │ ~0.9.0  │
│ node-sass                          │ ^4.9.2  │
│ vue-loader                         │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

• FontWwesome Free v5.13.0 Web

詳細

導入手順

参考: Icon Fonts - NativeScript Docs

上記の公式ガイド通りに進める。

FontAwesome ダウンロード/配置

NativeScript で FontAwesome を表示するには、Web 版をダウンロードして中に入っている .ttf ファイルを利用する。

Download | Font Awesome の Free for Web からダウンロード。
(Pro 版を使う人は Pro for Web をダウンロード)

展開すると webfonts/ に xxxx.ttf があるので、app/fonts ディレクトリを作成し、xxxx.ttf を配置。

今回は選別が面倒なので全部コピーしているが、実際には必要な分だけを配置するのが良い。

1
2
3

$ mkdir -p app/fonts

$ cp /path/to/fontawesome-free-5.13.0-web/webfonts/*.ttf app/fonts/ # もしくは mv でも

対応 class の定義

FontAwesome を扱うための class を app/app.scss(app/app.css, etc) に定義。

Free

1
2
3
4
5
6
7
8
9
10
11
12

.fab {
  font-family: "Font Awesome 5 Brands", "fa-brands-400";
  font-weight: 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;
}

Pro

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.fab {
  font-family: "Font Awesome 5 Brands", "fa-brands-400";
  font-weight: 400;
}
.far {
  font-family: "Font Awesome 5 Pro", "fa-regular-400";
  font-weight: 400;
}
.fas {
  font-family: "Font Awesome 5 Pro", "fa-solid-900";
  font-weight: 900;
}
.fad {
  font-family: "Font Awesome 5 Duotone", "fa-duotone-900";
  font-weight: 900;
}
.fal {
  font-family: "Font Awesome 5 Pro", "fa-light-300";
  font-weight: 300;
}

動作確認

適当なファイルに以下を追加。

※NativeScript-Vue での表示方法なので、他(Angular など)だと微妙に異なる可能性あり

1
2
3
4
5
6
7
8
9

<template>
  <StackLayout>
    <!-- ここから -->
    <Label :text="'\uf019'" class="fas"></Label>
    <Label :text="'\uf39e'" class="fab"></Label>
    <Label :text="'\uf35b'" class="far"></Label>
    <!-- ここまで -->
  </StackLayout>
</template>

Android エミュレータで確認、アイコンフォントが表示されていれば OK。

1

$ tns debug android --emulator

使いやすいように改良

ただし、これだと使いづらいので、別の利用方法を考える。

app/mixins/FontAwesome.js を作成。

'fa-download' などの文字列を渡すことで、'\uf019' などの FontAwesome 用の unicode を返却するようにした。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default {
  data() {
    return {
      fa_text: {
        'fa-download': '\uf019',
        'fa-facebook-f': '\uf39e',
        'fa-arrow-alt-circle-up': '\uf35b',
      },
    };
  },
  methods: {
    get_fa_text(fa_class) {
      return this.fa_text[fa_class] || '';
    },
  },
}

app/main.js で mixin に登録。

1
2
3
4
5
6
7
8
9
10
11

import Vue from 'nativescript-vue'

// mixin
import FontAwesome from './mixins/FontAwesome'
Vue.mixin(FontAwesome);

import App from './components/App'
new Vue({
  store,
  render: h => h('frame', [h(App)])
}).$start()

これで xxxx.vue で :text="get_fa_text('fa-download')" のようにすると unicode 文字列が取れる。

1
2
3
4
5
6
7
8
9
10

 <template>
   <StackLayout>
-    <Label :text="'\uf019'" class="fas"></Label>
-    <Label :text="'\uf39e'" class="fab"></Label>
-    <Label :text="'\uf35b'" class="far"></Label>
+    <Label :text="get_fa_text('fa-download')" class="fas"></Label>
+    <Label :text="get_fa_text('fa-facebook-f')" class="fab"></Label>
+    <Label :text="get_fa_text('fa-arrow-alt-circle-up')" class="far"></Label>
   </StackLayout>
 </template>

参考: FontAwesome Free 全 unicode 登録版

app/mixins/FontAwesome.js の全文、長いので見たい人だけどうぞ。

unicode は https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css から抽出。

まとめ

• 基本は 公式ガイド: Icon Fonts 通り
• .ttf を app/fonts に配置
• app.css(app.scss) に font-family, font-weight の記述を追加
  • font-family: iOS/Android 両対応の場合はフォント名とファイル名で定義
• unicode でアイコン表示
  • mixin 作っておくと便利になる

その他・メモ

本当は CSS の :before でやりたかったが、うまく動かなかった。

moayadnajd/nativescript-fontawesome では :before を使っているので、「NativeScript のバージョンアップで使えなくなった」か「プラグイン内で :before を使えるようにしている」かあたりか。

参考文献

• Icon Fonts - NativeScript Docs
• FontAwesome 5 and Nativescript - Juanky Aguilera - Medium
• NativeScript + Vue でフォントアイコン(FontAwesome)を使う - Qiita
• moayadnajd/nativescript-fontawesome: Your awesome NativeScript plugin for using fontawesome icons

関連記事

• NativeScript, JsBarcode でバーコードを 生成/描画
• NativeScript でデバイスの輝度(明るさ)を制御する
• NativeScript で入力範囲外タップでキーボードを非表示にする
• NativeScript-Vue で次入力欄にフォーカスする方法
• NativeScript で Locale を意識した DatePicker/TimePicker
• NativeScript-Vue でページ読み込み後にページ移動やダイアログの表示
• JavaScript で URL のクエリパラメータを操作する方法
• jQuery Select2 で、初期値の設定と選択状態のクリア