svg图标编译成font字体

由 夕空 撰写于  2020年4月19日

一般都会在线上传svg转font,但也嫌麻烦,发现了这个nodejs的。

不过发现了小bug,nw.js内因路径“\”与“/”的问题,最终class名携带一长串本地路径,修改如下:

createSVG.js文件内27行下添加 name = file.replace(/.*\\([^/]+)\.svg/i, '$1');

nw.js产生反斜杠,修改getCss.js文件内12~15行添加正则.replace(/\\/g"/");

来源:https://developer.aliyun.com/mirror/npm/package/nodejs-svgs2font/v/0.2.1

项目介绍

svg图标,编译成字体,包含svg、ttf、eot、woff 支持生成css,如果css有内容,会放置在内容最前面

建议全局安装

npm i@liepin/nodejs-svgs2font-D

使用方法

字体存放:把一个个svg字体放置在文件夹里

constsvgsFont=require('@liepin/nodejs-svgs2font');constpath=require('path');// 字体图标默认属性svgsFont({fontName:'iconfont',// 字体名称baseClass:'text-icon',// 基础css类classPrefix:'icon-',// 图标css前缀files:path.resolve(process.cwd(),'icons'),// svg pathoutput:path.resolve(process.cwd(),'fonts'),// output pathcssPath: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 pathoutput:path.resolve(process.cwd(),'fonts'),// output pathcssPath: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)}}

声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - svg图标编译成font字体


欢迎光顾我的小站!