文章标签

我认为 SVG 精灵图是这样的

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

我一直很喜欢这种图标系统的方法（<use></use>-ing them as needed），…

Gaddafi Rusli 的 ICONSVG 有很多值得称赞的地方。

1. 它提供内联 <svg>，这是最通用的交付方式，也是 可能应该使用的唯一方式。每个图标都是一个很小的

图标很棒，但正如我们一次又一次地看到的那样，它们通常不能单独完成任务。即使你很好地完成了无障碍性部分，并确保有相应的...

这是一个由 Marco Hengstenberg 撰写的关于无障碍 SVG 标记模式的绝佳示例。这是理想的示例

<button type="button">
  Menu
  <svg class="svg-icon"
     role="img"
     height="10"
     width="10"
     viewBox="0 0 10 10"
     aria-hidden="true"
     focusable="false">
     <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"></path>
    </svg>
</button>

• WordPress 的新 TwentySeventeen 默认主题使用 SVG 图标系统。它是由 Sami Keijonen 贡献的，他在这方面 有一些先前的经验，并在此处 写了一些关于它的内容。该主题 包含函数，这些函数可以输出正确/无障碍的...

Elliot Dahl

在 Pivotal，我们使用 React 创建了一个 SVG 图标系统，用于我们的产品套件。本文介绍了我使用 CSS 样式化 SVG 图标系统的方法，使其易于使用且有效，并使...

假设你正在开发一个使用图标系统的网站。许多在网站上工作的人都会与图标系统进行交互。设计师会创建新图标，他们会调整现有图标，他们会对想要的...的想法。

我最近参加了 Michael Jackson 和 Ryan Florence 的 ReactJS 培训。我很兴奋地参加培训，部分原因是我对 SVG 和 React 有很多疑问。关于使用 React 和...有很多点。

我已经多次谈论过这里的 SVG 的 <use></use>，以及如何使用它来构建 图标系统。<use></use> 的美妙之处在于，你可以只引用定义在其他地方的某个 SVG 的一部分，并只绘制...