[Vue3] fontawesome 사용하기

·2023년 1월 25일
0

Vue3

목록 보기
1/2

https://fontawesome.com/docs/web/use-with/vue/
링크 참조

1. Fontawesome 사용을 위한 npm 설치

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

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

npm i --save @fortawesome/vue-fontawesome@3

free-brands-svg-icons 이건 필요할때 설치

2. Vue 설정

main.js 에 아래 내용 추가

// fontawesome import
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas)

const app = createApp(App)

// createApp을 통해 생성한Application 인스턴스의 component API 활용
app.component('font-awesome-icon', FontAwesomeIcon)

app.use(router)
app.mount('#app')

3. Vue에서 사용

<font-awesome-icon icon="fa-solid fa-rotate-right" />
profile
열심히 기록

0개의 댓글