1.0.2 • Published 4 years ago
cwiconfont v1.0.2
cwiconfont
svg文件自动化生成iconfont工具
安装
npm i cwiconfont -g
CLI
创建工程
cwiconfont create <dir>
编译
cwiconfont compile
可以修改cwiconfont.config.js
,自定义配置输入、输出目录,开启hash、豁免css modules;具体配置查看options
预览
cwiconfont preview
API
const ChowaIconfont = require('cwiconfont');
生成字体
ChowaIconfont.Generator({
// 执行目录
cwd: 'xxx',
...options
});
options
{
// 编译选项
compile: {
// 编译语法,可选css | scss | less
syntax: 'css',
// 字体Unicode对应的起始数值
startPoint: 51666,
// 字体名称
fontName: 'chowa-iconfont',
// 字体文件名称
styleFileName: 'chowa-iconfont',
// 字体选择器,{{glyph}}前必须带有分隔符,如:- _等
selector: '.cw-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="" 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>
由生成的svg字体文件生成ttf字体文件
- ttf字体文件生成eot字体文件
- ttf字体文件生成woff字体文件
- ttf字体文件生成woff2字体文件
windows环境安装报错
npm i -g windows-build-tools