[ React ] 아.추하기 (아이콘 추가하기라는 뜻)

환경 : Visual Studio Code

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

 

 

 

    - 아이콘 사용을 원하는 프로젝트에 아래 의존성을 추가

npm install react-icons

 

    - 적용 결과

 

---

 아이콘을 사용하기 위해 import 구문을 사용해야한다. 

따라서 간단히 import 구문에 대해 이해해보자!

 

import { a, b } from "c"

•  c에서 a랑 b라는 항목만 불러오겠다
•  c에는 a랑 b 말고 다른 것도 잇음
•  naming import
• [예시]
  import {useState, useCallback, useEffect} from "react";
     - useState()
     - useCallback()
     - useEffect()

import d from "e"

•  e의 모든 걸 불러와서 d라고 부르겠다
•  default import
• [예시]
  import React from "react";
     - React.useState()
     - React.useCallback()
     - React.useEffect()

 

---

     - 아이콘 적용하기

 

원하는 아이콘 클릭

 

 사이트에서 주는 import와 태그를 삽입한다

import { HiArchiveBoxXMark } from "react-icons/hi2";

<HiArchiveBoxXMark />

 

 

코드만 넣으면 아이콘이 보이는 화면을 확인할 수 있다

최종결과

 

 

 

개인 공부 기록용입니다:)