2023-01-16
Vue3 使用 Vite 整合 axios 攔截器與 axios proxy
Vue
2021.07.19
如果想在 Vue 使用 Font Awesome,可以參考官方的 Github 文件
1. 在 main.js
匯入 Font Awesome
import Vue from 'vue' import App from './App' import { library } from '@fortawesome/fontawesome-svg-core' import { faUserSecret } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faUserSecret) Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' })
2. 在 vue 裡使用 icon
<template> <div id="app"> <font-awesome-icon icon="user-secret" /> </div> </template> <script> export default { name: 'App' } </script>
但是官方給的範例是「你要用哪一個 icon,就匯入哪一個 icon」,所以我們只能使用 user-secret
這個 icon,假設要使用兩個以上的 icon,就必須一直匯入,非常的麻煩。
如果你希望在 Vue 裡可以一次匯入所有 icon,不需要個別匯入的話,可以改用以下寫法:
import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(fas) Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' })
如此一來,不需要個別匯入就可以使用所有的 Font Awesome icon 囉!
fas
是所有的 solid icon
更多種類請參考:
fas
:Solidfar
:Regularfal
:Lightfab
:Brands