[React:리엑트] React-icon

https://www.npmjs.com/package/react-icons

react-icons

2021-10-21 기준 사용량

react icon는 리엑트에서 사용하는 많이 사용하는 icon들을 쉽게 사용할 수 있도록 모아둔 패키지이다.
이 패키지를 사용하면 쉽게 다양한 아이콘들을 사용할 수 있다.

 

1. 설치하기

npm install react-icons --save

설치가 잘되었는지 확인해보기

npm ls --depth=0

설치가 제대로 되었음을 확인할 수 있다.

 

2. 사용해보기

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

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

React icon 공식 사이트에서 제공하는 사용방법이다. 직접 프로젝트에 넣어서도 사용해보자 

 

import "./styles.css";
import { FaBeer } from "react-icons/fa";

export default function App() {
  return (
    <div className="App">
      <h1>
        <FaBeer />
      </h1>
      첫번째 icon
    </div>
  );
}

https://codesandbox.io/s/gifted-wildflower-5v7li?file=/src/App.js:0-209 

gifted-wildflower-5v7li - CodeSandbox

 

3. 사용 팁

1. 어떤 아이콘들이 있는지 확인해보기 - 공식 사이트에서 검색하면 됩니다 https://react-icons.github.io/react-icons/
2. 아이콘을 선택하고 import 할 때 쉽게 하는 방법 
   icon의 이름 앞의 2글자가 import시 사용되는 폴더 이름입니다
   위의 예시인 FaBeer  예로 들면 Fa + Bear로 Fa가 폴더 이름입니다. import 시에 react-icons/fa로 쉽게 import 할 수 있습니다.