반응형

react-icons를 이용하면 css 없이 아이콘을 이용할 수 있다.

 

사용방법

Installation (for standard modern project)

npm install react-icons --save

 

 

React Icons

React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa

react-icons.github.io

react-icons를 프로젝트에 설치했으면 이제 사이트에 들어가서 필요한 아이콘을 찾고 

해당페이지의 부분을 import 해주고 아이콘을 넣어서 사용하면 된다.

 

사이트에 들어가서 ionicons5에 들어가면 IoLogoReact 아이콘이 있다

위에 import 부분을 복사해서 붙여 넣어주고 iconName에 사용할 아이콘이름을 넣어주고 

아이콘을 컴포넌트형식으로  넣어주면 된다. (아이콘을 클릭하면 아이콘이름이 복사됨)

 

App.js

import "./styles.css";
import { IoLogoReact } from "react-icons/io5";
export default function App() {
  return (
    <div className="App">
      <IoLogoReact></IoLogoReact>
    </div>
  );
}

 

 

이번내용은 별로 어려운 것도 없고 설명할 것도 없어서 짧게 끝내겠다 react icon만 설치해 주고 필요한 아이콘을 사이트에서 찾아서 import 해주고 넣기만 하면 끝이다. 

 

반응형

+ Recent posts