vue-element-admin 使用阿里的图标库时路由菜单无法显示图标

最新推荐文章于 2024-03-31 09:49:46 发布

原创最新推荐文章于 2024-03-31 09:49:46 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

VUE 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue Element Admin项目中，针对Sidebar Item组件的图标进行优化，增加了对自定义图库前缀的支持。通过检查图标字符串是否包含'el-icon'或'icon-face'来决定是使用内联图标还是SVG图标，提高了代码的灵活性。

部署运行你感兴趣的模型镜像

打开以下文件

vue-element-admin\src\layout\components\Sidebar\Item.vue

 if (icon) {
      if (icon.includes('el-icon')) {
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
      } else {
        vnodes.push(<svg-icon icon-class={icon}/>)
      }
    }

把这段代码修改成
 if (icon) {
      if (icon.includes('el-icon')|| icon.includes('icon-face')) {//写你图库的自定义前缀
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
      } else {
        vnodes.push(<svg-icon icon-class={icon}/>)
      }
    }

您可能感兴趣的与本文相关的镜像