[Vue.js] vue3에서 Font Awesome Icon 사용하기

아이콘을 적용하다가 도저히 괜찮은 아이콘이 없어 결국 폰트어썸으로 왔다.

...

 

https://fontawesome.com/docs/web/setup/get-started

Get Started

FontAwesome Docs 를 보면 제일 하단에 Vue 라고 있다. 

Vue.js 에서 적용하는 방법이 나와있다. 

npm i --save @fortawesome/fontawesome-svg-core

npm 기준으로 먼저 설치를 한 후 

# Free icons styles
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

그러면 기본 아이콘은 설치가 된다. 

https://fontawesome.com/docs/web/use-with/vue/

Set Up with Vue

 

클라이언트에서 적용하는 방법

main.js에서 설정을 해줘야 한다. 

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { far } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(fas)
library.add(far)

이렇게 입력을 해주고 createApp 쪽에 추가를 해준다. 

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

그러고 컴포넌트에 html 로 작성을 해준다. 

기억나는게 user 밖에 없어서 우선 입력을 해보았다.

  <font-awesome-icon class="h-7 w-7" icon="user"></font-awesome-icon>

재실행을 해보니 아이콘이 잘 뜬다. 

 

 

예전에 vue2 를 적용했을 때 보다 더욱 간결해진 느낌이다.