[리액트] Font Awesome 라이브러리 사용하기

Font Awesome 라이브러리 사용

npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core

해당 코드를 npm 에 입력해주기

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";

리액트에서 사용할 아이콘을 import 해서 사용

---

주의할 점

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";

function Pages() {
  return (
    <div class="pages">
      <a href="#">
        <i class="fas fa-angle-left"></i>{" "}
      </a>
      <ol>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
      </ol>
      <a href="#">
        {" "}
        <i class="fas fa-angle-right"></i>
      </a>
    </div>
  );
}

이렇게 마냥 코드만 옮겨주면 안된다.

• React에서 FontAwesomeIcon을 사용했지만 여전히 <i> 태그를 사용하고 있음.
  • 리액트에서 FontAwesomeIcon을 사용하려면 <i> 태그 대신 FontAwesomeIcon 컴포넌트를 사용해야 함
• 클래스 속성에 class가 아닌 className을 사용해야 함.
  • 리액트에서는 HTML의 class 속성이 className으로 바꾸기

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";

function Pages() {
  return (
    <div className="pages">
      {" "}
      {/* class -> className */}
      <a href="#">
        <FontAwesomeIcon icon={faAngleLeft} />
      </a>{" "}
      {/* <i> 태그 대신 FontAwesomeIcon 사용 */}
      <ol>
        <li>
          <a href="#">1</a>
        </li>
        <li>
          <a href="#">2</a>
        </li>
        <li>
          <a href="#">3</a>
        </li>
      </ol>
      <a href="#">
        <FontAwesomeIcon icon={faAngleRight} />
      </a>{" "}
      {/* <i> 태그 대신 FontAwesomeIcon 사용 */}
    </div>
  );
}

export default Pages;

이렇게 수정해줌.