react-icons 를 활용하여 페이지에 아이콘 주입하기!

react-icons

웹 페이지를 꾸미다 보면 시각적인 효과를 위해 아이콘을 주입하고 싶을 때가 있다. 그냥 구글에 돌아다니는 사진을 가져다가 써도 될 수도 있지만 그런 아이콘들은 png파일이라면 배경색이 남아있기 때문에 뒤의 배경이 남은 모양으로 주입되어 아이콘을 넣지 않은 거보다 못생겨진다.

그래서 svg파일로 된 아이콘을 찾아야 하는데 내 마음에 드는 아이콘이 svg 파일로 된 것을 찾기가 쉽지않다. react에서는 이런 개발자들을 위해서 react-icons를 제공하고 있다.

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

위 페이지는 공식 문서 링크이고, 해당 페이지에서 원하는 아이콘을 찾아서 사용하면 된다.

react-icons의 사용

이 라이브러리를 사용하기 위해서는 일단 프로젝트 폴더에 설치를 해야한다.

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

설치를 하고 난 후에는 원하는 아이콘을 찾은 후 코드를 작성하면 된다.

import { FaReact } from 'react-icons/fa'

...

<FaReact />

이런 식으로 작성하면 된다. 아이콘을 찾은 후에 이게 react-icons의 어느 폴더에 위치하는지를 알아야 하는데 아마 아이콘 이름의 앞 두 글자가 해당 폴더를 알려주는 것 같다.

사용이 매우 간편하다! 다운받아 올 필요도 없고, 코드 단 두 줄!이면 사용이 가능하다. 사실 import문 빼면 한 줄로 봐도 무방하다 ㅎㅎ

react-icons style 입히기

이 아이콘들은 svg 파일이니 style을 입히고 싶을 때 참고하면 좋을 거 같다!

import styled from '@emotion/styled'

export const IconStyle = styled.div`
	svg {
   	font-size: 3.0rem;
       color: blue;
   };
`;

위와 같은 방법으로 색깔, 크기 등도 설정이 가능하니 다양하게 활용이 가능할 것 같다.