Nuxt.js: Font Awesomeの導入（TypeScript）

Nuxt.js (TypeScript)にFontAwesomeを導入する手順を紹介します。

  1. パッケージインストール
  2. plugin作成＆nuxt.config.jsの編集
  3. テンプレートでの実装

パッケージインストール

yarn add @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

or 

npm i -S @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

plugin作成&nuxt.config.jsの編集

plugins/fontAwesome.ts

faLeafをimportする例

// https://fontawesome.com/icons?d=listing&m=free
import Vue from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
     faLeaf
} from '@fortawesome/free-solid-svg-icons'

library.add(faLeaf)

Vue.component('fa', FontAwesomeIcon);

nuxt.config.js

module.exports = {
  ...
  plugins: [
    '~/plugins/fontAwesome',
  ],
  ...
}

テンプレートでの実装

<template>
  <div class="container">
    <p>
      <fa icon="leaf" aria-hidden="true" />TEXT
    </p>
  </div>
</template>

以上

Related Posts