[React] 아이콘 - iconify, react-icon

리액트 내에서 아이콘을 사용할 때, 전통적인 방식으로 아이콘 이미지를 업로드하고 사용해도 되지만, 프로젝트에서 정해진 아이콘 형식이 없을 때는, 무료 라이선스의 아이콘 라이브러리를 사용하는 것을 고려할 수도 있다.

iconify

Iconify는 SVG, JSON, JavaScript와 같은 다양한 형식으로 아이콘을 제공한다. Iconify는 다양한 플랫폼 및 프레임워크와 호환되며, React, Vue.js, Angular 등 다양한 프레임워크에서 사용할 수 있다. 아래 링크에서 필요한 아이콘 키워드를 검색해 사용한다.
https://icon-sets.iconify.design/mdi/

사용법

1. iconify를 install한다.
   npm install --save-dev @iconify/react

2. iconify를 import 하고 https://icon-sets.iconify.design/mdi/ 의 경로에서 찾은 클래스명을 사용한다.

import { Icon } from '@iconify/react';

react-icons

React-Icons는 리액트 프로젝트에서 아이콘을 사용하기 위한 라이브러리이다. 이 라이브러리는 리액트 애플리케이션에서 다양한 아이콘을 사용할 수 있고, FontAwesome, Material Icons, Ionicons 등과 같은 다양한 아이콘 세트를 지원한다.

사용법

1. react-icons를 install한다.
   npm install react-icons --save

2. react-icons를 import 하고  https://react-icons.github.io/react-icons 의 경로에서 찾은 클래스명을 사용한다.

import { Icon } from 'react-icons/ai';