使用 SVG 创建图标按钮的“最佳实践"方式是什么? [英] What is the 'best practice' way of creating an icon button with an SVG?
问题描述
我知道两种使用 SVG 创建图标按钮的方法:
方法 1 - 将 SVG 导入文件并将其作为按钮的子项，使用 CSS 关闭大多数按钮样式(或重新设置为您需要的样式)).
方法 2 - 在按钮 background-image CSS 样式中使用 SVG，也许可以在视觉上隐藏按钮的文本，以便辅助技术可以访问该按钮.
除了无法使用 CSS 对方法 2 中的 SVG 应用一些颜色更改之外，每种方法是否有优点或缺点?是否需要考虑最佳实践"方法?
方法三
引用 SVG 文件
或 spritesheet 中的图标
<img src="data:image/svg+xml;<svg viewBox='' ... </svg>">
方法 5
使用对象(或嵌入)标签
方法 6
使用 Web 组件加载文件并使用方法 #1 注入
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/属性
(这是方法 4 IMG 的样式，因为整个 IMG src 被重新创建(不是 CSS 更改！)
I know of two ways to create an icon button using an SVG:
Method 1 - Import the SVG into the file and place it as a child of the button, using CSS to switch off the majority of the buttons styles (or restyle to however you need it to look).
Method 2 - Use the SVG in the buttons background-image CSS style, perhaps having the text of the button visually hidden to make the button accessible to assistive technology.
Aside from not being able to use CSS to apply some colour changes to the SVG in method 2, is there any pro's or con's of each approach? Is there a 'best practice' approach to consider?
Method 3
Reference a SVG file
or icons in a spritesheet https://css-tricks.com/svg-sprites-use-better-icon-fonts/
<img src='icon.svg'>
Method 4
Inject SVG as DataURI - https://css-tricks.com/lodge/svg/09-svg-data-uris/
<img src="data:image/svg+xml;<svg viewBox='' ... </svg>">
Method 5
Use an Object (or Embed) tag
<object data="your.svg" type="image/svg+xml">
<img src="yourfallback.jpg" />
</object>
Method 6
Use a Web Component to load a file and inject with Method #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
Method 7
Use my (UNlicensed pet-project) https://iconmeister.github.io/ <svg-icon > Web Component (supported in all modern Browsers) that will include all SVG icon data in the source file.
For every icon you can choose if you want to create bare SVG Method 1
or inject the SVG as datauri into an IMG src Method 4.
So it is a single Component File download! No external SVGs or any libraries required.
Example code toolbar at: https://jsfiddle.net/CustomElementsExamples/6uwr3ytL/
All SVG can be styled, with attributes AND properties AND CSS/properties
(This does style Method 4 IMGs, because the whole IMG src is recreated (not on CSS changes!)
这篇关于使用 SVG 创建图标按钮的“最佳实践"方式是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
