Про цей інструмент
Інструмент SVG у компонент JSX перетворює сиру розмітку SVG на чистий компонент React так само, як це робить SVGR, але повністю у вашому браузері, нічого не завантажуючи. Вставте іконку, експортовану з дизайн-інструмента, і отримайте компонент, який можна імпортувати та стилізувати. Він розбирає SVG за допомогою DOMParser і повідомляє про зрозумілу помилку, якщо розмітка некоректна.
Кожен атрибут SVG з дефісом чи простором імен перетворюється на camelCase на його назву в React — stroke-width на strokeWidth, fill-rule на fillRule, clip-path на clipPath, stop-color на stopColor, xlink:href на xlinkHref, xmlns:xlink на xmlnsXlink — тоді як атрибути data-* і aria-* лишаються як є. Рядки інлайн-стилів стають об'єктами стилів, порожні елементи на кшталт path і circle самозакриваються, а пропси поширюються на корінь <svg {...props}>, тож компонент лишається налаштовуваним. Опційні перемикачі дозволяють замінити жорстко задані значення fill і stroke на currentColor (щоб іконка успадковувала колір тексту), прибрати width і height, щоб вона масштабувалася під контейнер, і обгорнути компонент у forwardRef, щоб відкрити доступ до вузла <svg>, що лежить в основі.
Оберіть вивід JavaScript чи TypeScript: варіант TypeScript типізує пропси як React.SVGProps<SVGSVGElement>, а з увімкненим forwardRef використовує forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>. Компонент видається як експортована стрілкова функція (export const Icon = (props) => (...)), з обраною вами назвою та відступом, готовий до вставлення в модуль іконок.