随心所欲，Element Plus 助你潇洒“调色”！将最美图标绘入Vue3

前端

2023-12-15 13:53:02

最近不得了的 Icon 使用方式

想象一下，一个超酷的 应用程序，界面上的每一个元素都闪耀着独特魅力 。这种个性化 不仅吸引眼球 ，而且让用户爱不释手 ，这样您还能接受曾经单调乏味的图标界面吗？

答案当然是不！

那如何 才能让图标在界面中脱颖而出 ，展现独一无二的个性？

答案就是——Element Plus ！

为什么是 Element Plus？

超强适应力 ：Element Plus 是一个跨平台 的 UI 框架，兼容 Vue2、Vue3 甚至其它框架，应用场景 十分广泛，就像一件百搭单品 ，随心搭配，魅力随行。
组件丰富 ：Element Plus 提供了80多种 不同的组件，涵盖按钮、输入框 、表格、图标等，满足各种页面元素的使用需求，让您的设计更加灵活、多变。
风格时尚 ：Element Plus 采用现代化 的设计理念 ，组件外观简洁大方 ，功能强大 ，让您的应用程序瞬间脱颖而出 ，引领潮流 。

Vue3 + Element Plus 如何添加图标？

步骤一：安装 Element Plus

npm install element-plus

步骤二：引入 Element Plus

在 main.js 文件中，添加以下代码：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

步骤三：使用图标

在您的组件中，您可以使用 el-icon 组件来显示图标。例如：

<template>
  <el-icon :icon="iconName"></el-icon>
</template>

<script>
import { ElIcon } from 'element-plus'

export default {
  components: { ElIcon },
  data() {
    return {
      iconName: 'el-icon-search'
    }
  }
}
</script>

iconName 属性用于指定图标的名称。您可以通过查看 Element Plus 的图标库来找到您需要的图标名称。

步骤四：自定义图标

如果您想使用自己的图标，您可以通过以下步骤来添加：

将您的图标文件保存为 svg 格式。
在 src/assets/icons 文件夹中创建一个新的文件夹，并将您的图标文件复制到该文件夹中。
在您的 main.js 文件中，添加以下代码：

import { App } from 'vue'
import myIcons from '@/assets/icons'

const app = createApp(App)

app.config.globalProperties.$icons = myIcons

app.mount('#app')

在您的组件中，您可以使用 v-icon 指令来显示图标。例如：

<template>
  <i v-icon="iconName"></i>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    iconName: {
      type: String,
      required: true
    }
  }
})
</script>