查看精灵图中所有 SVG 的代码片段

我认为 SVG 精灵是这样的

<svg display="none">
  <symbol id="icon-one"> ... <symbol>
  <symbol id="icon-two"> ... <symbol>
  <symbol id="icon-three"> ... <symbol>
</svg>

我一直是这种图标系统方法（按需使用 <use>）的粉丝，但我现在更喜欢直接按需包含 SVG。不过，精灵图仍然很好，而且很受欢迎。

如果您有一个精灵图，想看看里面有什么？

以下是一段很小的 JavaScript 代码，它将循环遍历找到的所有符号，并注入使用每个符号的 SVG…

const sprite = document.querySelector("#sprite");
const symbols = sprite.querySelectorAll("symbol");

symbols.forEach(symbol => {
  document.body.insertAdjacentHTML("beforeend", `
  <svg width="50" height="50">
     <use xlink:href="#${symbol.id}" />
  <svg>
`)
});

查看 CodePen 上的
将精灵图直观地转换为单个 SVG by Chris Coyier (@chriscoyier)
在 CodePen 上。

就是这样。

评论