Иногда мы хотим встроить SVG в наше приложение React.
В этой статье мы рассмотрим, как встроить SVG в приложение React.
Добавьте их напрямую с помощью JSX
Мы можем встроить SVG напрямую с помощью JSX в наше приложение React.
Например, мы можем написать:
import React from "react";
const SvgWithXlink = (props) => {
return (
<svg
width="100%"
height="100%"
xmlns="https://www.w3.org/2000/svg"
xmlnsXlink="https://www.w3.org/1999/xlink"
>
<style>{`.classA { fill:${props.fill} }`}</style>
<defs>
<g id="Port">
<circle style={{ fill: "inherit" }} r="10" />
</g>
</defs>
<text y="15">black</text>
<use x="70" y="10" xlinkHref="#Port" />
<text y="35">{props.fill}</text>
<use x="70" y="30" xlinkHref="#Port" className="classA" />
<text y="55">blue</text>
<use x="70" y="50" xlinkHref="#Port" style={{ fill: "blue" }} />
</svg>
);
};
export default function App() {
return (
<div className="App">
<SvgWithXlink fill="green" />
</div>
);
}
чтобы встроить SVG в компонент SvgWithXLink.
Мы просто помещаем элементы, необходимые для встраивания SVG в компонент.
И мы можем передавать реквизиты в элементы, как и в любые другие элементы или компоненты HTML.
У нас есть circle для добавления кругов.
А атрибут xLinkHref позволяет нам обвести id элемента g.
x и y — координаты расположения элементов.
В App мы добавляем SvgWithXLink с реквизитом fill, установленным на 'green'.
Теперь мы видим 3 круга.
Заключение
Мы можем встроить SVG напрямую с помощью JSX в наше приложение React.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
