Posis

[Vue.js] fontawesome 사용하기(Differences by Version) 본문

Vue.js/Issue

[Vue.js] fontawesome 사용하기(Differences by Version)

CooNiHong 2021. 9. 6. 17:11

Fontawesome이란 많은 개발자들이 웹 개발을 할 때 사용하는 무료 폰트 아이콘을 제공해주는 사이트입니다. 무료 폰트 사이트이지만 유료버전을 결제해서 더 많은 아이콘들도 이용할 수 있는 유용한 사이트입니다. 이 fontawesome을 HTML, CSS, JS로 웹 개발할 때는 HTML head 태그 안에 link로 불러와서 i 태그를 이용해 매우 간단하게 사용할 수 있다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Fontawesome</title>
  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
  />
</head>
<body>
  <i class="fa fa-camera"></i>
</body>
</html>

이처럼 매우 간단하게 사용할 수 있다. 하지만 Vue.js에서 fontawesome을 사용하기 위해서는 npm을 이용해서 필요한 라이브러리들을 설치해 주어야 합니다.

Vue.js 프로젝트에서 Fontawesome 사용하기

아마 이 글을 읽는다면 Vue.js는 이미 사용하고 있는 상황일 거라 생각하고 진행하겠습니다.

NPM(노드 패키지 매니저/Node Package Manager)로 아래 라이브러리를 설치해줍니다.

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

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

따로 설치한다면 위에 두 줄처럼, 한 번에 설치하고 싶다면 아래 한 줄처럼 작성하시면 됩니다. 차이는 없습니다.

yarn을 사용하신다면 npm i를 yarn add로 바꾸신 후 설치하시면 됩니다.

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons

$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

yarn도 동일합니다.

중요!

설치가 끝난 후에 이 라이브러리를 설치하지 않는다면 계속 오류가 뜰 것입니다. 저도 이 것을 설치하지 않아서 일주일은 개고생 했던 거 같습니다.

Using Vue 2.x

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

Using Vue 3.x

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

많은 글을 찾아보면서 따라 했지만 매번 오류가 나서 실패했는데 우연히 공식 Github 페이지를 들어가서 이 라이브러리를 추가 설치해서 사용하니 바로 오류 없이 사용할 수 있었습니다. 제가 영어를 잘하지 못하는 탓에 공식문서를 자주 보지 않았는데 역시 많은 개발자들이 공식문서! 공식문서를 괜히 외치는 이유가 있다는 것을 깨달았습니다.

Vue.js에서 fontawesome 설정하기

이제 라이브러리를 설치했다면 fontawesome을 사용하기 위해서 몇 가지 설정을 해주어야 합니다.

이는 공식 Github 페이지를 토대로 작성하였습니다.

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(fas);

createApp(App)
  .component('fa', FontAwesomeIcon)
  .mount('#app');

fontawesome에는 많은 스타일들이 존재합니다. 그중 fas는 solid 스타일을 가져와 쓸 수 있게 만드는 겁니다.

fas를 불러온 후 library에 담아줍니다. library.add(fas);

다음으로 전역으로 사용할 component를 설정해 줍니다. .component('fa', FontAwesomeIcon) 여기서 fa는 사용할 component 명이므로 원하 시름 이름으로 변경 후에 작성해도 무관합니다.

// src/App.vue
<template>
  <div id="app">
    <fa icon="user-secret" />
    <fa :icon="['fas', 'user-secret']" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

대표적으로 사용하는 component 사용방법입니다. 첫번째는 아이콘명을 바로 작성해주는 것이고 두 번째는 데이터 바인딩을 이용해 fas(solid style)과 user-secret(아이콘 명)을 명시해주는 것입니다.

다른 스타일의 아이콘 사용하기

fontawesome에는 5가지의 스타일이 존재합니다. 그중 무료는 3가지(solid, regular, brands) 유료는 무료를 포함한 4가지(solid, regular, light, duotone) 입니다.

무료버전 라이브러리

$ npm i @fortawesome/free-solid-svg-icons
$ npm i @fortawesome/free-regular-svg-icons
$ npm i @fortawesome/free-brands-svg-icons

유료버전 라이브러리

$ npm i @fortawesome/pro-solid-svg-icons
$ npm i @fortawesome/pro-regular-svg-icons
$ npm i @fortawesome/pro-light-svg-icons
$ npm i @fortawesome/pro-duotone-svg-icons

 

원하는 아이콘만 불러와서 사용하기

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

import { library } from '@fortawesome/fontawesome-svg-core';
import { faUndo } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(faUndo);

createApp(App)
  .component('fa', FontAwesomeIcon)
  .mount('#app');
// src/App.vue
<template>
  <div id="app">
    <fa :icon="['fas', 'undo']" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

solid 스타일에서 fas로 불러온다면 모든 아이콘을 불러오지만 내가 사용할 아이콘이 한두개라면 굳이 모든 데이터를 불러올 필요는 없습니다. 그러므로 fas가 아닌 faUndo를 불러와 library에 추가하고 component에서 solid 스타일의 아이콘이므로 <fa :icon="['fas', 'undo']" /> fas를 명시해주고 아이콘 이름 undo와 같이 사용하면 됩니다.

728x90