React 애플리케이션에서 FontAwesome 아이콘 사용

당신은 그것을 깨닫지 못할 수도 있지만 아이콘과 로고는 현대 응용 프로그램의 필수적인 부분입니다. React에서 인터페이스를 구축하는 동안 개발자는 아이콘이 포함된 다양한 툴킷과 패키지를 사용할 수 있습니다. FontAwesome은 다양한 아이콘을 제공하기 때문에 최고의 옵션 중 하나입니다. FontAwesome의 팀은 아이콘을 React 생태계에 통합하기 위해 노력했습니다.

React에서 FontAwesome 사용하기

React용 FontAwesome 아이콘 선택하기

응용 프로그램에 필요한 아이콘 유형을 결정했으면 Font Awesome Icons 페이지에서 관련 키워드를 검색하여 적합한 것을 찾을 수 있습니다. 왼쪽에 보이는 필터는 선택의 폭을 좁히는 데 필수적입니다. 그들은 당신이 찾고 있는 것을 정확히 찾는 데 도움을 줄 수 있으며 더 중요한 것은 어떤 FontAwesome 패키지를 설치해야 하는지 알려줄 수 있습니다.

일반 아이콘을 설치하려면 명령줄에서 다음 명령을 실행합니다.

npm install --save @fortawesome/free-regular-svg-icons

설치할 수 있는 다양한 패키지를 모두 탐색하려면 이 가이드를 살펴보십시오.

라이브러리 만들기

애플리케이션이 성장함에 따라 다양한 파일에 아이콘이 필요하게 될 것입니다. 동일한 아이콘을 계속해서 가져오는 것은 지칠 수 있습니다. 대신, FA 라이브러리를 생성할 하나의 JavaScript 파일에 필요한 모든 아이콘을 가져올 수 있습니다.

아이콘 라이브러리는 src 폴더에 저장하는 것이 일반적입니다. 라이브러리에는 React 애플리케이션 전체에서 사용되는 모든 아이콘이 포함되어야 합니다. 완료되면 모든 하위 요소가 액세스할 수 있도록 상위 구성 요소(일반적으로 App.js)에서 라이브러리를 가져옵니다.

간단한 아이콘 라이브러리는 다음과 같습니다.

import {library} from '@fortawesome/fontawesome-svg-core';
// import the necessary icons
import {faCheckSquare, faCoffee} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faCoffee,
    faCheckSquare,
);

<FontAwesomeIcon/> 사용

react-fontawesome 패키지에는 React 애플리케이션에서 FA 아이콘을 사용하기 위해 명시적으로 생성된 <FontAwesomeIcon /> 사용자 지정 구성 요소가 포함되어 있습니다. 별도의 구성 요소 접근 방식은 성능 향상을 제공하고 전체 번들 크기를 최소화할 수 있습니다.

<FontAwesomeIcon/> 구성 요소를 사용하려면 react-fontawesome 패키지를 설치해야 합니다. 또한 특정 아이콘을 가져와야 합니다. 예를 들어 Twitter 로고를 사용하려면 faTwitter 아이콘을 가져와야 합니다.

import React, { Component } from 'react';
import { render } from 'react-dom';
import { faTwitter } from '@fortawesome/free-brands-svg-icons';

class App extends Component {
  render() {
    return <FontAwesomeIcon icon={ faTwitter }/>
  }
}

icon 속성이 가장 중요하지만 다른 속성을 사용하여 아이콘을 사용자 지정할 수 있습니다.

size 속성은 소형의 경우 sm, 중형의 경우 md, 대형의 경우 lg, 초대형의 경우 xl 등 다양한 값을 허용합니다. 또한 숫자 값을 허용하므로 표준 크기를 기준으로 아이콘 크기를 조정하는 데 도움이 됩니다. 2x와 6x 값 사이의 숫자 값을 사용하여 그에 따라 아이콘을 확대할 수 있습니다. 10진수 값을 사용할 수도 있습니다. 인라인 스타일을 사용하여 <FontAwesomeIcon /> 구성 요소의 모양을 변경할 수도 있습니다.

className 사용

create-react-app CLI를 사용하여 React 애플리케이션을 개발하는 경우 className 속성을 사용하여 아이콘을 표시할 수 있습니다. 다른 프레임워크나 언어에서 왔다면 이것이 FontAwesome을 사용하는 데 익숙한 방법일 가능성이 큽니다.

JSX 구문에서는 일반 DOM과 마찬가지로 className 속성을 사용해야 한다는 것을 잊지 마십시오. 이것은 JavaScript의 class가 예약어이기 때문에 필요합니다.

font-awesome 라이브러리를 설치했으면 index.js 파일로 가져와야 합니다. 파일에는 다음이 포함되어야 합니다.

import 'font-awesome/css/font-awesome.min.css';

아이콘 스타일을 가져온 후에는 JSX에서 일반 className 구문을 사용할 수 있습니다.

 render: function() {
    return <span><i className="fa fa-address-card fa-amazon">Icon</i></span>;
}