React

[React] 리액트에서 아이콘(icon) 사용하기

s._.young01 2023. 1. 16. 10:59
728x90
반응형

1. 먼저 아래 url주소를 클릭하여 들어간다.

https://react-icons.github.io/react-icons

 

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

 

2. 쓰고싶은 파일에 터미널을 열러 아래 패키지 코드를 복사해서 붙여준다.

 

3. 적용하기 :  쓰고 싶은 아이콘 레퍼런스에 들어가 맨 위에 나오는 코드를 복사하여 붙여준다.

그리고 컴포넌트의 리턴문 안에 사용할 아이콘 컴포넌트를 만들어주면 끝 !

 

예시 >

// 나는 Material Design icons의 레퍼런스에서 아이콘을 가져왔다.
import {MdCheckCircle} from 'react-icons/md';

const MyIcons = () => {
	return (
    	<div>
       		// 쓰고 싶은 아이콘명이랑 같은 이름으로 적어야 함!!
        	<MdCheckCircle></MdCheckCircle>
        </div>
    )
}

 

728x90