공부 | Line Awesome 정리

Line Awesome의 아이콘 사용법 정리

 

❓상황

패스트캠퍼스 강의 수강 중, 이미지 슬라이드에 사용할 아이콘을 구현하기 위해 정리함

 

이전에 react-icons 사이트의 아이콘을 사용했는데, 다른 사이트의 아이콘 사용하는 경험도 쌓기 위함.

 

📖 Line Awesome 이란?

React 프로젝트에 주로 사용되는 아이콘들을 포함하고 있음.

 

Font Awesome의 모던한 아이콘을 제공한다고 적혀있다(자회사인듯?)

 

🐸 설치

// npm
npm install line-awesome

// yarn
yarn add line-awesome

 

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

 

🧮 실습

원하는 아이콘 확인하기

이미지 슬라이드에 사용할 화살표를 사용하고자 한다.

 

 

검색하기

내가 사용할 아이콘은 '화살표' 아이콘인걸 알았으니, Line Awesome 홈페이지 검색창을 이용해 검색한다.

영어로 arrow라고 입력하여, 내가 원하는 아이콘을 확인한다.

 

css 파일에 import하기

 

 

사용하기

내가 사용하고 싶은 아이콘을 클릭하면, 어떻게 사용하라고 설명이 되어있다.

 

vscode에 코드를 작성한다.

 

정상 출력 확인하기

잘나옴