elementui图标怎么变大（解决element-plus使用图标不显示问题）

关于前端使用element-plus中的icon不展示
    
    
    
，网上主要分为两种     


     


     


     ，一种是打包之后不展示 




 




 




 



，还有一种是直接在开发的时候运行就不展示

这个帖子主要解决的是在本地运行图标不展示的问题

关于不展示的原因

   

   

   

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

怎么解决呢？

前提：先确定安装了element-plus/icons     

     

     

    ，没安装的话  




  




  




  


，安装命令奉上

npm install @element-plus/icons-vue

如果图标引用的比较少


  


  


  


，那么采用方案1     
     
     
   ，如果大量的使用了图标   




   




   




   

，就采用方案2

方案1:

在引用图标的页面中将要使用的图标引入



 



 



 



，作为js对象                 ，代码如下：

<script> import { Edit,Share } from "@element-plus/icons"; 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:

方案2其实是针对方案一的一个优化    




    




    




    
，对于大量使用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>

关于方案2的优化也是借鉴了前人的经验                ，这里又个不成熟的想法     



     



     



     ，不知道是不是可以用set来置入

本人非专业前端开发



















，术语以及一些叫法可能不正确
    
    
    
，各位嘴下留情     


     


     


     ，一起学习 




 




 




 



，共同进步