【Vue.js】Vue-CLI4.1.1에서 Font awesome5를 사용하는 순서

소개

Vue-CLI (4.1.1)에서 Font awesome을 사용하는 절차를 정리했습니다.

공식 문서

이 기사가 도움이 되는 분

이제 Vue-CLI에서 Font awesome을 사용하고 싶은 분

이 기사의 장점

Vue-CLI에서 Font awesome을 사용할 수있게된다

환경

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vue-cli: 4.1.1
vue-router: 2.6.10
vuex: 3.1.2

1. 설치

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome

위에서 기본 아이콘을 로드할 수 있습니다.

주의

Instagram이나 Twitter 등의 브랜드 아이콘은 별도의 파일로 분리되어 있으므로 별도로 로드해야 합니다.

$ npm i --save @fortawesome/free-brands-svg-icons

필요한 경우 위의 명령으로 설치합시다.

2. 사용할 아이콘 등록

2-1. 사용할 아이콘 이름 확인

Font awesome 사이트에서 임의의 아이콘 상세 화면까지 가서 테두리로 둘러싸인 2개소를 확인해 둡시다.

2-2. 사용하는 아이콘을 src/main.js에 등록

확인한 정보를 바탕으로 다음 코드를 작성합니다.

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// ここから追記 //

import { library } from '@fortawesome/fontawesome-svg-core'

// solidの中で何を使うかをキャメルケースで記載
import { faDog, faHotdog } from '@fortawesome/free-solid-svg-icons'

// brandsの中で何を使うかをキャメルケースで記載
import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons"

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// 上記で記載したアイコン名をLibraryに追加
// solid, brands関係なしでOK。
library.add(faDog, faHotdog, faTwitterSquare)

Vue.component('font-awesome-icon', FontAwesomeIcon)

//　ここまで追記 //

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

solid

brands

이제 위의 아이콘을 사용할 수 있습니다.

3. 모든 템플릿에 설명

사용하고 싶은 부분에 다음과 같이 기술하면 아이콘이 반영됩니다.
※예는 텍토입니다.

solid

<p>
  <font-awesome-icon :icon="['fas', 'dog']" />
  かわいいワンコ
</p>

<h1>
  <font-awesome-icon :icon="['fas', 'hotdog']" />
  ホットドッグ早食い大会！
</h1>

brands

<a href="twitterへのリンク">
  <font-awesome-icon :icon="['fab', 'twitter-square']" />
</a>

결론

끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)

GitHub - FortAwesome/vue-fontawesome: Font Awesome 5 Vue component