Published on

[Svelte] Font Awesome 사용하기

[Svelte] Font Awesome 사용하기

npm install svelte-fa

npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons

Svelte Kit 사용 시

Svelte 사용시에는 Fa를 사용하기 위해서는 Svelte파일을 import해야 합니다.

import Fa from 'svelte-fa/src/fa.svelte'

아이콘 추가해보기


<script lang="ts">
  import Fa from 'svelte-fa/src/fa.svelte'
  import { faGithub } from '@fortawesome/free-brands-svg-icons';
</script>

<Fa icon={faGithub}/>

빌드 후 실행 시 에러 발생

SyntaxError: Named export 'faGithub' not found. The requested module '@fortawesome/free-brands-svg-icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@fortawesome/free-brands-svg-icons';
const { faGithub } = pkg;

개발모드에서는 잘 되다가 빌드 후 실행시켰더니 위와 같은 에러가 발생했습니다.

저는 앞에 /node_modules를 추가함으로써 정상 작동 되었습니다.

import { faGithub } from '/node_modules/@fortawesome/free-brands-svg-icons'

참고 사이트

https://www.npmjs.com/package/svelte-fa