SVG 雪碧图与图标字体生成

上传多个 SVG 图标，一键生成 SVG symbol 雪碧图、data-URI 图标 CSS，以及可直接用的 OTF/WOFF 图标字体与 @font-face 样式，全部在浏览器本地完成。

🔒 浏览器本地运行，文件不会上传免费 · 无需注册

🧩 把 SVG 图标拖到这里 点击选择文件，也可以直接粘贴 —— 支持一次多个 .svg

选项

类名与 symbol 前缀

字体族名称

起始码位（十六进制，私有区）

把填充色换成 currentColor 强制单色（去掉各路径的填充色）

CSS 图标颜色

CSS 图标尺寸（px）

预览

添加 SVG 文件后即可看到雪碧图、CSS 与字体。

怎么做图标雪碧图和图标字体

把 .svg 图标拖进来，文件名会自动作为图标名，点名字即可改名。
设置类名前缀、字体族名和起始码位，并选择是否把填充色换成 currentColor，这样就能用 CSS 给图标上色。
在标签页中复制雪碧图、CSS 或 @font-face 代码，也可以打包下载整套：sprite.svg、icons.css、usage.html、.otf 和 .woff。

常见问题

雪碧图、data URI 还是图标字体？

SVG <symbol> 雪碧图是现在的首选：一次请求、可用 CSS 换色、任何尺寸都清晰。data-URI 的 CSS 类不用改动 HTML，还能用在 ::before 上。只有在需要兼容很老的项目、或希望图标跟随文字基线时，才值得用图标字体。

哪些图标能转成字形？

用 <path>、<rect>、<circle>、<ellipse>、<line>、<polygon>、<polyline> 绘制、且变换较简单的图标可以顺利转换。描边（stroke）、渐变、<text>、<image>、<use> 无法转成字形；这些图标仍会出现在雪碧图和 CSS 中，工具也会把它们列出来。

文件会上传吗？

不会。解析、雪碧图、data URI、OTF 与 WOFF 全部在你的浏览器里生成，不会发送到任何服务器。