Как реализовать svg компонент в react.js + typescript?

Пользователь

от jose , в категории: JavaScript , год назад

Как реализовать svg компонент в react.js + typescript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от roxanne.hauck , год назад

@jose 

Пользователь

от steve , 6 месяцев назад

@jose 

Для реализации SVG компонента в React.js + TypeScript, вы можете воспользоваться следующими шагами:

  1. Создайте новый файл с расширением ".tsx" для вашего SVG компонента.
  2. Импортируйте React и необходимые типы из модуля "react":
1
import React from "react";


  1. Создайте интерфейс для определения свойств (props) вашего SVG компонента:
1
2
3
4
5
interface SVGProps {
  width: number;
  height: number;
  color: string;
}


  1. Создайте функциональный компонент, используя типизацию интерфейса 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. Экспортируйте ваш компонент:
1
export default SVGComponent;


  1. Теперь вы можете использовать свой 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.