使用 svg 图标作为背景的最优雅的方式是什么？答案

【问题标题】：What is the most elegant way to use svg icons as background?使用 svg 图标作为背景的最优雅的方式是什么？
【发布时间】：2019-10-09 02:08:02
【问题描述】：

我不是前端专家，我的应用程序中只需要几个图标，所以我认为与其依赖 font-awesome（带有巨大的 css 文件）这样的巨大图标包，我只需编写自己的图标css。这是我的想法（在 scss 中）：

$icon-width: 24px;
$icon-height: 24px;
.thumbs-up {
  width: $icon-width;
  height: $icon-height;
  &:before {
    content: "   ";
    background: url(/icons/thumbs-up.svg) no-repeat;
    width: 100%;
    height: 100%;
    display: block;
  }
}

我可以像这样在我的 html 中简单地链接使用 thumbs-up：

> <p class="thumbs-up" id="like"></p>

这很好，我想知道这是否有任何缺陷，或者可能有更优雅的方法来做到这一点？

【问题讨论】：

如果您只需要几个图标，这种方法是最好的

标签： css sass icons

【解决方案1】：

检查上下文

这取决于上下文。老实说，这是您示例案例的更好方法。

要在 CSS 或 IMG 标签之间进行选择，您必须问自己这是否只是纯粹的设计，还是图像是上下文相关的，是否是内容本身的一部分。

如果只是为了设计，请使用 CSS。如果它是页面所需的上下文，则使用IMG 标签，IMG 标签附带title 和alt 参数，当图像无法显示时，将解释图像的上下文，帮助拥有屏幕阅读器和搜索引擎爬虫的人。

还有很多其他点两者都不同，但这些点更能解释为什么 CSS 更适合纯设计，而 IMG 标签适用于上下文图像。

额外的 SVG 好东西

虽然 SVG 是 XML 文件，但如果您将它们嵌入页面（不是使用 IMG 标记，而是实际将其 XML 代码粘贴到 html 中），您可以通过 CSS 和 JavaScript 操作它们的元素。

例如查看Gitlab，如果您将鼠标悬停在左上角的徽标上，您会注意到鼠标指向的三角形会发光。这只能通过在页面中嵌入 SVG 代码而不是使用 CSS 或 IMG 标签来实现。

【讨论】：