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

【问题标题】：What is the 'best practice' way of creating an icon button with an SVG?用 SVG 创建图标按钮的“最佳实践”方法是什么？
【发布时间】：2021-06-19 22:40:48
【问题描述】：

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

方法 1 - 将 SVG 导入文件并将其放置为按钮的子项，使用 CSS 关闭大多数按钮样式（或重新设置样式，但您需要它的外观)。

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

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

【问题讨论】：

标签： css svg button icons

【解决方案1】：

方法3

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

<img src='icon.svg'>

方法四

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

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

方法五

使用对象（或嵌入）标签

<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/CustomElementsExamples/6uwr3ytL/

所有 SVG 都可以设置样式，属性 AND 属性 AND CSS/properties

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

【讨论】：