Nuxt3 + storybook + tailwind + fontawesome (2)

지난번에 Nuxt3 + storybook + tailwind + fontawesome 세팅 방법에 대해서 글을 작성하였습니다.

하지만 위와 같이 fontawesome 의 아이콘은 표시가 되지 않았었는데, 한가지 놓친게 있었습니다.

***.vue 파일에 fontawesom 라이브러리를 import 해야지만 사용이 가능합니다.
nuxt3에서 컴포넌트 개발시에는 굳이 import를 하지 않아도 됐었는데, storybook에서 사용을 하려면 어쩔수 없는 것 같습니다.

아래는 예시 코드 입니다.

<template>
...
<font-awesome-icon :icon="['fas', 'apple-whole']" /> IFA
...
</template>
<script setup lang="ts">
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
...
</script>

위와 같이 import 를 해주면 아래와 같이 아이콘이 표시가 되는 것을 볼 수 있습니다.

이로써 세팅은 끝이 났고, 앞으로 컴포넌트를 만들어 보도록 하겠습니다.