[vue]解决element-plus使用图标不显示问题

问题：使用elment-plus 时，照官网写的demo，icon 不能正常显示


原因：简单一句话就是：element-plus/icons改变成了svg


解决方法：
1.安装 @element-plus/icons-vue
npm install @element-plus/icons-vue


2. 使用
如果图标引用的比较少，那么采用方案1，如果大量的使用了图标，就采用方案2


方案1：

在引用图标的页面中将要使用的图标引入，作为js对象，代码如下：

<script>
 import { Edit,Share } from "@element-plus/icons-vue";
 export default {
    setup() {
     return {
       Edit,
       Share
     }
    }
   }
</script>


使用方式和elemunt-ui3官网一致

<div class="flex">
   <el-button type="primary" :icon="Edit" />
   <el-button type="primary" :icon="Share" />
   <el-button type="primary" :icon="Delete" />
   <el-button type="primary" :icon="Search">Search</el-button>
   <el-button type="primary">
     Upload<el-icon class="el-icon--right"><Upload /></el-icon>
   </el-button>
 </div>



方案2：

其实是针对方案1的一个优化，对于大量使用icon的项目来说相对比较友好

首先：在main.js中将icon全部引入并注册到页面中

import * as ElIconList from '@element-plus/icons'


for (const name in ElIconList) {
 app.component(name, ElIconList[name])
}

然后就是使用了，在页面中直接使用即可

<el-button-group class="ml-4">
    <el-button type="primary" icon="Upload" />
    <el-button type="primary" icon="Edit" />
    <el-button type="primary" icon="Share" />
    <el-button type="primary" icon="Delete" />
</el-button-group>


注:  使用JSX 显示图标的代码如下：

采用 jsx 的语法，使用 {} 显示变量
{
            key: "handle",
            title: "操作",
            width: 200,
            align: "center",
            cellRenderer: (data) => (
            <>
                <el-button
                type="danger"
               icon={Delete}
                onClick={handleDelete.bind(this, data)}
                >
                删除
                </el-button>
                <el-button
                type="primary"
                icon={Edit}
                onClick={handleDelete.bind(this, data)}
                >
                修改
                </el-button>
            </>
            ),
        },


参考：https://blog.csdn.net/dxy3166216191/article/details/125965677