반응형
react-icons를 이용하면 css 없이 아이콘을 이용할 수 있다.
사용방법
Installation (for standard modern project)
npm install react-icons --save
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 해주고 넣기만 하면 끝이다.
반응형
'프론트엔드 정복기 > 리액트' 카테고리의 다른 글
[React]21 서버만들기(node.js/express프레임워크/node + mysql) (0) | 2023.01.19 |
---|---|
[React] 20 리액트 라우터 라이브러리 (react-router v6) (0) | 2023.01.19 |
[React]18 (axios) (0) | 2023.01.18 |
[React]17 상태관리2(useReducer) (0) | 2023.01.17 |
[React]16 성능최적화2 (useCallback) (0) | 2023.01.16 |