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}/>

组件文件：Icon.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文档中的分区或部分。

如果我不得不尝试在span上使用div来代替图标，那么我会指出wai-aria组件（或任何其他）的最佳做法此链接上的其他示例）。可以在here中找到。在下面的链接中，他们给出了这个示例：

accordion

如您所见，它们正在使用<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将保持不变。在您将要使用它的组件中，在上面的示例中使用它。

希望这会有所帮助。

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

1 个答案: