React와 함께 Font Awesome 5를 사용하는 방법

소개

통합을 촉진하기 위한 React 구성 요소에는 Font Awesome 5와 구성 방식을 이해하기 위한 몇 가지 기본 사항이 있습니다. 이 자습서에서는 React Font Awesome 구성 요소를 사용하는 방법을 살펴봅니다.

전제 조건

이 자습서에는 코딩이 필요하지 않지만 일부 예제를 실험하는 데 관심이 있는 경우 다음이 필요합니다.

• Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
• React 프로젝트를 설정하는 방법.

1단계 - Font Awesome 사용

Font Awesome 팀에서 선택한 아이콘을 만들었습니다.

이 예에서는 home 아이콘을 사용하고 App.js 파일의 모든 작업을 수행합니다.

import React from "react";
import { render } from "react-dom";

// get our fontawesome imports
import { faHome } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// create our App
const App = () => (
  <div>
    <FontAwesomeIcon icon={faHome} />
  </div>
);

// render to #root
render(<App />, document.getElementById("root"));

이제 앱에 작은 홈 아이콘이 생겼습니다. 이 코드는 홈 아이콘만 선택하므로 번들 크기에 하나의 아이콘만 추가됩니다.

이제 Font Awesome은 이 구성 요소가 마운트되면 이 구성 요소가 해당 아이콘의 SVG 버전으로 대체되는지 확인합니다.

2단계 - 아이콘 선택

아이콘을 설치하고 사용하기 전에 Font Awesome 라이브러리가 어떻게 구성되어 있는지 아는 것이 중요합니다. 아이콘이 많기 때문에 팀은 아이콘을 여러 패키지로 나누기로 결정했습니다.

원하는 아이콘을 선택하고 선택할 때 Font Awesome 아이콘 페이지를 방문하여 옵션을 탐색하는 것이 좋습니다. 페이지 왼쪽을 따라 선택할 수 있는 다양한 필터가 표시됩니다. 이 필터는 아이콘을 가져올 패키지를 나타내기 때문에 매우 중요합니다.

위의 예에서는 @fortawesome/free-solid-svg-icons 패키지에서 홈 아이콘을 가져왔습니다.

아이콘이 속한 패키지 결정

왼쪽의 필터를 검토하여 아이콘이 속한 패키지를 파악할 수 있습니다. 아이콘을 클릭하여 해당 아이콘이 속한 패키지를 볼 수도 있습니다.

글꼴이 속한 패키지를 알게 되면 해당 패키지의 3글자 약어를 기억하는 것이 중요합니다.

• 솔리드 스타일 - fas
• 일반 스타일 - far
• 조명 스타일 - fal
• 이중톤 스타일 - 유행

아이콘 페이지에서 특정 유형을 검색할 수 있습니다.

특정 패키지의 아이콘 사용

Font Awesome 아이콘 페이지를 탐색하면 일반적으로 동일한 아이콘의 여러 버전이 있음을 알 수 있습니다. 예를 들어 권투 장갑 아이콘을 살펴보겠습니다.

특정 아이콘을 사용하기 위해서는 를 조정해야 합니다. 다음은 서로 다른 패키지의 여러 유형의 동일한 아이콘입니다. 여기에는 앞서 논의한 세 글자 속기가 포함됩니다.

참고: 다음 예제는 몇 가지 섹션에서 아이콘 라이브러리를 빌드할 때까지 작동하지 않습니다.

솔리드 버전의 예는 다음과 같습니다.

<FontAwesomeIcon icon={['fas', 'code']} />

유형이 지정되지 않은 경우 기본적으로 솔리드 버전입니다.

<FontAwesomeIcon icon={faCode} />

그리고 fal을 사용하는 라이트 버전:

<FontAwesomeIcon icon={['fal', 'code']} />;

icon 소품을 단순한 문자열 대신 배열로 전환해야 했습니다.

3단계 - Font Awesome 설치

여러 버전의 아이콘, 여러 패키지 및 무료/프로 패키지가 있으므로 이들을 모두 설치하려면 하나 이상의 npm 패키지가 필요합니다. 여러 개를 설치한 다음 원하는 아이콘을 선택해야 할 수도 있습니다.

이 기사에서는 여러 패키지를 설치하는 방법을 시연할 수 있도록 모든 것을 설치합니다.

다음 명령을 실행하여 기본 패키지를 설치합니다.

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

일반 아이콘을 설치하려면 다음 명령을 실행하십시오.

# regular icons
npm i -S @fortawesome/free-regular-svg-icons
npm i -S @fortawesome/pro-regular-svg-icons

