有条件的 Fontawesome 图标 Vue

简介

Fontawesome 是一个著名的图标库，Vue 作为非常受欢迎的前端框架，自然也提供了 fontawesome-icon 组件，可以方便的使用各种图标。但是，有些时候我们需要只在满足一定条件时显示图标，因此我们需要有一个有条件的 Fontawesome 图标 Vue 组件来满足我们的需求。

安装

我们可以通过 npm 或 yarn 安装 vue-fontawesome：

npm install vue-fontawesome
# 或
yarn add vue-fontawesome

使用

在你的 Vue 组件中，你需要引用 vue-fontawesome：

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'

export default {
  components: {
    FontAwesomeIcon
  },
  data () {
    return {
      showIcon: true
    }
  },
  computed: {
    getIcon () {
      return this.showIcon ? faUser : null
    }
  }
}

在模板中，你可以通过以下代码来使用：

<font-awesome-icon :icon="getIcon" />

解析

我们首先从 @fortawesome/vue-fontawesome 中引入 FontAwesomeIcon 组件，这个组件就是我们要使用的 Fontawesome 图标组件。接着，我们通过 @fortawesome/free-solid-svg-icons 中的 faUser 引入了一个实心的用户图标，用 getIcon 计算属性判断是否需要显示图标。在模板中，我们给 FontAwesomeIcon 组件绑定 :icon 属性，传递 getIcon 作为参数即可。

总结

有条件的 Fontawesome 图标 Vue 组件，让我们能够非常灵活地控制图标的显示，更好的满足用户的需求。