Font Awesome 사용하기 ( + react )

 

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 

: 각각 라이브러리, 프레임 워크에 따라서 설치하는게 다르니까 시작 페이지에서 사용하는 거에 맞게 설치하기

 

 

 

관련 패키지 설치

- Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지

 

$ npm i @fortawesome/fontawesome-svg-core

​

-  Font Awesome 아이콘 대한 패키지

: 무료로 제공되는 Solid, Regular Brands 3개의 카테고리에 대한 패키지만 설치

$ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

 

- Font Awesome을 React 컴포넌트 형태

npm i @fortawesome/react-fontawesome

 

 

Font Awesome 아이콘 import 

: JavaScript 기반인 React에서 사용할 때는 특정 카테고리에서 필요한 아이콘만 임포트할 수 있다는 장점

import { faCheckSquare, faSpinner } from "@fortawesome/free-solid-svg-icons";
import { faSquare } from "@fortawesome/free-regular-svg-icons";

 

 

React 컴포넌트로 사용

: @fortawesome/react-fontawesome를 사용하고 있기 때문에 아이콘을 사용할 때 직접<svg/> 태그를 사용할 필요는 없다.

 

- FontAwesomeIcon 컴포넌트에 위에서 임포트한 Font Awesome 아이콘을 icon prop으로 넘겨준다.

 

import React from "react";
import { faCamera } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default () => <FontAwesomeIcon icon={faCamera} />;

 

 

 

출처

 

https://fontawesome.com/start

Font Awesome

 

https://www.daleseo.com/react-font-awesome/

React에서 Font Awesome 사용하기