SVGなFont AwesomeをNuxt+Bulmaで使ってみた

開発しているWebサービスFont Awesomeのお世話になってる。
ただ、Web Font版を使っていたので、読み込みが遅い。。

SVG版だとアイコンごとにimportできるようなので、
性能改善の一環でやってみたときの備忘録。

インストール

まずはnpmでパッケージをインストール。
使うものに応じて、追加が必要らしい。

// 必須
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i [email protected]/free-solid-svg-icons
$ npm i [email protected]/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の設定

cssと用意したプラグインを追加する

// 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>とかは使えない。。

以上!!

こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました!
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ノ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト

Originally published at www.memory-lovers.blog
ツイッターでシェア
みんなに共有、忘れないようにメモ

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント