Позволяет ли обтекание моих значков 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}/>

Файл компонента: Icon.js

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

ВОПРОС

Получаю ли я какие-либо возможности стилевого оформления CSS или гибкость, оборачивая возвращаемое <svg> в <span> или все стили, которые я могу применить к <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 рекомендации для компонента 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 компоненте.Так что Component File: Icon.js останется прежним.И в вашем Компоненте, где он будет потребляться, используйте его в приведенном выше примере.

Надеюсь, это поможет.