将 SVG 图标包装在 SPAN 中是否会为我提供更多的样式功能和灵活性?

Question

我目前正在为我的 React 应用程序构建一个图标组件。它将接收一个path字符串作为props，并使用它呈现<svg>。

像这样：

常量文件：

export const ICONS = {
BUBBLE: 'M512 64c282.77 0 512 186.25 ...',
ENLARGE2: 'M1024 0v416l-160-160-192 192-96-96 ...',

该组件将按如下方式使用：

import Icon from './Icon.js';
import {ICONS} from '../../constants';
<Icon icons={ICONS.BUBBLE}/>

组件文件：图标.js

const Icon = props => (
<svg width="22" height="22" viewBox="0 0 1024 1024">
<path d={icons[props.icon]}></path>
</svg>
);

问题

我是否通过将返回的<svg>包装在<span>中获得任何 CSS 样式功能或灵活性，或者我可以应用于<span>的每个样式我也可以直接应用于<svg>？例如：显示、位置等。我将使用样式化组件来设置它的样式。

像这样：

<span>
<svg width="22" height="22" viewBox="0 0 1024 1024">
<path d={icons[props.icon]}></path>
</svg>
</span>

Answer 1

简短的回答

不，我不相信你从使用任何一个中获得任何CSS样式功能。但是你确实获得了语义上的好处，这将带来SEO和可访问性的好处。

长答案

在我看来，您应该将它们包装在一个span元素中。这是因为span语义更正确。

这是 W3 中的以下内容：

标记定义 HTML 文档中的分区或节。

我个人不会将svg视为HTML文档中的部门或部分。

如果我必须尝试证明在图标div上使用span是合理的，我会指出accordion组件(或此链接上的任何其他示例)wai-aria最佳实践。可以在这里找到。在下面的链接中，他们给出了这个例子：

<h3>
<button aria-expanded="true"
class="Accordion-trigger"
aria-controls="sect1"
id="accordion1id">
<span class="Accordion-title">
Personal Information
<span class="Accordion-icon"></span>
</span>
</button>
</h3>

如您所见，他们使用的是span元素。在这些标签中，我希望有一个图标。因此，使用您的示例，它看起来像这样：

<StyledIconSpan class="Accordion-icon">
<Icon icons={ICONS.BUBBLE}/>
</StyledIconSpan>

我会将StyledIconSpan放在组件级别，而不是Icon组件中。所以Component File: Icon.js将保持不变。在将使用它的组件中，在上面的示例中使用它。

希望这有帮助。