关于iconfont在vant组件中自定义的解决方案

关于使用iconfont在vant-icon中的自定义

我们知道，vant的组件虽然功能很强大，而且图标也很多，但是我们还是会发现它的图标库并不能满足我们所有的需要，所以我写了这篇博客来记录如何在van-icon中自定义图标

在vant的官方文档icon图标这章有一个属性是class-prefix,官方文档的解释是自定义图标时进行应用，那么这个究竟是什么意思呢。当我们使用van-icon中的只传入name值为plus时，我们在生成的dom树中查看，会发现他会生成一个i标签，并携带类名

<i class="van-icon van-icon-plus"></i>

那么为什么会生成这两个类，这就是我们上面说到的两个属性，name与class-prefix属性我们在回到官方文档仔细查看，发现class-prefix的默认值为van-icon，那么一切都明朗了。

vant-icon的原理就是，在定义这个标签时，会将class-prefix的值首先添加到i标签的classList中，而后将class-prefix中的值与name的值进行拼接生成一个类名，这两个类名与引入的css进行匹配显示样式

那么原理说完了，我们说一下如何在vant中定义自己的图标，我们会用到iconfont这个库，不会用的朋友自己去网上看看

我们会发现，iconfont与van-icon有异曲同工之妙，首先都是先添加一个类iconfont，而后使用icon-xxx来定义类名显示自定义图标，所以我们应该像这样去写

 <van-icon
          class="iconfont"
          class-prefix="icon"
          name="gouwuchezhengpin"
        />

千万不要踩坑，切记！！！！！！！！