開発しているWebサービスでFont Awesomeのお世話になってる。
ただ、Web Font版を使っていたので、読み込みが遅い。。
SVG版だとアイコンごとにimportできるようなので、
性能改善の一環でやってみたときの備忘録。
インストール
まずはnpmでパッケージをインストール。
使うものに応じて、追加が必要らしい。
// 必須 $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save@fortawesome/free-solid-svg-icons $ npm i --save@fortawesome/vue-fontawesome // オプション(fabとかfarとか使うなら) $ npm i --save @fortawesome/free-brands-svg-icons $ npm i --save @fortawesome/free-regular-svg-icons
pluginsの準備
Nuxtでvue-fontawesomeが使えるように、pluginを用意する。
ここで使うアイコンを個別に設定
// plugins/fontawesome.ts import Vue from "vue"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { config, library } from "@fortawesome/fontawesome-svg-core"; import { faTwitter } from "@fortawesome/free-brands-svg-icons"; import { faPlus } from "@fortawesome/free-solid-svg-icons"; // CSSはnuxt.config.tsで設定するので、vue-fontawesomeでは追加しないようにする config.autoAddCss = false; // 必要なアイコンをlibraryに追加 [ faPlus, faTwitter, ].forEach(v => library.add(v)); // グローバルコンポーネントとして登録 Vue.component("fa", FontAwesomeIcon);
nuxt.config.tsの設定
// nuxt.config.ts import NuxtConfiguration from "@nuxt/config"; const config: NuxtConfiguration = { mode: "spa", css: [ // CSSを追加 "@fortawesome/fontawesome-svg-core/styles.css", ], plugins: [ // プラグインを追加 { src: "~/plugins/fontawesome", ssr: false }, ], };
設定はこれでOK
使い方
使うときはこんな感じ。
plugins/fontawesome.ts
で設定したfa
を使う感じ。
<!-- xxx.vue --> <template> <div> <!-- fas fa-plusの場合: デフォルトがfas --> <fa icon="plus" aria-hidden="true" /> <!-- fab fa-twitterの場合 --> <fa :icon="['fab', 'twitter']" aria-hidden="true" /> </div> </template>
以上!!
シンプルで簡単(´ω`)
ハマった...
Bulmaと一緒に使うと、うまくいかない?
Bulmaを使ってるけど、一緒に使うとうまくいかない。。
ちょっとだけ上にずれた感じなる。。
<span class="icon is-small has-text-twitter"> <fa :icon="['fab', 'twitter']" aria-hidden="true" /> </span>
だと、 Font Awesomeの.svg-inline--fa
(GitHub)+.svg-inline--fa.fa-w-16
(GitHub)で想定しているheightと
Bulmaの.icon
(GitHub)とが異なり、ズレが起こるよう。。
なので、Font Awesomeに合わせる形で、すこし変更する。
.icon svg { width: 1em; height: 1em; }
また、それでもズレが起こる場合は、個別にvertical-align
を設定して調整。
.icon { vertical-align: -0.1em; }
もう少し良いやり方もありそうだけど、とりあえずこれで対処。。
なお、Buefyだとうまくやってくれないみたいなので、<b-icon>
とかは使えない。。
以上!!