使用 SVG 创建图标按钮的“最佳实践”方法是什么？

Question

我知道使用 SVG 创建图标按钮的两种方法：

方法 1 - 将 SVG 导入到文件中并将其作为按钮的子元素，使用 CSS 关闭大部分按钮样式（或重新设置样式以呈现您需要的外观）。

方法 2 - 在按钮 CSS 样式中使用 SVG background-image，也许可以在视觉上隐藏按钮的文本，以使辅助技术可以访问按钮。

除了方法 2 中无法使用 CSS 对 SVG 应用一些颜色更改之外，每种方法都有什么优点或缺点吗？是否有“最佳实践”方法可供考虑？

Answer 1

方法三

引用Spritesheet 中的SVG 文件或图标https://css-tricks.com/svg-sprites-use-better-icon-fonts/

<img src='icon.svg'>

方法4

将 SVG 作为 DataURI 注入 - https://css-tricks.com/lodge/svg/09-svg-data-uris/

<img src="data:image/svg+xml;<svg viewBox='' ... </svg>">

方法5

使用对象（或嵌入）标签

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

方法6

使用 Web 组件加载文件并使用方法 #1 进行注入

<load-file src="//load-file.github.io/heart.svg">

https://dev.to/dannyengelman/load-file-web-component-add-external-content-to-the-dom-1nd

方法7

使用我的（未经许可的宠物项目）https://iconmeister.github.io/ <svg-icon > Web 组件（所有现代浏览器都支持），它将在源文件中包含所有 SVG 图标数据。

对于每个图标，您可以选择是否要创建裸 SVG方法 1
或将 SVG 作为 datauri 注入 IMG src方法 4。

所以这是一个单一的组件文件下载！无需外部 SVG 或任何库。

示例代码工具栏位于：https://jsfiddle.net/WebComponents/5ct36swL/

所有 SVG 都可以使用属性和属性以及CSS/属性进行样式设置

（这会设置方法 4 IMG 的样式，因为整个 IMG src 都被重新创建（不是 CSS 更改！）