vue3中如何引入element-icon并使用
warning:
这篇文章距离上次修改已过441天,其中的内容可能已经有所变动。
在Vue 3中引入Element Plus Icon组件库,首先需要安装@element-plus/icons-vue:
npm install @element-plus/icons-vue然后在你的Vue组件中使用它:
<template>
<div>
<!-- 使用图标组件 -->
<el-icon :size="size" :color="color">
<!-- 这里使用你需要的图标,例如 'Edit' -->
<edit />
</el-icon>
</div>
</template>
<script setup>
// 引入所需的图标
import { Edit } from '@element-plus/icons-vue'
// 定义图标大小和颜色
const size = 20
const color = '#409EFF'
</script>在上面的例子中,<edit /> 是从 @element-plus/icons-vue 中引入的图标组件。你可以替换成任何Element Plus Icon库中提供的图标组件。通过el-icon组件来包裹图标,并可以通过size和color属性来控制图标的大小和颜色。
评论已关闭