生成器系列

图标库生成器

搜索精选的 SVG 图标库,实时预览样式选择,然后一次复制一个图标,或为设计系统、应用程序或文档网站导出可重复使用的精灵图。

  • 内置 24 个线性图标,支持标签搜索
  • 实时调整尺寸、描边、颜色和背景
  • 单个图标的一键复制或下载操作
  • 将选定图标批量导出为单个 SVG 精灵图

设置图标规则

所有控制均在客户端应用。尺寸单位为像素,描边宽度保留一位小数,导出的符号保留 currentColor,以便稍后在 CSS 中重新着色。

匹配图标名称和标签,如 商业天气媒体

在选择要导出的图标之前筛选图库。

仅限字母、数字和连字符。无效字符会被自动移除。

允许范围:16 到 256 像素。

允许范围:1.0 到 4.0。

拐角保持圆角,以确保在小尺寸下的清晰度。

使用 3 位或 6 位十六进制值,如 #16202B

仅用于图库预览。下载的图标保持透明。

导出的 SVG 仍使用透明画布。

已选择 0 个图标用于导出。

复制内联 SVG 以快速使用,或选择一组图标并在下方生成单个精灵文件。

0 个可见
0 个已选

精灵图导出

批量输出包含每个选定图标的 <symbol>。稍后使用 <use href="#icon-name"> 引用每个图标。如果未选择任何内容,导出操作将保持禁用状态并显示提示。

选择一个或多个图标以生成精灵图预览。


    

工作原理

图库使用直接存储在页面中的内联 SVG 标记。输入经过清理并限制在安全范围内,然后立即重新渲染,确保预览和导出的标记保持同步。

1. 筛选库

使用关键字搜索和类别筛选器缩小图标列表范围。搜索同时匹配图标名称和标签,因此宽泛的术语依然有效。

2. 调整展示

2. 调整演示样式

尺寸、描边宽度、端点样式和预览颜色会更新所有可见图标。预览背景有助于在不改变导出 SVG 填充的情况下检查对比度。

3. 导出所需内容

复制或下载任何单个图标,或选择一组图标并生成一个精灵图表。精灵图 ID 使用您选择的前缀,并清理为全小写的安全名称。