Ege-iconfont NPM

ege-iconfont

svg文件自动化生成iconfont工具

安装

npm i ege-iconfont -g

CLI

创建工程

ege-iconfont create <dir>

编译

ege-iconfont compile

可以修改ege-iconfont.js，自定义配置输入、输出目录，开启hash、豁免css modules；具体配置查看options

预览

ege-iconfont preview

API

const egeIconfont = require('ege-iconfont');

生成字体

egeIconfont.Generator({
    // 执行目录
    cwd: 'xxx',
    ...options
});

options

{
    // 编译选项
    compile: {
        // 编译语法，可选css | scss | less
        syntax: 'css',
        // 字体Unicode对应的起始数值
        startPoint: 51666,
        // 字体名称
        fontName: 'ege-iconfont',
        // 字体文件名称
        styleFileName: 'ege-iconfont',
        // 字体选择器，{{glyph}}前必须带有分隔符，如：- _等
        selector: '.ege-icon-{{glyph}}'
    },
    // 豁免 css module
    module: false,
    // 使用stylelint进行产出代码格式化
    stylelint?: boolean;
    // 哈希配置
    hash: {
        // 字体文件加哈希
        font: false,
        // 样式文件加哈希
        style: false,
        // 哈希值长度
        len: 8
    },
    // 生成预览
    preview: true,
    // 格式化 具体配置查看 https://prettier.io/docs/en/options.html
    format: {
        printWidth: 120,
        tabWidth: 4,
        useTabs: false,
        semi: true,
        endOfLine: 'lf'
    },
    // 输入配置
    input: {
        // svg图标目录
        svgsDir: './svg-icons',
        // 样式模板位置
        styleTpl: null,
        // 预览模板位置
        previewTpl: null
    },
    // 产出配置
    output: {
        // 字体保存目录
        font: './',
        // 样式文件保存目录
        style: './',
        // 预览文件保存目录
        preview: './'
    }
}

自定义模板

常见问题

svg文件名尽量不要带有空格、特殊符号
配置文件中的selector选项{{glyph}}前必须带有分隔符

生成原理

读取svg文件
遍历svg文件中存在的节点形状(path、rect、polyline、line等等)
对svg文件中的形状进行合并（原则上，形状合并很难保证字体100%显示正常，所以建议svg图标里面只存在一个path，不建议存在多余形状）
获取svg文件中的路径(d属性)
生成一个唯一的unicode值，对应字体（也就是伪类中content对应的值）

生成svg 字体文件

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path fill="#333333" d="M746.4 384.1c6 6 9 13.2 9 21.4s-3 15.4-9 21.4l-213 213c-6 6-13.2 9-21.4 9s-15.4-3-21.4-9l-213-213c-6-6-9-13.1-9-21.4 0-8.2 3-15.4 9-21.4s13.1-9 21.4-9h426c8.3-0.1 15.4 2.9 21.4 9z" />
</svg>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
    <defs>
        <font id="iconfont" horiz-adv-x="1024" >
            <glyph glyph-name="arrow-down-insert" unicode="&#59278;" d="M746.4 511.9c6-6 9-13.2 9-21.4s-3-15.4-9-21.4l-213-213c-6-6-13.2-9-21.4-9s-15.4 3-21.4 9l-213 213c-6 6-9 13.1-9 21.4 0 8.2 3 15.4 9 21.4s13.1 9 21.4 9h426c8.3 0.1 15.4-2.9 21.4-9z"  horiz-adv-x="1024" />
        </font>
    </defs>
</svg>