Как реализовать svg компонент в react.js + typescript?
Как реализовать svg компонент в react.js + typescript?
2 ответа
от
steve ,
4 месяца назад
@jose
Для реализации SVG компонента в React.js + TypeScript, вы можете воспользоваться следующими шагами:
- Создайте новый файл с расширением ".tsx" для вашего SVG компонента.
- Импортируйте React и необходимые типы из модуля "react":
1
|
import React from "react"; |
- Создайте интерфейс для определения свойств (props) вашего SVG компонента:
1 2 3 4 5 |
interface SVGProps {
width: number;
height: number;
color: string;
}
|
- Создайте функциональный компонент, используя типизацию интерфейса SVGProps:
1 2 3 4 5 6 7 |
const SVGComponent: React.FC<SVGProps> = ({ width, height, color }) => {
return (
<svg width={width} height={height}>
<rect width={width} height={height} fill={color} />
</svg>
);
};
|
- Экспортируйте ваш компонент:
1
|
export default SVGComponent; |
- Теперь вы можете использовать свой SVG компонент в других компонентах:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React from "react";
import SVGComponent from "./SVGComponent";
const App: React.FC = () => {
return (
<div>
<h1>Мой SVG компонент</h1>
<SVGComponent width={200} height={200} color="red" />
</div>
);
};
export default App;
|
Теперь у вас есть готовый SVG компонент, который вы можете использовать в своем приложении React.js + TypeScript.
15