Блог

В настоящее время я создаю компонент значков для своего приложения React. Он получит path строку as 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> внутри a <span> , или каждый стиль, который я мог бы применить к a <span> , я также могу применить к <svg> напрямую? Например: отображение, положение и т. Д. Я буду использовать styled-components для его стилизации.

Что-то вроде:

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

КОРОТКИЙ ОТВЕТ

Нет, я не верю, что вы получаете какие-либо возможности CSS-стиля от использования любого из них. Но вы получаете семантические преимущества, которые принесут преимущества SEO и доступности.

ДЛИННЫЙ ОТВЕТ

На мой взгляд, вы должны обернуть их в span элемент. Это потому span , что это более семантически правильно.

Это следующее из W3:

Тег определяет раздел или раздел в HTML-документе.

Лично я бы не стал думать о an svg как о подразделении или разделе в HTML-документе.

Если бы мне пришлось пытаться оправдать использование a span поверх a 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 что останется прежним. И в вашем компоненте, где он будет использоваться, используйте его в приведенном выше примере.

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