Vue3でFontAwesomeを使ってみた

6531 ワード
vue.js3 FontAwesome Vue3 Vue.js Vue.js テキストリンク

今回紹介するのはvue3でのFontAwesomeの利用方法です。
Vue3という新しいバージョンがリリースされてからまだ間も無く、参考記事がほとんどなかったため、
Vue3でFontAwesomeを利用するのに少し苦労しました。
皆さんの参考になれば幸いです。

FontAwesomeのインストール

作成したprojectに移動してインストールします。
この時注意が必要なのはvue-fontawesomeをインストールする際に末尾に@prereleaseを入れないとvue3では動きません。

$ npm install --save @fortawesome/fontawesome-svg-core

#アイコンをインストール
$ npm install --save @fortawesome/free-solid-svg-icons

#Vue3で使用するためにインストール
$ npm install --save @fortawesome/vue-fontawesome@prerelease

アイコンは下記タイプがあります。必要に応じてインストールしてください。
・Solid : 内塗り
・Regular : 線（内塗りの逆）
・Light : 細い線（有料プランのみ）
・Brands : ロゴ等

$ npm install --save @fortawesome/free-regular-svg-icons
$ npm install --save @fortawesome/free-brands-svg-icons
$ npm install --save @fortawesome/pro-regular-svg-icons

main.jsに追加

Vueで使えるようにFontAwesomeをインポートします。
使いたいアイコンごとにインポートしてライブラリに追加します。

main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
//ここから追加
import { library } from '@fortawesome/fontawesome-svg-core'
import { faLeaf } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faLeaf)
//ここまで追加

var app = createApp(App)
//コンポーネントの追加
app.component('fa', FontAwesomeIcon )
app.mount('#app')

アイコンを使用

faタグを追加して、アイコン名を指定します。

src/components/fontAwesome.vue
<template>
    <div>
        <fa icon="leaf" />
    </div>
</template>

SolidではなくBlandsのアイコンを使用する場合

Solidではなく、Blandsのアイコンを使用する場合はタグの書き方が少し違います。

まずはBlandsのアイコンをインストール

$ npm install --save @fortawesome/free-brands-svg-icons

main.jsは上記と同様に追記。

main.js
import { faFacebook } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faFacebook)

Brandsのアイコンの使用する際、prefixを指定する必要があります。

src/components/fontAwesome.vue
<template>
    <div>
        <fa :icon="{ prefix: 'fab', iconName: 'facebook' }" />
    </div>
</template>

参考

[リンク]https://www.npmjs.com/package/@fortawesome/vue-fontawesome
[リンク]https://qiita.com/kurararara/items/d76776a7dc2d763a068b

もし何か指摘事項等ありましたら、コメントして頂ければ幸いです。