[React] 리액트에서 아이콘 사용하기

 

목차

• React Icons
  • 1. 설치하기
  • 2. 사용하기
    • 1. 사용 예시
    • 2. 사용 예시 (스타일링)

 

React Icons

1. 설치하기

설치할 폴더로 이동 후 아래 명령어를 통해 설치한다.

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

2. 사용하기

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

React Icons

위 링크에서 아래 이미지와 같이 검색하거나 카테고리를 통해 원하는 아이콘을 찾을 수 있다.

1. 사용 예시

1-1. 사용할 아이콘을 찾아 아래와 같이 import를 해준다.

// import { "아이콘명" } from "react-icons/아이콘명 앞 두 글자";
import { BiSolidPhoneCall } from "react-icons/bi";

1-2. 원하는 위치에 아이콘 넣어준다.

<BiSolidPhoneCall />

적용된 아이콘

2. 사용 예시 (스타일링)

2-1. 인라인 (inline) 스타일링

import { BiSolidPhoneCall } from "react-icons/bi";

export const ProductListPage = () => {
  return (
    <>
      아이콘
      <BiSolidPhoneCall
        style={{ color: "green", width: "48px", height: "48px" }}
      />
      ;
    </>
  );
};

2-2. styled-components로 스타일링

import styled from "styled-components";
import { BiSolidPhoneCall } from "react-icons/bi";

export const IconTest = () => {
  return (
    <>
      아이콘 <StyledPhone />
    </>
  );
};
const StyledPhone = styled(BiSolidPhoneCall)`
  color: yellow;
  width: 48px;
  height: 48px;
`;