솔리드 아이콘을 설치합니다.

# solid icons
npm i -S @fortawesome/free-solid-svg-icons
npm i -S @fortawesome/pro-solid-svg-icons

조명 아이콘에 다음 명령을 사용합니다.

# light icons
npm i -S @fortawesome/pro-light-svg-icons

이렇게 하면 이중톤 아이콘이 설치됩니다.

# duotone icons
npm i -S @fortawesome/pro-duotone-svg-icons

마지막으로 브랜드 아이콘을 설치합니다.

# brand icons
npm i -S @fortawesome/free-brands-svg-icons

또는 한 번에 모두 설치하려는 경우 다음 명령을 사용하여 무료 아이콘 세트를 설치할 수 있습니다.

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

Font Awesome 프로 계정이 있는 경우 다음을 사용하여 모든 아이콘을 설치할 수 있습니다.

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/pro-solid-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons @fortawesome/free-brands-svg-icons

패키지를 설치했지만 아직 애플리케이션에서 사용하지 않았거나 아직 앱 번들에 추가하지 않았습니다. 다음 단계에서 어떻게 할 수 있는지 살펴보겠습니다.

4단계 - 아이콘 라이브러리 만들기

원하는 아이콘을 여러 파일로 가져오는 것은 번거로울 수 있습니다. 여러 곳에서 Twitter 로고를 사용한다고 가정해 보겠습니다. 여러 번 작성하고 싶지는 않습니다.

모든 것을 한 곳에서 가져오기 위해 각 아이콘을 별도의 파일로 가져오는 대신 Font Awesome 라이브러리를 만듭니다.

src 폴더에 fontawesome.js를 생성한 다음 index.js로 가져오겠습니다. 아이콘을 사용하려는 구성 요소(하위 구성 요소)에 액세스 권한이 있는 한 언제든지 이 파일을 추가할 수 있습니다. index.js 또는 App.js에서 바로 이 작업을 수행할 수도 있습니다. 그러나 용량이 커질 수 있으므로 별도의 파일로 옮기는 것이 좋습니다.

// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

자체 파일에서 이 작업을 수행한 경우 index.js로 가져와야 합니다.

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

render(<App />, document.getElementById('root'));

전체 아이콘 패키지 가져오기

모든 단일 아이콘을 앱으로 가져오므로 번들 크기가 커질 수 있으므로 전체 패키지를 가져오는 것은 권장되지 않습니다. 중요한 전체 패키지가 필요한 경우 확실히 할 수 있습니다.

이 예에서는 @fortawesome/free-brands-svg-icons의 모든 브랜드 아이콘을 원한다고 가정해 보겠습니다. 다음을 사용하여 전체 패키지를 가져옵니다.

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fab은 전체 브랜드 아이콘 패키지를 나타냅니다.

아이콘을 개별적으로 가져오기

Font Awesome 아이콘을 사용하는 권장 방법은 필요한 항목만 가져오므로 최종 번들 크기가 가능한 한 작아지도록 아이콘을 하나씩 가져오는 것입니다.

다음과 같이 다양한 패키지의 여러 아이콘에서 라이브러리를 만들 수 있습니다.

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

여러 스타일에서 동일한 아이콘 가져오기

fal, far 및 fas 패키지에 대한 모든 유형의 권투 장갑을 원하는 경우 다음을 수행할 수 있습니다. 모두 다른 이름으로 가져온 다음 추가하십시오.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

그런 다음 다른 접두사를 구현하여 사용할 수 있습니다.

<FontAwesomeIcon icon={['fal', 'boxing-glove']} />
<FontAwesomeIcon icon={['far', 'boxing-glove']} />
<FontAwesomeIcon icon={['fas', 'boxing-glove']} />

5단계 - 아이콘 사용

필요한 것을 설치하고 Font Awesome 라이브러리에 아이콘을 추가했으므로 아이콘을 사용하고 크기를 지정할 준비가 되었습니다. 이 자습서에서는 light(fal) 패키지를 사용합니다.

이 첫 번째 예는 일반 크기를 사용합니다.

<FontAwesomeIcon icon={['fal', 'code']} />

두 번째 예는 소형(sm), 중형(md), 대형(lg) 및 특대형(xl):

<FontAwesomeIcon icon={['fal', 'code']} size="sm" />
<FontAwesomeIcon icon={['fal', 'code']} size="md" />
<FontAwesomeIcon icon={['fal', 'code']} size="lg" />
<FontAwesomeIcon icon={['fal', 'code']} size="xl" />

