Совет разработчиков React: легко оптимизируйте и конвертируйте SVG в JSX

Вот небольшой совет по использованию SVG в React. Разметка SVG должна быть JSX-совместимой, то есть такие свойства SVG, как fill-opacity, необходимо преобразовать в fillOpacity и т. Д. Обновлять их вручную сложно, поэтому вот простой рабочий процесс:

Шаг 1. Используйте SVGOMG для оптимизации SVG

Когда вы берете ресурс SVG прямо из Sketch, это ужасно неэффективно. Вы можете вставить разметку или импортировать файл прямо в SVGOMG, бесплатный инструмент, который обычно сокращает 40% размера файла, а также создает более чистый код. Переключите представление разметки / кода, скопируйте вывод SVG и перейдите к шагу 2.

Шаг 2. Используйте svg2jsx, чтобы преобразовать SVG в действительный код React JSX

Этот бесплатный инструмент позволяет вставлять обычную разметку SVG прямо в редактор и мгновенно выводить действительный JSX. Он берет все надоедливые реквизиты, такие как fill-opacity, и конвертирует их в их JSX-аналог fillOpacity.

Вот и все, теперь возьмите этот вывод и поместите его в компонент React. Я не слишком много работаю с SVG, поэтому не проверял, есть ли конвертер / оптимизатор, встроенный в редактор Atom.

Вот краткий пример простого значка поиска в Sketch:

Исходный вывод SVG из Sketch:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>Group 2</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g id="Nav-Bar" transform="translate(-19.000000, -315.000000)" stroke="#333333">
            <g id="Group-2" transform="translate(20.000000, 316.000000)">
                <circle id="Oval" cx="5.56521739" cy="6.06086957" r="5.56521739"></circle>
                <path d="M9,10.4956522 L15.5043478,17" id="Shape"></path>
            </g>
        </g>
    </g>
</svg>

Оптимизированная разметка SVG из SVGOMG ( 465 байт → 226 байт 48,6%)

<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
  <g fill="none" fill-rule="evenodd" stroke="#333" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
    <circle cx="5.565217" cy="6.06087" r="5.565217"/>
    <path d="M9 10.495652L15.504348 17"/>
  </g>
</svg>

SVG преобразован в JSX с помощью svg2jsx

<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'>
    <g fill='none' fillRule='evenodd' stroke='#333' strokeLinecap='round'
    strokeLinejoin='round' transform='translate(1 1)'>
        <circle cx='5.565' cy='6.061' r='5.565' />
        <path d='M9 10.495652L15.504348 17' />
    </g>
</svg>