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

 

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

FaReact 아이콘이다.

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

...

<FaReact />

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

 

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

import styled from '@emotion/styled'

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

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