Vue 2 ) Vue 에서 fontAwesome Icon 사용하기

Vue 2 + fontawosome

cdn 방식을 통해 fontawesome 아이콘을 바로 사용할 수 있지만, 저는 사용할 아이콘이 많지 않았기에 몇 개의 특정 아이콘만 import 해 사용하는 것을 선택했습니다.

npm install

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

• fontawesome 의 아이콘을 사용하기 위해 먼저 설치합니다.

fontAweosome Icon 가져오기

main.js

import "../fontAwesomeIcon.js"
// ... 생략

fontAwesome.js

import Vue from "vue";
 // 설치했던 fontawesome-svg-core와 vue-fontawesome
import { library } from "@fortawesome/fontawesome-svg-core"; 
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; 
// 설치했던 아이콘파일에서 해당 아이콘만 불러옵니다. 
import {faComments, faBan, faFileAlt, faBell, faCheckCircle, faTrashAlt } from "@fortawesome/free-solid-svg-icons"; 
// 불러온 아이콘을 라이브러리에 담습니다. 
library.add(faComments, faBan, faFileAlt, faBell, faCheckCircle, faTrashAlt); 
// fontawesome아이콘을 Vue탬플릿에 사용할 수 있게 등록해 줍니다. 
Vue.component("font-awesome-icon", FontAwesomeIcon);

• 프로젝트에 사용하기 위해 main.js 에 import 하고 fontAwesome.js 에는 사용할 아이콘들을 불러옵니다.

• fontAwesome 사이트에서 검색한 아이콘의 이름을 카멜케이스 형식으로 바꾸어 import 합니다.

template code

 <font-awesome-icon
     size="lg" :style="{ color: 'orange' }" icon="bell" class=""
/>

• 위는 제가 사용했던 종 모양의 아이콘을 template 코드에 태그로 불러온 것입니다.

• <font-awesome-icon> 태그로 아이콘을 추가합니다.

• fontAwesome.js 에서 가져왔던 icon 중 사용하고 싶은 것을 icon 속성에서 불러오면 됩니다.