세 번째 옵션은 최대 6까지 번호가 매겨진 크기 조정을 사용하는 것입니다.

<FontAwesomeIcon icon={['fal', 'code']} size="2x" />
<FontAwesomeIcon icon={['fal', 'code']} size="3x" />
<FontAwesomeIcon icon={['fal', 'code']} size="4x" />
<FontAwesomeIcon icon={['fal', 'code']} size="5x" />
<FontAwesomeIcon icon={['fal', 'code']} size="6x" />

번호가 매겨진 크기 조정을 사용할 때 소수점을 사용하여 완벽한 크기를 찾을 수도 있습니다.

<FontAwesomeIcon icon={['fal', 'code']} size="2.5x" />

Font Awesome은 CSS의 텍스트 색상을 사용하여 SVG의 스타일을 지정합니다. 이 아이콘이 있어야 할 곳에 <p> 태그를 배치하면 단락의 색상이 아이콘의 색상이 됩니다.

<FontAwesomeIcon icon={faHome} style={{ color: 'red' }} />

Font Awesome에는 다양한 변환을 함께 묶을 수 있는 강력한 변환 기능도 있습니다.

<FontAwesomeIcon icon={['fal', 'home']} transform="down-4 grow-2.5" />

Font Awesome 사이트에 있는 모든 변형을 사용할 수 있습니다. 이를 사용하여 아이콘을 위, 아래, 왼쪽 또는 오른쪽으로 이동하여 텍스트 옆이나 버튼 내부에 완벽한 위치를 지정할 수 있습니다.

고정 폭 아이콘

모든 아이콘의 너비와 균일성이 필요한 지점에서 아이콘을 사용할 때 Font Awesome에서는 fixedWidth 소품을 사용할 수 있습니다. 예를 들어 탐색 드롭다운에 고정 너비가 필요하다고 가정해 보겠습니다.

<FontAwesomeIcon icon={['fal', 'home']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'file-alt']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'money-bill']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'cog']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'usd-square']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'play-circle']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'chess-king']} fixedWidth />
<FontAwesomeIcon icon={['fal', 'sign-out-alt']} fixedWidth />

회전 아이콘

회전은 양식이 처리 중일 때 양식 버튼에 구현하는 데 유용합니다. 스피너 아이콘을 사용하여 멋진 로딩 효과를 만들 수 있습니다.

<FontAwesomeIcon icon={['fal', 'spinner']} spin />

무엇이든 spin 소품을 사용할 수 있습니다!

<FontAwesomeIcon icon={['fal', 'code']} spin />

고급: 아이콘 마스킹

Font Awesome을 사용하면 두 개의 아이콘을 결합하여 마스킹 효과를 낼 수 있습니다. 일반 아이콘을 정의한 다음 mask 소품을 사용하여 위에 놓을 두 번째 아이콘을 정의합니다. 첫 번째 아이콘은 마스킹 아이콘 내에서 제한됩니다.

이 예에서는 마스킹을 사용하여 태그 필터를 만들었습니다.

<FontAwesomeIcon
  icon={['fab', 'javascript']}
  mask={['fas', 'circle']}
  transform="grow-7 left-1.5 up-2.2"
  fixedWidth
/>

마스킹 아이콘 안에 맞게 내부 아이콘을 이동하기 위해 여러 transform 소품을 함께 연결하는 방법에 주목하십시오.

Font Awesome으로 배경 로고를 색칠하고 변경하기도 합니다.

6단계 — React 외부에서 react-fontawesome 및 아이콘 사용

전체 사이트가 SPA(Single-Page Application)가 아니고 대신 기존 사이트가 있고 그 위에 React를 추가한 경우. 기본 SVG/JS 라이브러리와 react-fontawesome 라이브러리를 가져오는 것을 방지하기 위해 Font Awesome은 React 라이브러리를 사용하여 React 구성 요소 외부의 아이콘을 감시하는 방법을 만들었습니다.

가 있는 경우 다음을 사용하여 Font Awesome이 이를 보고 업데이트하도록 지시할 수 있습니다.

import { dom } from '@fortawesome/fontawesome-svg-core'

dom.watch() // This will kick off the initial replacement of i to svg tags and configure a MutationObserver

Font Awesome 문서에 반응하세요.

결론

Font Awesome과 React를 함께 사용하는 것은 훌륭한 페어링이지만 여러 패키지를 사용하고 다양한 조합을 고려해야 합니다. 이 튜토리얼에서는 Font Awesome과 React를 함께 사용할 수 있는 몇 가지 방법을 살펴보았습니다.