Vue3+ElementPlus的Icon图标组件不显示？两步解决！

2023-10-03 23:10:15

在 Vue3 项目中使用 ElementPlus Icon 图标组件的完整指南

概述

ElementPlus 是一个功能丰富的 Vue3 UI 库，它提供了广泛的组件，包括 Icon 图标组件。在使用 ElementPlus Icon 图标组件时，有时可能会遇到 SVG 图标不显示的问题。这篇文章将分两步深入探讨解决此问题的简单步骤，并提供有关在项目中使用 SVG 图标的全面指南。

步骤一：安装图标库

ElementPlus 本身不提供任何图标，因此需要选择并安装一个第三方图标库。常用的图标库包括：

FontAwesome
Material Design Icons
Ionicons

要安装图标库，请使用对应的 NPM 命令。例如，要安装 FontAwesome，请输入以下命令：

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons

步骤二：配置图标库

安装图标库后，需要将其配置为与 ElementPlus 一起使用。在 main.js 文件中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'

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

library.add(fas)

createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')

这将图标添加到库中，并注册组件到 Vue 应用程序中。现在，就可以在项目中使用 SVG 图标了。

如何在 Vue 组件中使用 SVG 图标？

可以使用 <font-awesome-icon> 组件在 Vue 组件中使用 SVG 图标。例如：

<template>
  <font-awesome-icon icon="user" />
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

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