<label>
요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높임1. Font Awesome 아이콘 대한 패키지를 설치
npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/fontawesome-svg-core
Solid, Regular, Light, Brands 4개의 카테고리와 유/무료 여부에 따라 여러개의 패키지가 존재하는데 무료로 제공되는 Solid, Brands,Regular 3개의 카테고리에 대한 패키지만 설치
(항상 3개를 다 설치할 필요는 없고 사용하시고 싶은 아이콘이 속한 카테고리만 설치하시면 됩니다.)
2. React 컴포넌트 형태로 사용할 수 있도록 해주는 @fortawesome/react-fontawesome이라는 패키지는 설치
npm i @fortawesome/react-fontawesome
3. font-awesome import 하기
import { faCheckSquare, faSpinner } from "@fortawesome/free-solid-svg-icons";
// 공식사이트안에 solid 아이콘 사용할시 위에 처럼
import { faSquare } from "@fortawesome/free-regular-svg-icons";
// regular 아이콘 사용할시 위에 처럼
4. 사용 예시
import React from "react";
import { faCamera } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
library.add(faCamera)
// 2배 사이즈로 할시 size 속성 이용
<FontAwesomeIcon icon={faCamera} size="2x" />
npm i --save node-sass style-loader css-loader sass-loader
npm install react-router-dom
NODE_PATH=src/
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"*": ["*", "src/*"]
}
}
}
// 위의 입력하고 import 절대경로 사용 가능
import "Style/Main.scss";
오.. 수정본 도움이 되었습니다! 감사합니다 ㅎㅎㅎ