Font Awesome에 사용자 지정 아이콘 추가

최근 프로젝트 중 하나에서 Font Awesome을 아이콘 세트로 사용했지만 표준 Font Awesome의 라이브러리에 포함되지 않은 새 아이콘인 DuckDuckGo 로고를 추가해야 했습니다 🦆



약간의 연구 끝에 저는 Font Awesome이 제공되는 것 외에도 사용자 지정 아이콘을 추가할 수 있다는 것을 발견했습니다. 이 튜토리얼에서는 코드를 깔끔하게 유지하면서 3단계로 Font Awesome을 확장하는 방법을 보여드리겠습니다.

1) 먼저 myicons라는 폴더를 만들고 js 파일 안에 아이콘 정의를 추가합니다(제 경우에는 fa-duckduckgo.js)

export const faDuckDuckGo = {
  prefix: "fab",
  iconName: "duckduckgo",
  icon: [
    24,
    24,
    [],
    "e001",
    "M12 0C5.373 0 0 ... .616.484z"
  ]
};

prefix 및 iconName는 각각 아이콘 그룹(이 경우 fab -> Font Awesome brands) 및 아이콘 이름이므로 이러한 방식으로 아이콘을 렌더링할 수 있습니다.

<i class="fab fa-duckduckgo"></i>

icon 섹션에는 SVG 보기 상자(이 경우 24, 24), 이 사용자 지정 아이콘을 나타내는 유니코드 포인트( e001 ) 및 단일 경로 SVG가 포함됩니다.

2) 사용자 정의 아이콘을 내보낼 인덱스 파일myicons/index.js을 생성합니다.

export { faDuckDuckGo } from "./fa-duckduckgo";

3) fontawesome-svg-core 패키지 설치

yarn add @fortawesome/fontawesome-svg-core

Font Awesome에서 사용자 지정 아이콘을 사용할 수 있도록 합니다.

import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faDuckDuckGo } from "./myicons";

library.add(faDuckDuckGo);

dom.watch();

위의 코드에서 사용자 지정 아이콘은 이전에 만든 myicons 모듈에서 가져온 다음 Font Awesome의 라이브러리에 추가됩니다. dom.watch 메서드는 DOM에서 추가 또는 수정 중인 추가 아이콘을 감시합니다.

여기서 최종 데모로 플레이할 수 있습니다!



Pssst... TypeScript를 사용하는 경우 this example에서 볼 수 있듯이 fontawesome-svg-core의 일부 유형을 사용해야 합니다.