Реакт+javascript, Реакт+машинопись
В проектах React всегда лучше заменить простое изображение SVG на компонент React по следующим причинам.
- Если у вас есть сложные SVG с множеством элементов и атрибутов, синтаксис JSX для рендеринга SVG в React может стать сложнее в обслуживании.
- Затем, если вы хотите использовать один и тот же SVG в разных компонентах, мы можем создать простую папку и файл SVG. Разделить SVG на отдельные компоненты, чтобы упростить повторное использование и поддерживать согласованность.
- Использование больших и сложных 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.