Реакт+javascript, Реакт+машинопись

В проектах React всегда лучше заменить простое изображение SVG на компонент React по следующим причинам.

  1. Если у вас есть сложные SVG с множеством элементов и атрибутов, синтаксис JSX для рендеринга SVG в React может стать сложнее в обслуживании.
  2. Затем, если вы хотите использовать один и тот же SVG в разных компонентах, мы можем создать простую папку и файл SVG. Разделить SVG на отдельные компоненты, чтобы упростить повторное использование и поддерживать согласованность.
  3. Использование больших и сложных SVG непосредственно в React может повлиять на начальное время загрузки и производительность вашего приложения.

Пришло время преобразовать изображения SVG в компоненты React

SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
 .st0{fill:#747474;}
</style>
<path class="st0" d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M256,456c-110.5,0-200-89.5-200-200
 S145.5,56,256,56s200,89.5,200,200S366.5,456,256,456z"/>
</svg>

SVG ДЛЯ РЕАКТИВНЫХ КОМПОНЕНТОВ:

import React from 'react';

const CheckRegular = () => {
  return (
    <svg
      version="1.1"
      id="Layer_1"
      focusable="false"
      width="21"
      height="21"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
    >
      <path
        fill="#747474"
        d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M256,456c-110.5,0-200-89.5-200-200
  S145.5,56,256,56s200,89.5,200,200S366.5,456,256,456z"
      />
    </svg>
  );
};

export default React.memo(CheckRegular);

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

Почему мы использовали React.memo для изображения SVG

В React часто желательно предотвратить ненужную повторную визуализацию этого компонента при повторной визуализации родительского компонента. Это связано с тем, что компоненты SVG могут иметь сложную структуру и вычисления, а их ненужный повторный рендеринг может повлиять на производительность.

В следующий раз, когда вы будете использовать SVG, измените их на компоненты React.