使用前- 安装element-plus 的icon element - plus的官网

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

废话不多说，直接上图在main.js

写入

import elementIcon from "/src/plugins/svgicon";//实现element-puls icon的办法
import installElementPlus from "/src/plugins/element";//实现element-puls icon的办法

.use(installElementPlus)
.use(elementIcon)

并在src文件夹下创建plugins文件夹

 在element.js中写入

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import "dayjs/locale/zh-cn";
export default {
    install: (app) => {
        app.use(ElementPlus, {
            locale: zhCn,
            size: "default",
        });
    },
};

在svgicon.js文件下写入

import * as components from "@element-plus/icons-vue";
export default {
    install: (app) => {
        for (const key in components) {
            const componentConfig = components[key];
            app.component(componentConfig.name, componentConfig);
        }
    },
};

在页面中

例：在element input前加入图标

 <el-input v-model="param.username" placeholder="请输入用户名" clearable>
   <template #prepend>
      <el-icon :size="20"><Avatar /></el-icon>
   </template>
 </el-input>

此中方法可直接使用不许引用，如果要在按钮中添加图片 例：

 <div >
      <el-button type="primary"  :icon="Edit">登录</el-button>
</div>

<script setup>
import { Edit } from '@element-plus/icons-vue'
</script>

就可以使用啦

成果展示：

 

如有不对请多多指教

如果有侵犯版权的事情，请联系作者