Vue

2021.07.19

在 Vue 框架下使用所有的 Font Awesome icon


使用 Font Awesome

如果想在 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,就必須一直匯入,非常的麻煩。

使用 Font Awesome 所有 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 囉!

Line 2: fas 是所有的 solid icon

更多種類請參考:

  • fas:Solid
  • far:Regular
  • fal:Light
  • fab:Brands

歡迎給我點鼓勵,讓我知道你來過 :)

guest

0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.