이슈 5 react 아이콘 사용법 react-icons

검색창 옆에 붙어있는 돋보기, 패스워드 입력창 옆의 눈 모양 아이콘, 복사-붙여넣기 시 표시되는 클립보드 아이콘 등 웹 상에서 이모지를 통한 의미 전달 사례는 이미 대세가 되었습니다. 오늘은 react 환경에서 이 아이콘들을 활용할 수 있는 방법에 대해 알아보겠습니다.

준비물:

• react 프로젝트
• react-icons

먼저 yarn/npm 등을 사용하여 react-icons를 프로젝트에 추가하여 줍니다.

npm install react-icons

yarn add react-icons

이상없이 패키지 추가가 되었다면 다음으로 https://react-icons.netlify.com/#/에 접속합니다.

해당 웹사이트에 들어가면 아래와 같은 화면이 보일텐데요. Import 부분을 참고하셔서 원하는 테마의 원하는 아이콘을 추가하시면 됩니다. 왼쪽 네비게이션에 보이는 Font Awesome, Ionicons, Material Design icons 등은 테마로 생각하시면 되고, 각 테마 별로 제공하는 아이콘과 아이콘 이름이 다르므로 잘 확인하시기 바랍니다.

예를 들어 Weather Icons의 구름 낀 날씨 아이콘을 사용하고 싶다면, 다음과 같이 사용해주시면 됩니다.

import { WiCloud } from 'react-icons/wi';

class Something extends Component {
  render() {
    return(<WiCloud />);
  }
}

대체로 Font Awesome의 경우 react-icons/fa, Github Octicons icons의 경우 react-icons/go처럼 머릿 글자를 namespace로 사용하고 있지만, Ant Design Icons는 react-icons/ai로 예외도 있네요^^;;

출처:
react icons: https://react-icons.netlify.com/#/icons/ai

react-icons