Vue에서 FontAwesome 아이콘을 표시하는 방법 (Vue.js)

소개

Vue.js를 사용하여 포트폴리오 사이트를 제작하는 데 Vue-cli를 사용했지만 구성 요소에서 FontAwesome을 호출하는 방법을 모르겠습니다.
거기서의 경험을 근거로, Twitter 아이콘등을 표시시키기 위해서 사용하는 FontAwesome의 Vue에서의 도입 방법과 기술 방법에 대해 써 갑니다.

FontAwesome 소개

루트 디렉토리로 이동

> cd my-project 

설치

> npm install --save @fortawesome/fontawesome-svg-core
> npm install --save @fortawesome/free-solid-svg-icons
> npm install --save @fortawesome/vue-fontawesome

더 많은 아이콘(twitter 아이콘 등)을 사용하고 싶은 경우는 이쪽도 추가로 인스톨 한다

> npm install --save @fortawesome/free-brands-svg-icons
> npm install --save @fortawesome/free-regular-svg-icons

설치 완료!

코딩 방법에 대해

main.js 에 다음과 같이 코드 추가하기

src/main.js

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

//ここから
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

//追加でインストールした場合は下の2行も
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
//ここまで

Vue.config.productionTip = false

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

나머지는 표시하고 싶은 곳에서 아이콘을 호출하기만 하면 됩니다.

아이콘 호출

이번에는 About 페이지에서 아이콘을 호출해 보겠습니다.

src/views/About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>

    <!--Solidアイコン-->
    <font-awesome-icon :icon="['fas', 'envelope']"/>
    <!--Solidアイコンの省略記法-->
    <font-awesome-icon icon="envelope" />
    <!--Regularアイコン-->
    <font-awesome-icon :icon="['far', 'envelope']"/>
    <!--Brandsアイコン-->
    <font-awesome-icon :icon="['fab', 'twitter']"/>

  </div>
</template>

통화에 성공했는지 확인

제대로 표시됩니다!

요약

내가 트위터 아이콘 호출을 약어로 작성했기 때문에 잘 표시되지 않았습니다. Solid 아이콘만 생략기법으로 호출할 수 있으며, 그 외의 Regular나 Brands 아이콘에 대해서는 제대로 기술할 필요가 있는 것 같습니다.
이상, Vue에서 FontAwesome 아이콘을 표시하는 방법이었습니다. 읽기 어려운 점이나 다른 점 등 있으면, 지적 부탁드립니다.

참고

Font awesome을 Vue.js에서 사용해 봅시다.
htps : // m / 쿠라 라라 / ms / d76776 A7 dc2d763 A068b

Vue CLI에서 Font Awesome 트위터 아이콘을 추가하는 방법
h tps://자리가 니데시 g 응-오후우세. 이 m/bぉg/ゔ에-cぃ-와 r/