React에서 Font Awesome 6을 간단히 사용하는 방법

Font Awesome에 대해 들어본 적이 있다면 웹 개발자에게 얼마나 유용한지 알 것입니다. 그렇지 않은 경우를 대비하여 Font Awesome에서 프로젝트를 위한 멋진 아이콘을 찾을 수 있습니다.
새 버전 6이 출시되면서 이전 버전보다 더 많은 아이콘에 액세스할 수 있습니다.

Font Awesome에는 5가지 유형의 아이콘이 있습니다.
fas는 Font Awesome solid, fal은 Font Awesome Light, 나머지는 Thin, Regular 및 Duotone입니다. 이는 UI/UX 디자인에 상당한 유연성을 추가합니다.
단, 라이트, 씬, 듀오톤은 프로회원만 가능합니다.

HTML, React, Angular 및 Vue 💪🏻와 같은 여러 프레임워크에서 사용할 수 있습니다.

설치

react-fontawesome이 작동하는 데 필요한 라이브러리 설치를 시작하겠습니다.

// If you are using npm:
$ npm install @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

// or, using Yarn:
$ yarn add @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

The packages here are for the free version. If you’re looking to utilize new pro icons and styles, look at their site for additional installation and setup directions.

구현

완료되면 앱 전체에서 이러한 아이콘을 구현할 수 있습니다.
아이콘을 사용하는 방법에는 여러 가지가 있습니다. 여기에서 우리는 일반적으로 사용되는 방식을 볼 수 있으며 최대한 수월합니다.
fontawesome-svg-core 모듈을 애플리케이션의 루트 수준, 즉 App.js로 가져오고 library.add 메서드를 사용하여 앱에 추가합니다.

//App.js
import { library } from "@fortawesome/fontawesome-svg-core";
import { faMoon, faRocket } from "@fortawesome/free-solid-svg-icons";

library.add(faMoon, faRocket);
…

All icons can be found in Font Awesome’s icon library.

이것으로 응용 프로그램의 아이콘 구현이 완료됩니다.
Component.js라는 구성 요소를 만들어 보겠습니다. 아이콘은 App.js의 라이브러리에 이미 추가되어 있으므로 다음을 가져오기만 하면 됩니다.

// Component.js

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export const Component = () => {
  return (
    <div className="App">
      To the Moon:
      <FontAwesomeIcon icon="moon" />
      <FontAwesomeIcon icon="rocket" />
    </div>
  );
};

라이브러리에 faMoon 및 faRocket을 추가하면 아이콘 문자열 이름인 moon 및 rocket(소문자)을 사용하여 앱 전체에서 이들을 참조할 수 있습니다. faTruckMonster와 같은 두 부분이 있으면 트럭 괴물이 됩니다. 웹사이트의 아이콘 카드에 표시된 이름에 주의하십시오.



따라서 처음에는 아이콘이 기본 형태로 찌그러지고 작습니다.

<FontAwesomeIcon icon="moon" color="silver" size="3x" />
<FontAwesomeIcon icon="rocket" color="rebeccapurple" size="2x" />

FontAwesomeIcon 구성 요소는 아이콘 스타일을 변경하기 위해 몇 가지 다른 소품을 사용할 수 있습니다. 여기서 우리는 색상과 크기 소품을 사용했습니다. 크기 소품은 xs, lg, 2x, 3x 등과 같은 문자열 값을 예상합니다.

통과할 수 있는 소품도 꽤 많이 있습니다. 특히, 회전 및 펄스 부울 속성은 아이콘 자체를 회전시킵니다.

.css 파일에서 사용자 지정 CSS를 추가할 수 있습니다. 아이콘은 SVG이므로 글꼴 크기와 색상 속성을 원하는 대로 변경할 수 있습니다.

Note: Don't use the CDN link of FontAwesome in your index.html file. It will decrease the performance of your site.

이제 원하는 모든 앱에서 아이콘을 사용할 수 있습니다. 그러니 프로젝트를 만들고 재미있게 즐기세요.

읽어 주셔서 감사합니다!