SVG (масштабируемая векторная графика) — мощный инструмент для создания векторной графики и управления ею в веб-приложениях. В сочетании с React он открывает мир возможностей для создания динамических и интерактивных визуальных элементов. В этой статье блога мы рассмотрим различные методы настройки SVG в React, используя разговорный язык и практические примеры кода.

1. Встроенный SVG:
   Один из распространенных подходов — прямое встраивание разметки SVG в компоненты React. Это позволяет легко настраивать и манипулировать с помощью синтаксиса JSX React. Например:

import React from 'react';
const MyComponent = () => {
  return (
    <svg width="200" height="200">
      <circle cx="100" cy="100" r="50" fill="blue" />
    </svg>
  );
};
export default MyComponent;

2. SVG как компонент:
   Другой метод — создать повторно используемые компоненты SVG в React. Такой подход способствует повторному использованию кода и модульности. Вот пример:

import React from 'react';
const Circle = ({ cx, cy, r, fill }) => {
  return <circle cx={cx} cy={cy} r={r} fill={fill} />;
};
export default Circle;

Чтобы использовать компонент Circle:

import React from 'react';
import Circle from './Circle';
const MyComponent = () => {
  return (
    <svg width="200" height="200">
      <Circle cx={100} cy={100} r={50} fill="blue" />
    </svg>
  );
};
export default MyComponent;

3. Стилизация SVG.
   Вы можете применять стили CSS к элементам SVG, используя встроенные стили или классы CSS. Вот пример использования встроенных стилей:

import React from 'react';
const MyComponent = () => {
  return (
    <svg width="200" height="200">
      <circle
        cx="100"
        cy="100"
        r="50"
        fill="blue"
        style={{ stroke: 'black', strokeWidth: 2 }}
      />
    </svg>
  );
};
export default MyComponent;

4. Управление SVG с помощью состояния React:
   Вы можете динамически обновлять атрибуты SVG, используя состояние React. Вот пример, который меняет цвет круга при нажатии кнопки:

import React, { useState } from 'react';
const MyComponent = () => {
  const [fill, setFill] = useState('blue');
  const handleClick = () => {
    setFill('red');
  };
  return (
    <svg width="200" height="200">
      <circle cx="100" cy="100" r="50" fill={fill} />
      <button onClick={handleClick}>Change Color</button>
    </svg>
  );
};
export default MyComponent;

Настройка SVG в React открывает безграничные возможности для создания визуально потрясающих и интерактивных веб-приложений. Независимо от того, решите ли вы встроить SVG, создать компоненты SVG, стилизовать элементы SVG или манипулировать SVG с помощью состояния React, комбинация SVG и React дает разработчикам возможность создавать богатые, динамичные и масштабируемые пользовательские интерфейсы.