Ruby on Rails アプリにVuetifyとFontAwesomeの導入

Vuetify導入

yarn add vuetify @fortawesome/fontawesome-free

app/javascript/packs/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import "vuetify/dist/vuetify.min.css"
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(Vuetify)
export default new Vuetify({
  icons: {
    iconfont: 'fa',
  }
})

app/javascript/packs/main.js

import vuetify from './plugins/vuetify'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    vuetify,
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

使用例

<v-icon>fas fa-home</v-icon>

FontAwesome導入

yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

app/javascript/packs/main.js

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Vue.config.productionTip = false
Vue.component('FontAwesomeIcon', FontAwesomeIcon)

使用例

<FontAwesomeIcon icon="user"/>
<FontAwesomeIcon :icon="['far', 'star']"/>
<FontAwesomeIcon :icon="['fab', 'facebook']"/>