Iconfont+IcoMoon 升级 iview2 图标库到 iview3 (打造自己的图标库)

1. 进入 IcoMoon , 导入 node_module 里装的 iview2 和 iview3 的 SVG 字体文件.

   IcoMoon 很简单, 不会弄可以自己上网查;

   同理, node_module 里找到 iview 文件夹了慢慢找 fonts 里的 svg 文件, 基本上看着文件夹名字就知道在哪儿了

2. 导入完成后, 先全选 3 版图标再全选 2 版图标, 选择导出, 导出时可以设置导出的字体名, 前缀, 调用方式之类的, 字体名还是选 Ionicons (和 iview 保持一致), 前缀也一样 ivu-icon- , 调用方式选 class .

   关于导入顺序, 反正就是为了让最终生成的 css 文件中 2 版图标在前面, 3 版在后面覆盖 2, 做到同名图标使用 3 版, 3 版没有再去 2 版里找, 如果我说的顺序反了, 那就换个顺序再选中.

3. 打开生成的压缩包, 可以看到 fonts 文件夹和 css , 类比 iview 的结构, 可知其用途. 找个地方放好, 引用 iview 时别引用它的图标库, 引这个生成的 css 就行.

4. 注意事项:

   1. 打开生成的 css , 可能有的不是 .ivu-icon- , 而是 .ivu-icon-ion- , 全局替换即可

   2. 对比 iview 的图标库 less 文件, @font-face 和 .ivu-icon 相关的属性, 或者干脆把原图标库复制下来, 正则替换掉所有 .ivu-icon-图标名 的 css

   3. iview 框架中, 有些组件使用图标不是引用的图标库, 而是自己直接用图标的 content 属性, 这种需要全局搜索, 查看 /node_modules/iview 中除了图标库文件, 还有哪些文件有用到这个属性的, 找到它的属性值, 再找到属性值对应的图标, 看看这个图标在我们导出的字体库中 content 是个什么值, 拿这个值去替换 /node_modules/iview 中组件所引用的值

      1. webstorm 一次全局搜索最多显示 100 条, 但是全局搜索界面右下角有个按钮, 点击可以看到所有的匹配, 和他们都在哪些文件里.
      2. webstorm 正则搜索挺好用的.
      3. 最好别改 iview 模块里的东西, 在自己的新图标库文件里改吧.
      4. 如果导出时你选择的字体名和 iview 的不一致, 也要注意 /node_modules/iview 里有哪些地方是直接用了 font-family 了的, 要替换成你自己的字体名.

   4. 关于导入顺序, 其实有个问题, 同名图标优先用 3 , 会影响显示么? 2 和 3 中图标名相同的图标显示效果是一样的么? 把 2 和 3 图标库文件中的图标名提取成数组后, 发现重名的有 180 多个, 全部都是 ios 开头的, 看了几个, 看起来是一样的, 但是没有去 iview2 和 3 的教程页面操作 DOM 来批量对比.

5. 扩展

   以后再想加些啥图标, 可以上 Iconfont 搜图标添加到自己的 Iconfont 项目, 设置导出格式和前缀之后导出, 生成的 svg 导入到 IcoMoon , IcoMoon 有缓存, 之前的两个图标库还在, 再加上你新添加的这个 Iconfont 库, 跟之前一样导出再引用(注意上面写的注意事项).