[vue] fontawesome 사용(아이콘)

* vue3버전 기준으로 cli로 설치하기

 

 1. Add SVG Core

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

2. Add Icon Packages

# 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

# Pro icons styles
npm i --save @fortawesome/pro-solid-svg-icons
npm i --save @fortawesome/pro-regular-svg-icons
npm i --save @fortawesome/pro-light-svg-icons
npm i --save @fortawesome/pro-thin-svg-icons
npm i --save @fortawesome/pro-duotone-svg-icons
npm i --save @fortawesome/sharp-solid-svg-icons
npm i --save @fortawesome/sharp-regular-svg-icons
npm i --save @fortawesome/sharp-light-svg-icons

 3. Add the Vue Component

 # for Vue 3.x
npm i --save @fortawesome/vue-fontawesome@latest-3

 

4. C:\workspace_vue\todoapp\src\main.js

import { createApp } from 'vue'
import App from './App.vue'

import { library } from '@fortawesome/fontawesome-svg-core'
/* import specific icons */
import { fas } from '@fortawesome/free-solid-svg-icons'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* add icons to the library */
library.add(fas)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')

 

* 사용하기

<span class="addContainer" v-on:click="addTodo">
  <font-awesome-icon icon="fa-solid fa-plus" class="addBtn"/>
</span>

 

 

참고)

-vue에 cli로 설치관련

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

 

-solid 아이콘 종류

https://fontawesome.com/search?o=r&m=free&s=solid&f=classic 

Font Awesome

https://fontawesome.com/

Font Awesome

 

Font Awesome

 

https://coonihong.tistory.com/57