Nuxt.js와 Storybook (5.3 이상) 모두에서 Font Awesome을 사용할 수있게 만들기

조금 격투한 결과, Nuxt.js의 앱과 스토리 북 모두에서 Font Awesome을 사용한 구성 요소를 볼 수 있습니다 😤

이런 식으로 ...

구성

간단한 Nuxt.js + Storybook 구성을하고 있습니다.

.
├── .storybook
│   ├── main.js
│   └── preview.js
│   
├── components
│   ├── Component.vue
│   └── index.stories.js
│
├── nuxt.config.js
├── package.json

또한 Font Awesome 아이콘은 다음 정책으로 로드됩니다.

production(Nuxt.js)측: 조금이라도 용량을 가볍게 하기 위해서 필요한 폰트만 읽어들입니다.

development(Storybook)측: 폰트를 지정하는 번거로움을 생략하기 위해 사용 가능한 모든 폰트를 읽어들인다

Storybook 5.3부터는 설정 파일이 main.js로 바뀝니다.

사용한 환경은 Storybook 5.3 이상과 설정 파일의 구조가 새롭게 되었습니다.

package.json (발췌)

...
  "dependencies": {
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@storybook/vue": "^5.3.17"
  }
...

Storybook 5.3부터는 config.js가 main.js로 바뀌고 story를 표시하는 부분과 관련된 설정은 preview.js(아래 그림에는 없지만)로 신설됩니다.


인용 : htps : // 메이 m. 코 m / s와 ry 보오 kjs /에서 c 라라 ゔ ぇ s와 ry 보오 k

종래의 방법도 사용할 수 있습니다만, Storybook 6계가 될 때까지는 이행을 생각해 둡시다.

The old config.js syntax and configurable hierarchy separators will be supported until Storybook version 6.0.

여기에서는 새롭게 되었다 main.js 에 대해서는 상세히 설명하지 않습니다.

npm 패키지 도입

시작하려면 FontAwesome을 사용 가능하게 하는 패키지를 소개합니다.

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

Nuxt.js에 대한 설정

이쪽은, 조금이라도 용량을 가볍게 하기 위해서 사용하는 아이콘만을 읽어들입니다.
아이콘의 지정은, fas 에서도 fab 에서도 fa + アイコン名のキャメルケース 가 됩니다.

./nuxt.config.js

  modules: [
    'nuxt-fontawesome',

...

  fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['faVuejs']
      },
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['faTimesCircle']
      }
    ]
  },

스토리북용 설정

이 글은 Font Awesome 아이콘을 모두 불러옵니다.
main.js 는 스토리북에서 보려는 스토리 위치를 지정합니다.

.storybook/main.js

module.exports = {
  stories: ['../components/**/*.stories.js'],
...

preview.js 에서 Font Awesome을 모든 story로 로드합니다.configure 의 경로는 main.js 로 지정한 경로와 철저히 묶이도록 합니다.

.storybook/preview.js

import { configure } from '@storybook/vue'
import Vue from 'vue'

import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(fas, far, fab)

Vue.component('font-awesome-icon', FontAwesomeIcon)
configure(require.context('../components', true, /\.stories\.js$/), module)

Nuxt 부품

이 설정은 컴포넌트 측에서 FontAwesomeIcon 컴포넌트를 호출하는 것만으로 Nuxt.js와 Storybook에서 동일한 아이콘을 표시합니다.

각 구성 요소, *.stories.js 에 Font Awesome을 import하는 코드를 작성할 필요가 없습니다 ✌️

fa- 의 prefix 를 제거해 지정합니다.

fab fa-vuejs 예( htps : ///후타타우우소메. 코 m / 이콘 s / ㅔ js? style = b rands )

./components/Component.vue

<template>
  <div>
    <font-awesome-icon :icon="['fab', 'vuejs']"/>
  </div>
</template>

참고

Declarative Storybook configuration - Storybook - Medium
htps : // 메이 m. 코 m / s와 ry 보오 kjs /에서 c 라라 ゔ ぇ s와 ry 보오 k

FortAwesome/vue-fontawesome: Font Awesome 5 Vue component
htps : // 기주 b. 코 m / 훗 r 타우 소메 / ゔ 에우 퐁 타우 소메

Font awesome을 Vue.js에서 사용해 봅시다 - Qiita
htps : // m / 쿠라 라라 / ms / d76776 A7 dc2d763 A068b