[ Vue ] NUXT JS Fontawesome icon 불러오기

Font Awesome 바로가기

npm nuxtjs/fontawesome 바로가기

 

$ npm install

$ npm install @nuxtjs/fontawesome@1.1.2
$ npm install @fortawesome/free-brands-svg-icons@6.1.1
$ npm install @fortawesome/free-regular-svg-icons@6.1.1
$ npm install --save @fortawesome/free-solid-svg-icons@6.1.1

$ npm install @fortawesome/fontawesome-svg-core@6.1.1
$ npm install @fortawesome/vue-fontawesome@2.0.6

 

 

JS생성 : fontawesome.js

const solid = [ 'fas' ]

const regular = [ 'far' ]

const brands = [ 'fab' ]

export { solid, regular, brands }

 

nuxt.config.js

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

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

 

.vue 파일

<!-- suffix: true로 인해 -icon 생략가능(기존: font-awesome-icon-layers) --> 
<font-awesome-layers class="">
    <font-awesome-icon icon="fa-solid fa-bars" />
</font-awesome-layers>

<!-- 아이콘 크기변경 fa-lg, fa-2x, fa-3x, fa-4x, fa-5x CLASS를 적용하여 기본 크기 외에 다양한 크기의 아이콘을 나타낼 수 있다. -->