nuxt3에 fontawesome 설치하기

출처 : https://docs.fontawesome.com/web/use-with/vue/use-with (폰트어썸 공식문서)

npm 라이브러리 설치가 나는 왜이렇게 어려울까 !!!!

1. npm 설치

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

2. 프로젝트 폴더에 plugins폴더를 만들고, fontawesome.js 파일을 생성

fontawesome.js 내용

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})

3. nuxt.config.ts에 css 내용 추가

export default defineNuxtConfig({
css: [
'@fortawesome/fontawesome-svg-core/styles.css'
]
})

4. 짠

<template>
  <div>
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
</template>