Vue 字体真棒图标

Vue 字体真棒图标是由 FortAwesome 开发的一套免费的图标集。使用这个图标集，我们可以很方便地在 Vue 应用中添加各种图标，这些图标可以是任何尺寸和颜色，并且可以轻松调整。

如何安装

安装 Vue字体真棒图标非常简单，只需要执行以下命令：

npm install --save @fortawesome/vue-fontawesome

如何使用

你可以很容易地在 Vue 组件中使用 @fortawesome/vue-fontawesome。

<template>
  <div>
    <font-awesome-icon icon="spinner" :spin="true" />
    <!--或-->
    <fa :icon="['fas', 'spinner']" :spin="true" />
  </div>
</template>

<script>
import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'

library.add(faSpinner)

export default {
  components: {
    Fa
  }
}
</script>

这里我们展示了两种引入方式，一种是仅引用 FontAwesomeIcon 组件，而另一种是引用 Fa alias。

如果您选择第二种方式，那么必须在 Vue 实例之前添加图标。

import Vue from 'vue'
import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faSpinner } from '@fortawesome/free-solid-svg-icons'

library.add(faSpinner)

Vue.component('fa', Fa)

更多用法

您可以在官网上找到更多有关如何使用 Vue 字体真棒图标的用例。