写在前面
其实图标在ant-design-vue中其实已经有很多可选的,可有些情况,产品/UI可能还是会要求使用特定的图标。这可能需要上传svg到iconfont.cn阿里图标库中,本文不讲述如何上传svg到iconfont。而是介绍如何使用iconfont中的图标,昨天花了两个小时没找到关于vue如何自定义图标的文章, 大多数都是关于react自定义图标。 所以花了点时间研究下, 在这里做个总结, 供大家参考。
step1. init
新建项目test001-编辑项目
step2 .编辑css
点击font class 复制这个路径到浏览器中,然后copy一下css代码
copy代码到本地文件中
然后考到Index.html文件中(当然你也可以提出来然后用Link 标签引入css)
重点来了, 一定要按照红框的代码写!!! 必须是anticon, 注意是anticon 不是action
除了拷贝的代码, 还要再加一个, 一定要写!!!
.anticon::before{
display: block !important;
}
step3 .在router.config.js中配置一下
这个icon的名字跟你iconfong项目的名称保持统一
看一下效果,为啥没颜色我也不知道。但是是可以引入了,颜色话自己再研究研究