element-plus 图标不显示的问题

白泽27

已于 2022-12-08 23:40:55 修改

阅读量2.6k

点赞数 6

文章标签： vue.js javascript 前端

于 2022-11-01 22:15:34 首次发布

本文链接：https://blog.csdn.net/qq_52102677/article/details/127642588

版权

本文介绍了如何在Element Plus项目中正确安装并使用图标组件，包括全局注册与局部导入的方法，并提供了具体的代码示例。

摘要由CSDN通过智能技术生成

1. npm install @element-plus/icons-vue

项目文件夹命令行安装

npm install @element-plus/icons-vue

方法一:main.js 加入全局注册

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

但是我添加后没效果,无语死了,官方文档也不说清楚,无语
https://element-plus.gitee.io/zh-CN/component/icon.html#%E6%B3%A8%E5%86%8C%E6%89%80%E6%9C%89%E5%9B%BE%E6%A0%87

方法二:在页面中添加图标组件

<script >
    //组件script
    import { Fold } from "@element-plus/icons-vue";
    import { Edit } from "@element-plus/icons-vue";
    import { Aim } from "@element-plus/icons-vue";
    import { Share } from "@element-plus/icons-vue";
    import { Search } from "@element-plus/icons-vue";
    import { Delete } from "@element-plus/icons-vue";
    export default {
        components: {
            Fold,
            Edit,
            Aim,
            Share,
            Search,
            Delete,
        },
        data() {
            return {
            };
        },
    };


</script>

4.测试

<template>
    <div style="width: 100%"> <!-- <Header /> -->
        <!-- Icon 图标 -->
        <el-icon><edit /></el-icon>
        <el-icon><fold /></el-icon>
        <el-icon><aim /></el-icon>
        <!-- SVG 图标 -->
        <edit style="width: 1em; height: 1em; margin-right: 8px" />
        <share style="width: 1em; height: 1em; margin-right: 8px" />
        <delete style="width: 1em; height: 1em; margin-right: 8px" />
        <search style="width: 1em; height: 1em; margin-right: 8px" />
    </div>
    <div style="width: 100%">
        <el-icon :size="size" :color="color">
            <Edit />
        </el-icon>
    </div>

</template>

<script >
    //组件script
    import { Fold } from "@element-plus/icons-vue";
    import { Edit } from "@element-plus/icons-vue";
    import { Aim } from "@element-plus/icons-vue";
    import { Share } from "@element-plus/icons-vue";
    import { Search } from "@element-plus/icons-vue";
    import { Delete } from "@element-plus/icons-vue";
    export default {
        components: {
            Fold,
            Edit,
            Aim,
            Share,
            Search,
            Delete,
        },
        data() {
            return {
            };
        },
    };


</script>

应该就可以了,两种写法都能显示.

有用的话请点一个赞,我好统计是否对你有帮助,判断是否需要补充