当前位置：首页 > 软件库 > 程序开发 > SVG开发包 >

SVG2Iconfont

SVG 转 Iconfont 工具

授权协议 GPL

开发语言 JavaScript

所属分类程序开发、 SVG开发包

软件类型开源软件

地区国产

投递者云啸

操作系统跨平台

开源组织无

适用人群未知

软件概览

SVG2Iconfont 是一个将 SVG 图标文件转换为 SVG、TTF、WOFF、WOFF2、EOT 字体文件的工具。

Node版本：>10.16.0

使用方法

命令行

参数：

--name <font name>：字体名称。默认为iconfont。
--input <input path>：输入目录。默认为./。
--output <output path>：输出目录。默认为./。
--format <font format>：字体格式。默认为svg,ttf,woff2,woff,eot。可选 svg、ttf、woff2、 woff 和 eot，用逗号分隔。
--prefix <class prefix>：CSS 类前缀。默认为空。

示例：

svg2iconfont --name iconfont --input ./svg --output ./font --format svg,ttf,woff2,woff,eot --prefix iconfont-

注意：

CSS 类前缀不局限于一个名字，因为它是直接被添加到 CSS 类之前，它的替换方式是：

.%prefix%%class%::before { content: ""; }

其中%prefix%被前缀替换，%class%被类名即 SVG 图标文件的文件名替换。比如一个类名为 A，前缀为 B-，那么在使用时为class="B-A"。前缀也可以是 B.那么在使用时为class="B A"。

模块调用

入口文件地址：dist/index.js。

import svg2iconfont from "dist/index.js"; svg2iconfont({ name, input, output, format, prefix });

参数：

使用案例

webpack自动用svg生成iconfont字体图标，支持热重载

之前生成iconfont字体图标，是用的https://icomoon.io/app/或者是阿里的https://www.iconfont.cn/，将UI给的svg图导入来生成。但是一直有个问题，假如需要再次加入几个图标时，又需要重新搞一遍，很麻烦。而使用svg-sprite-loader的方式，也不是很方便，而且在body下插入一个超大的svg标签，影响性能不说，看着这么乱的代码真是挺难受。。
png转svg 上传iconfont / inkscape

https://www.pianshen.com/article/99871368415/ 下载inkscape 文件打开png图片选中图片图层 -> 层置顶路径-> 临摹位图轮廓 -> 多次扫描 ->勾选删除背景（重点）-> 确定 -> 关闭文件存储为svg 上传iconfont