vue 使用element-plus 图标引入
在Vue中使用Element Plus图标,首先确保已经安装了Element Plus。如果未安装,可以通过以下命令安装:
npm install element-plus --save
# 或者
yarn add element-plus
1.局部引入
<template>
<div class="icon >
<el-icon :size="size" :color="color">
<Setting />
</el-icon>
<el-icon :size="size" :color="color">
<Document />
</el-icon>
</div>
</template>
/**
局部引入 在当前也面下 引入使用的图标
**/
<script>
import {Setting, Document } from '@element-plus/icons-vue'
</script>
2.全局引入
在 页面中直接使用 图标
<template>
<div class="icon >
<el-icon :size="size" :color="color">
<Setting />
</el-icon>
<el-icon :size="size" :color="color">
<Document />
</el-icon>
</div>
</template>
/**
在mian.ts 中
**/
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp({
render: () => h(App),
})
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}