10 icon display / アイコン表示トライ

[hasyrails]

現状

変更指針

• 予定のタイトルの横に表示されている赤丸、青丸‥(color)の部分をアイコンにしたい
• 色はカードの背景色に変える

[hasyrails]

FontAwesomeをインストールする

Font awesome を Vue.js で使ってみよう

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

セッティング

// app/javascript/packs/hello_vue.js

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)

[hasyrails]

テスト

// Calendar.vue
<div>
      <font-awesome-icon icon="coffee" />
    </div>

表示成功