修改第三方组件库中的icon

实际场景之一：

vant 组件的清除按钮：

设计稿期望：

具体以 vue + vant 的项目为例：

template 中使用 vant 的 field 组件:

该输入框聚焦输入内容后，就会出现清除 icon，一旦失去焦点或清空输入框的内容，dom 节点就删除了，所以没法选中该 icon，此时需要修改依赖包里面的 van-field 的显示隐藏逻辑，让其一直显示，以便于找到对应的选择器，后面再来覆盖该样式，van-field 组件的位置在/node_modules/vant/es/field/index.js 中，

将 62 行的逻辑暂时修改为 return true，让 icon 一直显示（暂时的，需要还原的）

找到了，选择器为.van-field__clear

接下来就用自己的 iconfont 库里面的 icon 覆盖组件库中的，具体需要修改 font-family 和:before 下的 content；

先是找到自己的 iconfont 中的 font-family 和:before 的值；

打开从 iconfont 网站下载下来的文件中的 demo 文件用浏览器打开：

切换到 class 模式，打开控制台，选中想要使用的 icon ，如图：就看到了 font-family: "iconfont";

在选中该元素下的:before，就看到了 content: "\e62a";

因此做如下修改，就满足 UI 的设计稿了

.van-field__clear {
  font-family: "iconfont";
  &:before {
    content: "\e62a";
  }
}

完美解决，撒花撒花