🔖
【いいね機能】 Nuxt.jsでfontawesomeを導入
手順
モジュールの導入
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;
}
Discussion