VUE3 에서 fontawesome 사용하기

vue3에서는 아직 공식적으로 fontawesome을 지원하지 않는다고 한다. 

어쩐지 vue-fontawesome의 설치 가이드를 통해 설치했을때 에러가 발생하더라! 

 

검색을 통해 다음과 같은 방법을 찾아내었다! 

 

1. Fontawesom 사용을 위한 기본 npm 설치

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/vue-fontawesome@3.0.0-1

나같은 경우는 마지막 npm i --save @fortawesome/vue-fontawesome@3.0.0-1 에서 에러가 발생했다.

그래서 package.json에

"@fortawesome/vue-fontawesome": "^3.0.0-1",

추가해 주었다.

 

2. vue3에서 사용하기

main.ts에 아래에 있는 것들을 추가해주었다.

// font-awesome과 관련된 import를 정의
 
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faUserSecret)

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

 

예제 코드로 <font-awesome-icon icon="user-secret" /> 사용하면 아이콘이 적용된것을 확인할 수 있다.

 

나는 index.html 에 아래와 같은 코드를 작성해

    <!-- 폰트어썸 -->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

<i class="fas fa-sign-in-alt"> 와 같은 코드로 fontawsome을 사용하였다.