[fontawesome] vue.js에서 free-brands-svg-icons 쓰기

vue 프로젝트에서 font-awesome을 쓰기.

 

$ yarn add -D @fortawesome/fontawesome-svg-core 
$ yarn add -D @fortawesome/free-solid-svg-icons (optional)
$ yarn add -D @fortawesome/free-brands-svg-icons (optional)
$ yarn add -D @fortawesome/vue-fontawesome

optional이 아닌 첫 번째, 네 번째는 필수로 다운받아준다. 나는 소셜 로그인을 위한 버튼을 만들 때 들어갈 github, google icon을 쓰기 위해 세 번째 free-brands-svg-icons를 먼저 받아주었다. 받고자 하는 아이콘이 어떤 카테고리에 있는지는, solid, regular, light... brands 등의 구분으로 알 수 있다.

 

가령, 아래 아이콘의 경우 fab로, brands에 속한다는 것을 알 수 있다.

 

다운을 받은 뒤에는, 아이콘 사용을 좀 더 쉽게 하기 위해 프로젝트의 루트 폴더에 fontAwesomeIcon.js라는 파일을 만들어준다.

import Vue from "vue";

// 필수로 다운 받고 & import 해주어야 한다.
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";

// 필요한 아이콘만 그때 그때 import 해준다.
import { faGithub, faGoogle } from "@fortawesome/free-brands-svg-icons";
import { faSignInAlt, faSignOutAlt } from "@fortawesome/free-solid-svg-icons";

// library에 추가해준다.
library.add(faGithub, faGoogle);
library.add(faSignInAlt, faSignOutAlt);

Vue.component("font-awesome-icon", FontAwesomeIcon);

 

전역 사용이 가능하게 하도록, main.js에 import 시켜준다.

// main.js

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// fontAwesomeIcon을 import 시켜준다.
import "@/fontAwesomeIcon.js";

Vue.config.productionTip = false;

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

이제 실제 컴포넌트에서 사용할 때, free-solid-svg-icon의 경우에는 아래처럼 써주면 된다.

 

<router-link to="/login"><font-awesome-icon icon="sign-in-alt" />Login</router-link>

 

free-brands-svg-icon의 경우에는 같은 방법으로 시도하니 적용이 안 되어 검색하다가, 이곳의 글 덕분에 해결할 수 있었다.

 

// ex) login.vue

<el-button type="primary" plain @click="socialLogin('google')">
	<font-awesome-icon :icon="['fab', 'google']" /> Login With Google
</el-button>

 

사실 공식 문서에서 아래처럼 언급이 되어 있긴 했다. solid style도 : bind 이용해 적을 수 있다! 하지만, brand icons는 첫 번째 방법으로는 할 수 없어서 적용이 안 되었던 것. solid style만 short-hand 방식으로, prefix를 생략해도 fas 카테고리로 여겨진다.

 

<!-- The solid style is implicit -->
<font-awesome-icon icon="user-secret" />

<!-- It's better to be explicit -->
<!-- Don't forget to bind the property with ":" (we forget all the time!) -->
<font-awesome-icon :icon="['fas', 'user-secret']" />

 

 

적용 예 1

적용 예 2

+ font-awesome-icon의 경우 size="2x" 처럼 사이즈 옵션을 별도로 갖는다.

+ 위는 무료 버전 아이콘 사용 예.

 

참고

uxgjs.tistory.com/205

www.npmjs.com/package/@fortawesome/vue-fontawesome