React icons 라이브러리 사용하기

[React/리액트] React icons 라이브러리 사용하기

 

링크를 참고해서 원하는 아이콘을 리액트에 불러와서 사용할 수 있다.

 

설치하기

$ yarn add react-icons

 

사용법

import React from 'react';
import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md';

function CheckBox({ children, checked, ...rest }) {
  return (
    <div>
      <label>
        <input type="checkbox" checked={checked} {...rest} />
        <div>{checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}</div>
      </label>
      <span>{children}</span>
    </div>
  );
}

export default CheckBox;

import 로 불러온 뒤, 컴포넌트 형태로 그대로 사용하면 된다.

 

⭐ input custom 스타일링 하는 방법

.checkbox input {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
}

위와 같이 기존의 input 체크박스는 보이지 않게 한 뒤, 스타일링 한 체크박스를 그려주면 된다.