[StoryBook] Vue 3 + Typescript + StoryBook 프로젝트에 fontAwesome 설정하기

[StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기

이번 포스팅은 앞서 정리했던 [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기에서 fontAwesome을 적용하는 방법을 다루고 있습니다.

 

React를 사용하다가 Vue를 사용하다 보니 느끼는 거지만.. Vue에 부가적은 라이브러리를 사용할 때마다 구글링을 해보면 정보가 많이 없고, ChatGPT를 사용하더라도 정확한 내용이 나오지 않는 경우가 많다 보니 뭔가를 적용했을 때 블로그로 정리하는 작업이 매우 중요해지는 것 같다.

https://kr.pinterest.com/pin/30399366228558525/

 

본론으로 들어가자면 StoryBook에 fontawesome을 설정은 아래 과정을 참고해주세요.

 

• 1️⃣ StoryBook 설치하기 (생략)
• 2️⃣ fontAwesome 라이브러리 설치하기

  npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/vue-fontawesome

• 3️⃣. storyBook/preview.ts에 fontAwesome 적용하기: setup을 사용하여 Vue 앱에 FontAwesome 아이콘 컴포넌트를 'font-awesome-icon'이라는 이름으로 등록합니다.

  import type { Preview } from '@storybook/vue3';
  import { setup } from '@storybook/vue3';
  import 'element-plus/theme-chalk/src/index.scss';
  
  import { library } from '@fortawesome/fontawesome-svg-core';
  import { fas } from '@fortawesome/free-solid-svg-icons';
  import { far } from '@fortawesome/free-regular-svg-icons';
  import { fab } from '@fortawesome/free-brands-svg-icons';
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
  
  library.add(fas, far, fab);
  
  setup((app) => {
  	app.component('font-awesome-icon', FontAwesomeIcon);
  });
  
  const preview: Preview = {
  	parameters: {
  		controls: {
  			matchers: {
  				color: /(background|color)$/i,
  				date: /Date$/i,
  			},
  		},
  	},
  };
  
  export default preview;