NuxtJSでFont Awesomeを利用する方法

Ⅰ. はじめに

タイトルの通り「NuxtJSでFont Awesomeを利用する方法」です。

Ⅱ. やり方

1. 必要なパッケージをインストールする

npm i -D @nuxtjs/fontawesome
npm i -D @fortawesome/free-solid-svg-icons

2. ファイルを編集する

nuxt.config.js

buildModules: [
  ['@nuxtjs/fontawesome', {
    component: 'fa',
    suffix: true,
    icons: {
      solid: ['faThumbsUp']
    }
  }]
]

pages/index.vue

<template>
  <fa-icon icon="thumbs-up" />
</template>

実行結果

参考

https://github.com/nuxt-community/fontawesome-module

代替案

• https://github.com/Richard9394/MingCute