[React] 리액트 아이콘 사용하여 아이콘 적용하기

리액트로 개발을 진행하다 보면 간단한 아이콘을 사용해서 웹 구성요소를 만들어 주고 싶을때가 있습니다. 이때 react-icons 라이브러리를 이용해서 간편하게 상용되는 아이콘들을 사용할 수 있습니다. 

먼저 프로젝트에 react-icons 라이브러리를 설치해야 합니다. 아래 명령어를 사용하여 npm 또는 yarn을 통해 설치할 수 있습니다.

 

npm install react-icons --save // npm 사용하는 경우
yarn add react-icons// yarn 사용하는 경우

설치가 완료되면, 원하는 아이콘을 컴포넌트에 추가할 수 있습니다. 예를 들어, AiFillHeart 아이콘을 사용하는 방법은 다음과 같습니다.

 

1.필요한 아이콘을 가져옵니다.

 

아이콘은 아래 링크에서 확인할 수 있습니다. 

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

React Icons

AiFilHeart 라는 아이콘을 사용하고 싶을 경우

이와 같이 필요한 import 코드와 호출시 필요한 코드 를 확인할하고 다음과 같이 사용할 수 있습니다.

import { AiFillHeart } from 'react-icons/ai';

 

2. JSX 내에서 아이콘을 사용합니다.

 

import React from 'react';
import { AiFillHeart } from 'react-icons/ai';

const MyComponent = () => {
    return (
        <div>
            <h1>리액트 아이콘 사용 예제</h1>
            <AiFillHeart size={50} color="red" />
        </div>
    );
};

export default MyComponent;

 

위 예제에서는 AiFillHeart 아이콘을 불러와서 크기를 50으로, 색상을 빨간색으로 설정하여 사용하고 있습니다. size와 color는 선택적인 속성이며, 필요에 따라 조절할 수 있습니다.

 

이와 같은 방식으로 react-icons 라이브러리에서 제공하는 다양한 아이콘을 가져와서 원하는 대로 사용할 수 있습니다. 필요한 아이콘을 해당 라이브러리의 문서에서 찾아서 사용하시면 됩니다.