React_React Icons

React에서 Font Awsome과 같은 Icon을 간편하게 사용하는 방법.

React-icons 라이브러리 설치하기.

npm install react-icons --save
yarn add react-icons

터미널에서 해당 라이브러리를 설치 후

https://react-icons.github.io/react-icons 사이트에서 사용하고자 하는 항목의 맨 위에 있는 사용방법을 참고하자.

컴포넌트를 import 하여 사용 하는 것과 같은 방법으로 icon을 쉽게 사용 할 수 있다.

import { FaHeart } from "react-icons/fa";

function Icons(){
	return(
	  <div>
	  <FaHeart className="Hearticon /> Heart
	  </div>
	)
}

간단한 예시를 만들어보았다.

위와 같이 <FaHeart /> 만 넣어줘도 바로 사용 가능하다.

나는 스타일을 적용 시키기 위해 className을 넣어주었고,

color="red" 속성이 먹지 않아 헤메이다가...

SVG ICON 같은 경우 fill을 사용하면 된다는 글을 보고 바로 성공했다 ><

.hearticon{
      fill: white;
     }

간혹 color 속성이 먹지 않는 icon이 있다고 하니, 사용해보자!