[Vue] Font Awesome 아이콘을 갖다 써보자

 

---

 

안녕하세요 오늘 가져온 주제는 Vue에서

Font Awesome을 사용하여 여러 Icon들을

사용해보는 것입니다. 여러 가지 개발 관련

포스팅 할 거는 많은데.. 꾸준히 해보겠습니다 ㅎㅎ

 

 

 

 

Font Awesome?

---

웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다. 웹 사이트에서 벡터 아이콘과 소셜 로고를 얻을 수 있습니다. 아직까지도 Font Awesome4가 많이 사용되고 있지만 최신 Font Awesome 5가 출시되었습니다.

Font Awesome은 다양한 언어, 프레임워크에서 사용할 수 있습니다.

 

 

 

설치하기

---

 

핵심 패키지 및 아이콘 콘텐츠를 설치

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons

 

Vue 2.x

$ npm i --save @fortawesome/vue-fontawesome@latest

 

 

사용하기

---

 

Vue에서 바로 이렇게 쓰고 싶지만 몇 가지 세팅을 해줘야 합니다.

<i class="fas fa-camera"></i>

 

main.js로 가볼까요

vue-cli로 구성된 프로젝트에 적용하길 추천합니다.

 

✨src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import { store, key } from "./store";
import "./resisterServiceWorker";
import router from "./router";

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faTimesCircle,
  faCheckCircle,
  faPenSquare,
  faPlusCircle,
  faTrash,
  faFolderOpen,
} from "@fortawesome/free-solid-svg-icons";

library.add(
  faTimesCircle,
  faCheckCircle,
  faPenSquare,
  faPlusCircle,
  faTrash,
  faFolderOpen
);

createApp(App)
  .use(store, key)
  .use(router)
  .component("font-awesome-icon", FontAwesomeIcon)
  .mount("#app");

 

제가 만들고 있는 웹 프로젝트에 fontawesome을 세팅했습니다.

먼저 FontAwesomeIcon과 library를 import 시켜줍니다.

import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";

 

 

다음 내가 사용하고자하는 아이콘을 아래 사이트에서 검색하여 import 시켜줍니다.

• https://fontawesome.com/v5.15/icons?d=gallery&p=2

Font Awesome 5부터 유료와 무료 버전이 나뉘었는데 저는 무료 버전을 사용하였습니다.

 

 

제가 사용한 faTimesCircle를 예로 들면

사이트에 들어간 후 원하는 아이콘을 검색한 뒤에 클릭해서 상세 페이지로 들어갑니다. 정확한 이름을 몰라도 여러 검색 옵션을 통해 내가 원하는 아이콘을 찾을 수 있습니다. times-circle 아이콘을 사용시 앞에 fa를 붙인 카멜케이스로 이름을 바꾸어 import 시켜주면 됩니다.

import {
  faTimesCircle,
} from "@fortawesome/free-solid-svg-icons";

 

그리고 똑같이 아래에 library에 import시킨 아이콘을 등록시켜줍니다.

import { library } from "@fortawesome/fontawesome-svg-core";

 

자 이제 다 끝났습니다. 참 쉽죠?

사용법은 정말 간단합니다.

원하는 Vue 페이지나 컴포넌트에 다음과 같이 태그를 넣어주면 끝입니다 !

<font-awesome-icon icon="times-cirlce">

 

🔰구현화면

아래는 CodeSandbox로 직접 바로 보실 수 있게 작성하였습니다.