利用iconfount把多个svg图标生成一套字体图标

字体图标（Iconfont）的优缺点

优点

• 缩放不会模糊
• 一套资源可在web、iOS、Android等多个平台使用
• 一键换肤、方便更改图片颜色，图片复用
• 一定程度上减小包体积
• 有利于项目模块化

缺点

• 图标制作/更新成本高
• 只支持单色

生成字体图标的具体步骤

1. UI提供 命名规范 的svg图片

• 图片命名采用语义化的英文命名

• 对同一类图片最好采用批量命名，方便前端添加参数和引用，例如sidebar1、sidebar2、sidebar3 ······

• 把全部svg图片放到同一个文件夹下面

  ​

2. 前端 安装转码工具 iconfount

iconfount是一个离线icon font生成工具，支持从多个svg文件生成一套字体以及对应的样式文件

全局安装iconfount

npm install -g iconfount or yarn global add iconfount.

找到iconfount的安装位置

默认路径：C:\Users\xxx\AppData\Roaming\npm\node_modules\iconfount

修改 配置项

• 找到iconfount文件夹下的sample/svn 清空，把自己的svn图片全部添加进去

• 修改 iconfount文件夹下的sample/config.json配置文件

  • “hinting”：true, 改为false

  • “glyphs”：下面照着原先的规则修改为自己svg图片名（全部图片都要填进去，这一步最繁琐）

  • ‘’css_prefix_text‘’： ‘’iconfount-icon-‘’ 可以修改为任意字符，推荐修改为‘‘icon-’‘

    可参考配置如下：

    {
      "name": "iconfount",
      "output": "../build",
      "hinting": false,
      "units_per_em": 1000,
      "ascent": 850,
      "weight": 400,
      "start_codepoint": 59392,
      "glyphs_dir": "./svg",
      "glyphs": [{
        "keywords": ["dingbulan1"],
        "src": "dingbulan1.svg",
        "css": "dingbulan1"
      }],
      "meta": {
        "author": "Youzan FE",
        "license": "MIT",
        "license_url": "https://opensource.org/licenses/MIT",
        "homepage": "http://www.youzan.com",
        "css_prefix_text": "icon-",
        "css_use_suffix": false,
        "columns": 4,
        "filename_hash": true
      }
    }       
    

• 修改 iconfount文件夹下的package.json配置文件 (这一步只是推荐操作，目的是方便命令行操作)

  "scripts": {
      "start": "node bin/fount.js -c sample/config.json"
   },
  

执行build操作

现在可以在iconfount文件夹下打开命令行，执行npm start了

修改生成的build文件

执行完npm start之后，你会发现iconfount文件夹下多了一个build文件，打开这个文件，点开demo.html，就可以看见所有的字体图标，以及引用他们的类名了

精简build文件

build下面只需要保存css文件夹下面的iconfount.css，font文件下面的iconfount-2e7aa085be.woff文件以及一个预览的demo.html就可以了，剩下的文件可以统统删掉，然后记得把留下来的三个文件中没用的路径删掉就大功告成了！