SVG 雪碧图与图标字体生成
上传多个 SVG 图标，一键生成 SVG symbol 雪碧图、data-URI 图标 CSS，以及可直接用的 OTF/WOFF 图标字体与 @font-face 样式，全部在浏览器本地完成。
免费浏览器本地运行无需注册
🧩
把 SVG 图标拖到这里
点击选择文件，也可以直接粘贴 —— 支持一次多个 .svg
选项
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 全部在你的浏览器里生成，不会发送到任何服务器。