현재 가장 영향력 있는 무료 아이콘 제공처는 Fortawesome일 것입니다. Fortawesome은 초창기 유행하던 Font의 딩벳 형태로 아이콘을 제공하며 많은 개발자들의 사랑을 받았었습니다.
하지만 아이콘을 폰트형태로 만들어서 사용하는 방식에는 한가지 큰 문제가 있었습니다. 아이콘을 하나만 사용하던지, 100개를 사용하던지, 폰트에 포함되어 있는 아이콘을 일단 한번은 모두 다운로드 받아야 한다는 점입니다. 이럴 경우 몇개의 아이콘만 사용하면 되는데 너무 큰 트래픽의 손해를 봐야한다는 점입니다. 트래픽은 바로 비용과 연결이 되기 때문에 규모가 큰 웹사이트는 잘 사용하지 않게 됩니다. 그래서 현재 아이콘을 사용하는 방법의 유행이 fonts방식에서 SVG방식으로 넘어가고 있는 추세입니다.
스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다. - 위키백과 -
FontAwesome도 Version 5에서 이 SVG방식을 지원하기 시작했습니다. 그리고 React, npm, yarn, Vue 등.. 많은 프론트앤드 프레임워크에서 사용할 수 있도록 지원하고 있습니다.
Vue.js에서 Font Awesome을 슬기롭게 사용하는 방법
여러가지 프론트앤드 프레임워크에서 지원 하나, 여기서는 Vue.js에서 사용하는 방법을 설명하려고 합니다. 지금 설명하는 방식은 SVG를 활용하여 원하는 아이콘만 골라서 사용하는 방식입니다. 나중에 빌드를 하게되면 사용한 아이콘만 빌드가 되기 때문에 트랙픽면에서 슬기로운 방식이라고 할 수 있습니다. 또한 영어에 부담이 없다면 아래 원문을 보셔도 좋습니다.
https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs
Vue 프로젝트에 Font Awesome 패키지 설치하기
먼저 개발하려고 하는 Vue 프로젝트에 Font Awesome 패키지를 설치해야 합니다.
패키지매니저로 NPM을 사용한다면 아래와 같이..
$ npm i --save-dev @fortawesome/fontawesome-svg-core $ npm i --save-dev @fortawesome/free-solid-svg-icons $ npm i --save-dev @fortawesome/vue-fontawesomeYarn을 사용한다면 아래와 같이 입력합니다.
$ yarn add -D @fortawesome/fontawesome-svg-core $ yarn add -D @fortawesome/free-solid-svg-icons $ yarn add -D @fortawesome/vue-fontawesome기본적으로 fontawesome-svg-core와 vue-fontawesome는 반드시 설치를 해야 합니다.
fontawesome-svg-core는 Fontawesome의 SVG파일을 던져주는 역활을 하고 vue-fontawesome는 던져준 SVG파일을 Vue에서 사용할 수 있게 해주는 역활을 합니다.
free-solid-svg-icons는 아이콘의 모음이라고 보시면 됩니다. 만약 브랜드 로고 아이콘을 사용해야 한다면 free-brands-svg-icons도 설치해야 하는 식입니다.
아래는 무료로 사용할 수 있는 아이콘 파일 모음 입니다.
@fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons아래는 유료로 사용할 수 있는 아이콘 파일 모음 입니다.
@fortawesome/pro-solid-svg-icons @fortawesome/pro-regular-svg-icons @fortawesome/pro-light-svg-icons @fortawesome/pro-duotone-svg-icons아무래도 유료인 PRO버전이 더 이쁘고 미려한 아이콘이 훠~ㄹ~ 씬 많습니다.
프로젝트에서 사용할 fontAwesome 파일 만들기
설치를 했다면 이제 프로젝트에서 불러와야 합니다. 원문에서 사용하는 방식과는 조금 다르지만 저는 fontAwesomeIcon을 별도의 파일로 분리해서 필요할 때 마다 아이콘을 추가해서 사용하는 방법을 선호 합니다.
먼저 루트폴더에 fontAwesomeIcon.js를 생성하고 아래 코드를 작성 합니다.
fontAwesomeIcon.js
import Vue from "vue"; // 설치했던 fontawesome-svg-core와 vue-fontawesome import { library } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; // 설치했던 아이콘파일에서 해당 아이콘만 불러옵니다. import { faLink, faRedo, faUndo } from "@fortawesome/free-solid-svg-icons"; import { faTrashAlt } from "@fortawesome/free-regular-svg-icons"; // 불러온 아이콘을 라이브러리에 담습니다. library.add(faTrashAlt); library.add(faLink, faRedo, faUndo); // fontawesome아이콘을 Vue탬플릿에 사용할 수 있게 등록해 줍니다. Vue.component("font-awesome-icon", FontAwesomeIcon);프로젝트의 전역으로 등록하기
작성된 fontAwesomeIcon.js는 main.js에서 import해 주면 전역에서 사용할 수 있습니다.
main.js
import Vue from "vue"; import App from "./App.vue"; import router from "./routes"; import store from "./store"; import "@/fontAwesomeIcon.js"; // fontAwesomeIcon.js 불러옴 new Vue({ el: "#APP", router, store, render: (h) => h(App), });컴포넌트 파일에서 사용하기
이제 모든 Vue파일과 컴포넌트 파일에서 아래와 같이 사용할 수 있습니다.
src/App.vue
<template> <div id="app"> <font-awesome-icon icon="trash-alt" /> </div> </template> <script> export default { name: 'App' } </script><font-awesome-icon icon="아이콘명" /> 아까 등록한 컴포넌트 태그로 아이콘명을 입력할 수 있습니다.
아이콘이 필요할 때 등록하고 사용하는 방법
이제 세팅은 완료되었으니 개발 중 아이콘이 필요할 때 아이콘을 등록하고 사용하는 방법을 말씀드리겠습니다. 먼저 fontAwesome웹사이트에서 사용하고자 하는 아이콘을 찾아봅니다.
- Icon 메뉴를 선택합니다.
- Free(무료)를 선택합니다.
- 원하는 아이콘을 찾아서 아래의 파일명을 확인합니다. 이 파일명을 아이콘명에 작성하면 됩니다.
<font-awesome-icon icon="address-card" />
이런다고 나오지는 않습니다. 아래처럼 몇가지 작업을 더 해줘야 합니다.
아이콘을 클릭하여 상세보기 화면으로 들어가서 Class에 작성되어 있는 코드를 확인해야 합니다.
fas fa-address-card 이코드로 이게 fas 아이콘 파일모음에 속한 fa-address-card 라는것을 확인합니다. 이제 이 아이콘을 라이브러리에 등록해야 합니다.
위에서 작성한 fontAwesomeIcon.js를 열어서 방금 그 아이콘을 추가 합니다.
fontAwesomeIcon.js
import Vue from "vue"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { library } from "@fortawesome/fontawesome-svg-core"; import { faAddressCard, faCog, faFileCode, faLink, faRedo, faUndo } from "@fortawesome/free-solid-svg-icons"; import { faTrashAlt } from "@fortawesome/free-regular-svg-icons"; library.add(faAddressCard, faCog, faFileCode, faLink, faRedo, faUndo); library.add(faTrashAlt); Vue.component("font-awesome-icon", FontAwesomeIcon);fas는 FontAwesomeSolid 라는 의미이므로 @fortawesome/free-solid-svg-icons에 추가를 해야 합니다. 아래와 같이 카멜표기법으로 불러오면 됩니다.
import { faAddressCard } from "@fortawesome/free-solid-svg-icons";
그리고 library.add(faAddressCard);에 등록을 하면 됩니다.
이제 정상적으로 아이콘이 표시가 됩니다. 이렇게 아이콘을 등록하고 Build를 하게 되면 등록된 아이콘들만 Build파일에 포함되기 떄문에 Product에 사용가능합니다.
