React 무료 아이콘 라이브러리 추천

Font Awesome

많은 개발자들이 사용하고 있을 것이라 생각하고, 그만큼 인지도가 높다.
아이콘의 사이즈와 색상 변경, 아이콘 회전, 움직이는 아이콘, 아이콘의 border 조절 등의 기능으로 사용성이 좋다.

CDN으로 Font Awesome 사용하기

---

- CDN (Font Awesome 5는 카테고리 별로 분류가 되어있다)

// Font Awesome 5
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>

// Font Awesome 4
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"/>

 

- 사용예시

<i class="fas fa-home"></i>
<i class="fa fa-home"></i>

 

모듈 설치로 Font Awesome 사용하기

---

https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

Font Awesome

 

React 모듈 설치

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

 

사용법

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />
ReactDOM.render(element, document.body)

 

+  되도록이면 최신 버전을 사용하는 것을 권장한다고 한다.

+ ↓↓ 아이콘 찾을 때는 여기서

https://fontawesome.com/v5.15/icons?d=gallery&p=1 

Font Awesome

 

 

Remix Icon

 

https://remixicon.com/

Remix Icon - Open source icon library

 

필요할만한 아이콘들은 다 있으면서 Font Awesome보다 아이콘 수가 적어서 간단한 프로젝트 할 때 용이하다.
아이콘을 png 파일로 다운받아서 사용이 가능하다.

* 필자는 개인적으로 적은 Remix Icon 을 선호하는데, 웹디자이너가 심플하다고 Remix Icon 을 엄청 좋아했다​

 

CDN으로 Remix Icon 사용하기

---

CDN

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

 

사용예시

<i class="ri-home-3-line"></i>

 

모듈 설치로 Remix Icon 사용하기

---

https://github.com/Remix-Design/remixicon#usage

GitHub - Remix-Design/RemixIcon: Open source neutral style icon system

 

React 모듈 설치

npm install remixicon --save

 

* 'free-solid-svg-icons/ free-regular-svg-icons/ free-brands-svg-icons'
:  필요한 아이콘이 있는 카테고리만  다운받아도 된다.

사용법

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}