🔖

【いいね機能】 Nuxt.jsでfontawesomeを導入

2021/08/19に公開

https://qiita.com/tu-kun/items/09673446ccce1ddfd55d

https://nishimura.club/nuxt-fontawesome

https://qiita.com/riversun/items/4faa56ac40071f638313#2-2-svgコア版font-awesome-svg-core-javascriptのインストールと実行

https://fontawesome.com/v5.15/icons/heart?style=regular

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

手順

モジュールの導入

npm install @nuxtjs/fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

fontawesomeファイルの準備
nuxt.config.jsにfontawesomeで利用するアイコンを直接設定できますが、
行数が長くなり読みづらくなるため、別ファイルとして用意

build/fontawesome.js

const solid = [
    'faHeart',
]

// ここに追記するだけ
const regular = [
    'faHeart',
]

// ここに追記するだけ
const brands = []

export { solid, regular, brands }

nuxt.config.jsの設定

nuxt.config.js

import * as FontAwesome from './build/fontawesome'

export default {
  buildModules: [
    ['@nuxtjs/fontawesome', { component: 'fontAwesome', suffix: true }]
  ],
  fontawesome: {
    icons: {
      solid: FontAwesome.solid,
      regular: FontAwesome.regular,
      brands: FontAwesome.brands
    }
  }
}

pages/MusicFileDetail.vue

        <div class="like-display">
            <font-awesome-icon :icon="['far', 'heart']" class="font-awesome-size" />
            <font-awesome-icon :icon="['fas', 'heart']" class="font-awesome-size-solid" />
        </div>

サイズとカラー指定

<style scoped>
.font-awesome-size {
    font-size: 30px ;
    color: #696969;
}
.font-awesome-size-solid {
    font-size: 30px ;
    color: #f83979;
}

https://syncer.jp/how-to-use-fontawesome

Discussion