vue3 element-plus 图标(组件)替换方案 让element识别

最近在做vue3+vite+ element-plus 后台管理项目 原本以为后台管理样式大差不差就行

没想到UI走查时像素级的检查

比如下拉选择的三角icon element图标库里面有个实心三角的icon

我通过原有插槽进行替换 suffix-icon

正当我暗自庆幸自己的奇巧淫技时 被UI告知 '我图上的三角是有圆角的'

what s the f*** !

跑题了 开始上fuck good

---

从vue2中我们常用的更换图标的方法是找到 类似于这个样式的一个码 放到伪类中进行替换

.el-icon-plus:before {
    content: "\e6d9";
}

当然 这个方案在vue3中 貌似不能用的这么痛快

方案一 ：在element未给出插槽时 且不存在一个容器内有两个相同标签名的icon标签

所以 还有更常用的方案 就是找到这个class名 将其背景图片设置为要更改的图标样式
比如这样

          .icon-arrow-down{
              background-image: url('@/assets/svg/sanjiao3.svg');
              background-position: center;
              background-size: 100%;
              background-repeat: no-repeat;
              // width: 12px;
              // height: 12px;
              svg{
                display: none;
              }
            }

方案二： 这个方案其实和方案一类似 只不过 某些场景 不能动当前的标签名 而又需要在当前的标签前后加上图标

比如这样

                .el-message-box__title:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: -3px;
                    width: 22px;
                    height: 22px;
                    background-image: url(../assets/confirmi.png);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }

也就是使用伪类 在前面或者后天添加进去图标 ，在这里 这是个message-box 我需要在标题前面加上一个icon

以上方案足以解决大部分图标问题，但有的时候 比如我方案一的描述不存在一个容器内有两个相同标签名的icon标签

在这里我举例一个场景：

image.png

select选择下拉框组件：如果添加clearble属性后 选择值后鼠标悬浮会出现个小X号

image.png

这个好在select给出两个插槽 但是此插槽非彼插槽 是直接在属性上的

image.png

element是使用js控制的DOM 他俩的类名是相同的 也就是说 我如果使用方法一方法二更换了图标 这两种状态显示的图标会同时被替换 相当于改了一个其他的也被改

image.png

image.png

现在的问题点在抓住这两个状态进行控制 css上是抓不住了 如果想改某个下拉框可以单独写js 根据当前下拉框是否有值加上:class 去展示

但是我要全局都用 这样会太麻烦 唯一的办法是通过更换element能够识别的图标组件

方案三： element给出的插槽 使用外面的图标库（这个方法我还没用过 别的地儿找的）

方案四：做一个让element能识别的图标组件 并且全局放入到element的图标组件库中

第一步

需要安装插件
npm i -D unplugin-icons

---

第二步

config中配置
Vue3 + VueCLI

// vue.config.js
// 引入
const Icons = require('unplugin-icons/webpack')
module.exports = {
  configureWebpack: {
    plugins: [
      // 使用
      Icons({ compiler: 'vue3' }),
    ],
  }
}

---

vue3 + vite

// vite.config.js
import Icons from 'unplugin-icons/vite'
 
export default defineConfig({
  plugins: [
    Icons({ compiler: 'vue3' }),
  ],
})

第三步

放入要替换的svg文件

image.png

第四步

config中配置SVG 文件解析的 loader

        Icons({ 
          compiler: 'vue3',
          autoInstall: true,
        // 自定义图标加载
          customCollections: {
               // home图标集
               // 给svg文件设置fill="currentColor"属性，使图标的颜色具有适应性
               home: FileSystemIconLoader('src/assets/svg', svg => svg.replace(/^

第五步

在页面中引用一下 看看是否成功

在这一步 把图标名放入到属性插槽中是不显示的 因为element现在还不认她

image.png

第六步

让element识别到她
个人认为这一步比较关键 在加载ElementPlusIconsVue时 将自己的组件混入其中 比如这样
而在后面调用时 key 也就是你组件的名字

image.png

现在去页面看一下效果呗

至此 大部分vue3图标组件就处于可调整的状态了

希望更多大佬能给给出其他思路与技巧 大家一起探讨！

更多unplugin-icons使用方法参考
https://blog.csdn.net/qq_43430453/article/details/123267638