最近在使用 VUE+Electron+ElementUI 做 pc 端应用。遇到一个小问题,在此记录一下。
Element 控件Element UI 提供了如此优秀的控件库,但是我们得根据自己项目的需求进行图标替换。这时候问题来了,我们看下 Element 的代码吧。
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
清楚的看到“el-icon-location”就是这个图标的控制入口,初次接触用 class 来控制图标的方式,不免觉得困惑。这时候我们可以更换 class 来实现更换图标,但是这里仅仅支持 el 自带的 icon 库。http://element-cn.eleme.io/#/zh-CN/component/icon 这个链接可以看到 el 自带的所有图标库,还是蛮强大的,如果能在里面找到合适的图标,那你非常幸运,直接写上相应的类名就可以啦。
接下来我会图文并茂的表达如何生成、引入、使用自定义的图标库。
第一步:找 UI 拿到 svg 图标。如下图一样的文件。
资源第二步:上阿里妈妈网站 http://www.iconfont.cn ,注册并创建自己的项目。
第三步:上传 svg 图标到我的项目中。下载项目文件:
你会得到如下文件,把红框内文件拖入 vue 项目中。第四部:引入自定义的资源,我的项目是在 index.ejs 中引入的。
css 引入5.在 iconfont 文件中查看可以使用的样式名:
自定义的 class 名称6.在Element UI 里面使用对应的 class:
代码应用方式(别忘记了 iconfont )7.效果展示
实现效果哈哈哈哈,这个流程里面,虽然还有些地方我也不是很理解,但是终于把目的达到了。欢迎有疑惑的小伙伴,或者更有经验的小伙伴留言交流。
如果对你有帮助,记得帮忙点个赞哟。😀
网友评论