💎 들어가며

이번 포스팅에서는 아이콘 라이브러리에 대해 간략히 설명하고, React 프로젝트에 다양한 아이콘 라이브러리를 추가하는 방식에 대해 설명합니다.

1. 아이콘 라이브러리

아이콘을 사용하면 웹사이트를 좀 더 풍부하게 보이는 효과를 발휘합니다.

전통적인 웹사이트에서는 아이콘을 사용할 때 이미지를 이용하거나, 이미지를 잘라서 사용하는게 대표적인 방식이었습니다. 하지만 요즘에는 아이콘을 간편하게 빠르게 사용할 수 있는 다양한 아이콘 라이브러리들이 생겨났습니다.

대표적인 아이콘 라이브러리에는 다음과 같이 있습니다.

• React Icons
• FontAwesome
• Material Icons

2. 설정 및 사용예시

2.1 React Icons

React Icons 홈페이지에서 다양한 정보 및 아이콘을 검색해서 사용할 수 있습니다.

아래는 공식 홈페이지의 일부분입니다.

React Icons에서는 다양한 종류의 아이콘을 제공하는 것을 볼 수 있습니다.

Bootstrap, FontAwesome, Material Icon 등 다양한 라이브러리를 내장해서 제공하니 사실 얘만 쓰면 두려울게 없어보입니다.

Dependency 추가

yarn add react-icons

사용 예시

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

2.1 FontAwesome

FontAwesome 사이트에서 아이콘을 검색하여 설정할 수 있습니다.

다른 아이콘 라이브러리들을 찾아보면서 FontAwesome은 상당히 까다롭게 느껴졌습니다. 하지만 추가 매크로 설정을 하면 오히려 간편하게 사용할 수 있을지도 모르겠습니다.

Dependency 추가

# Step 1. FontAwesome 코어 패키지: 아이콘을 만들어 주는 모든 유틸리티
$yarn add @fortawesome/fontawesome-svg-core

# Step 2. FontAwesome 스타일별(solid, regular, brands) 아이콘
$yarn add @fortawesome/free-solid-svg-icons
$yarn add @fortawesome/free-regular-svg-icons
# brand는 왜인지 현재 동작 X
$yarn add @fontawesome/free-brands-svg-icons

# FontAwesome React Component
$yarn add @fortawesome/react-fontawesome@latest

사용 예시

import { IconButton } from "@mui/material";

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

const TestView = () => {
	return (
    	<IconButton>
        	<FontAwesomeIcon icon={faDownload}/>
        </IconButton>
    );
}

추가 설정

아이콘을 사용할 때마다 아이콘 컴포넌트를 추가하면 상당히 비효율적입니다. 아이콘 컴포넌트를 추가하지 않고 동적으로 아이콘을 가져오기 위해 몇가지 추가 세팅을 해줍니다.

1. Babel 매크로 설치

$yarn add babel-plugin-macros

2. Babel 구성 설정

• babel.config.js 추가

module.exports = function (api) {
	return {
		plugins: ['macros'],
	}
}

• babel-plugin-macros.config.js 추가

module.exports = {
	'fontawesome-svg-core': {
		'license': 'free'
	}
}

3. 사용 예시

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { icon } from '@fortawesome/fontawesome-svg-core/import.macro'

// Defaults to the Classic family, Solid style
<FontAwesomeIcon icon={icon({name: 'user-secret'})} />

// Defaults to Classic family
<FontAwesomeIcon icon={icon({name: 'coffee', style: 'regular'})} />

// Setting both family and style
<FontAwesomeIcon icon={icon({name: 'coffee', family: 'sharp', style: 'solid'})} />

2.3. Material Icons

Material Icons 공식 사이트에서 추가 정보를 확인할 수 있으며, 아이콘을 검색해서 사용할 수 있습니다.

Dependency 추가

$yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react

사용 예시

import { IconButton } from "@mui/material";
import HomeIcon from '@mui/icons-material/Home';

const TestView = () => {
	return (
    	<IconButton>
        	<HomeIcon />
        </IconButton>
    );
}

💎 References

• React Icons
• FontAwesome DOCS
• FontAwesome 공식 사이트
• Material Icons