一般都会在线上传svg转font,但也嫌麻烦,发现了这个nodejs的。
如果使用nw.js制作,发现了小bug,nw.js内因路径“\”与“/”的问题,最终class名携带一长串本地路径,修改如下:
createSVG.js文件内27行下添加 name = file.replace(/.*\\([^/]+)\.svg/i, '$1');
nw.js产生反斜杠,修改getCss.js文件内12~15行添加正则.replace(/\\/g, "/");
来源:http://www.npmmirror.com/package/nodejs-svgs2font
项目介绍
svg图标,编译成字体,包含svg、ttf、eot、woff 支持生成css,如果css有内容,会放置在内容最前面
建议全局安装
npm i@liepin/nodejs-svgs2font-D
使用方法
字体存放:把一个个svg字体放置在文件夹里
const svgsFont = require('@liepin/nodejs-svgs2font');
const path = require('path');
// 字体图标默认属性
svgsFont({
fontName: 'iconfont', // 字体名称
baseClass: 'text-icon', // 基础css类
classPrefix: 'icon-', // 图标css前缀
files: path.resolve(process.cwd(), 'icons'), // svg path
output: path.resolve(process.cwd(), 'fonts'), // output path
cssPath: path.resolve(process.cwd(), '/font.css'), // css文件
publicPath: '../fonts', // 当使用less的@import时,出现找不到字体文件时,可以手动传入文件夹相对路径
successLog: true, // 是否展示成功日志
});
另一种用法
svgsFont({
fontName: 'iconfont', // 字体名称
baseClass: 'text-icon', // 基础css类
classPrefix: 'icon-', // 图标css前缀
files: [
'', // 每一个svg图标的绝对地址,满足可以传入不同地方的svg
], // svg path
output: path.resolve(process.cwd(), 'fonts'), // output path
cssPath: path.resolve(process.cwd(), '/font.css'), // css文件
publicPath: '', // 当使用less的@import时,出现找不到字体文件时,可以手动传入文件夹相对路径
successLog: true, // 是否展示成功日志
svgicons2svgfont: {
// svgicons2svgfont 插件的options, 请参考https://www.npmjs.com/package/svgicons2svgfont
},
svg2ttf:{
// svg2ttf 插件的options, 请参考https://www.npmjs.com/package/svg2ttf
}
});
特殊说明:由于生成的ttf、eot、woff,是写入当前时间戳,所以每次都会变化 可以传入一个固定的时间戳,替换当前的时间戳
{svg2ttf:{ts:1552532400// Unix timestamp (in seconds) to override creation time (optional)}}
Comments | NOTHING