Nuxt 에서 fontawesome 도입하기

1. 우선 pro가 아닌 free로 이용할 수 있는 fontawesome 패키지 추가

yarn add -D @nuxtjs/fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

 

2.  사용할 icon들을 설정

각각 필요한 icon들은 다를텐데 이걸 nuxt.config에서 직접 넣어주기보다는(아이콘 1개 2개 사용할꺼 아니니깐)

다른 설정파일을 하나 만들어서 import export로 넣어주는게 공식사이트에서 추천하고 있는 방법

 

icon/fontawesome.js

const solid = [
  'faDownload',
  'faUser'
]

const regular = ['faStar']

const brands = ['faTwitter']

export { solid, regular, brands }

 

3. 설정한 파일을들 nuxt.config.js에서 읽어들인다

nuxt.config.js

import * as FontAwesome from './icon/fontawesome'

export default {
  buildModules: [
    ['@nuxtjs/fontawesome', { component: 'fontAwesome', suffix: true }]
  ],
  fontawesome: {
    icons: {
      solid: FontAwesome.solid,
      regular: FontAwesome.regular,
      brands: FontAwesome.brands
    }
  },
}

buildModules 에 추가한 옵션에 대해서는 이하의 문서를 참조

https://github.com/nuxt-community/fontawesome-module#module-options

GitHub - nuxt-community/fontawesome-module: Module to use Font Awesome icons in Nuxt.js

 

4. 사용방법

<font-awesome-layers class="fa-4x"> <!-- suffix: true 덕분에 -icon 생략가능(기존: font-awesome-icon-layers) -->
  <font-awesome-icon icon="download" /> <!-- font-awesome => 위에서 설정한 component 이름 -->
</font-awesome-layers>

여기서 download는 static이기 때문에 따로 prefix를 안붙여줘도 되지만 regular ['far', 'bell'] 같이 배열로 icon에 props를

주면 된다. (아마 brand는 필요없었나? 모르겠다.)

 

 

*추천 안하는 방법

개발을 빠르게 하기위해서 따로 fontawesome설정 파일(어떤 아이콘을 쓸지 개별설정하는 파일)을 안하고

전체를 그냥 다 불러들이는 방법도 있는데

icons: {
  solid: true // free-solid에 있는 모든친구들을 불러들인다.
}

어짜피 배포할 때는 번들사이즈 최적화를 위해서는 개별파일을 설정해야 하니깐 처음부터 개별로 불러들이도록 하자

이것도 공식문서에서 not recommanded라고 써져있다~