font awesome은 매우 무겁다! 사용하는 아이콘만 가져옵니다!

Font Awesome은 편리하기 때문에 자주 사용합니다만, 그대로 읽으면 매우 무겁게 되어 버립니다.


패키지는nuxt-fontawesome 라는 모듈 사용

Nuxt FontAwesome5
htps //w w. 음 pmjs. 코 m / Pac 가게 / No xt-futa tae some

yarn add nuxt-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome

nuxt.config.js 에서 modules
nuxt.config.js

modules: [
  'nuxt-fontawesome',
],

/*
 ** FontAwesome
 */
 fontawesome: {
  component: 'fa'
},

그래서 가볍게 하기 위해 필요한 아이콘만 로드하도록 합니다.

구성요소로 로드

import { faMapMarkerAlt } from ‘@fortawesome/free-solid-svg-icons’

덧붙여서 이것은 fontawesome 는 아니고, 왠지 「 fortawesome 」이므로 철자 주의! !

*.vue

<script>
 export default {
  computed: {
    faMapMarkerAlt() {
      return faMapMarkerAlt
    }
  }
</script>

템플릿에서 사용할 때 태그

<fa :icon=“faMapMarkerAlt” />

이상입니다.



같은 프로젝트에서도 FontAwesome을 최적화하여 상당히 압축할 수 있었습니다.