예산 계산기 앱 만들기(아이콘)

React Icon

리액트에서 아이콘을 사용하는 방법은 여러가지가 있지만 주로 react-icons 모듈을 이용해서 아이콘을 구현하게 됍니다.

1. 필요한 패키지 설치

npm install react-icons

2. react icon 사용법
   https://react-icons.github.io/react-icons/

위 링크 들어가면 다양한 아이콘 그룹이 있는데 원하는 그룹을 선택한다.

3. 내가 선택한 그룹의 아이콘파일을 원하는 위치에 Import한다.

import { IconName } from "react-icons/bs";

4. 원하는 아이콘을 불러와서 넣어준다.

import React, { Component } from "react";
import "./ExpenseItem.css";
import { MdDelete, MdEdit } from "react-icons/md";

export class ExpenseItem extends Component {
  render() {
    return (
      <li className="item">
        <div className="info">
          <span className="expense"></span>
          <span className="amount"> 원</span>
        </div>
        <div>
          <button className="edit-btn">
            <MdEdit />
          </button>
          <button className="clear-btn">
            <MdDelete />
          </button>
        </div>
      </li>
    );
  }
}

export default ExpenseItem;

5. 아이콘에 스타일 넣기

.clear-btn {
  color: var(--mainRed);
}
.edit-btn {
  color: var(--mainGreen);
}