生成 sprite
☞ 全程在你的浏览器中运行 —— 不会上传任何图片把 SVG 图标拖到这里
或点击选择 —— 最多 40 个 SVG 文件
预览
把这几行贴到要出图标的地方
OneImageTool
图片工具一站搞定 — 免费、无需上传
生成 sprite
把图标拖进来，得到一份由 symbol 组成的 sprite 文件，外加每个图标的 use 引用，直接粘贴即可。
或点击选择 —— 最多 40 个 SVG 文件
预览
一个文件，一个图标一条引用
每个单独加载的图标都是一个请求、一条缓存记录，也是一次「晚到一帧」的机会。sprite 把它们叠进同一份文档：每个图标成为一个带自己 viewBox 的 symbol，谁都不自己画，要用的时候拿 use href="#icon-name" 取出来。因为引用走的是 id 而不是 URL，图标会继承 currentColor 和外面那层 svg 上的 CSS —— 这恰恰是一堆 img 标签做不到的事。
真正麻烦的不是包一层，是重名。设计工具导出的四十个图标里，很可能有四十个叫「a」的渐变和四十个叫「cls-1」的类；一旦共用一份文档，后来的那个会**静默**顶掉前面那个的填充。所以每个图标内部的 id 与类名一律用它自己的 symbol id 作前缀重命名，引用能藏的四个地方 —— 属性里的 url()、指向片段的 href、style 属性、以及 style 元素里的 CSS —— 同步改掉。图标之间不会串色。
三步
一次最多 40 个 SVG，全在你的浏览器里解析。用箭头调整顺序，这个顺序就是 symbol 在文件里的顺序。
每个 symbol 按「前缀 + 文件名」命名，列表里直接显示结果。两个同名文件会自动加编号，不会出现两个 symbol 抢同一个 id。
sprite 可以贴进页面，也可以当作 sprite.svg 单独发；片段则是一个图标一行，拿去就能粘。
快速解答
两条路。把整份 sprite 贴在 HTML 靠前的位置，然后用 use href="#icon-name" 引用；或者把文件发出去，用 use href="/sprite.svg#icon-name" 引用。前者省一个请求，后者能让浏览器把一份 sprite 缓存给所有页面用。
取文件名，转小写，非字母数字的字符一律换成连字符，再在前面加上前缀。所以 arrow_left.svg 用默认前缀就是 icon-arrow-left。
XML 的 id 不能以数字开头，而 2-arrow.svg 这种文件名很常见。前缀还能避免图标 id 和你页面上已有的 id 撞车。前缀可以改也可以清空；清空后会导致 id 非法时，会自动补回一个兜底前缀。
后一个自动加编号。不这么做的话，两个 symbol 会顶着同一个 id，所有引用它的地方都会画出第一个图标 —— 这是**画错**，不是报错，没人会发现。
保得住。每个图标内部的 id 与类名都用它自己的 symbol id 作前缀重命名，引用同步改：属性里的 url()、指向片段的 href、style 属性，以及 style 元素里的 CSS。
如果图标写的是 fill="currentColor"，可以 —— 给包着引用的那个 svg 设 color，图标就跟着变。写死了填充色的图标保持原色，sprite 不会去改你的配色。
一次 40 个。sprite 本身没有硬上限，但比这更大的一张表通常该按站点板块拆开，让每个页面只带它真正用到的图标。
不会。解析和拼装都在你的浏览器里完成，预览用的是你本机生成的 blob URL。这个工具根本没有一台服务器可以接收文件。
免费，没有水印，也不用注册。