Как добавить эффект свечения к SVG-иконке?

Для добавления эффекта свечения к SVG-иконке в React-приложении через использование масок, вам потребуется создать маску и применить ее к иконке.

Вот пример кода, который демонстрирует этот процесс:

1. Создайте файл `Icon.jsx`, в котором определите компонент иконки SVG:

```jsx
import React from 'react';

const Icon = () => (
  <svg>
    // Здесь размещается содержимое вашей иконки
  </svg>
);

export default Icon;
```

2. Создайте файл `GlowMask.jsx`, в котором определите компонент маски свечения:

```jsx
import React from 'react';

const GlowMask = () => (
  <svg>
    <mask id="glow-mask">
      <rect x="0" y="0" width="100%" height="100%" fill="white" />
      <circle cx="50%" cy="50%" r="40%" fill="black" />
    </mask>
  </svg>
);

export default GlowMask;
```

3. В `Icon.jsx` импортируйте компонент `GlowMask` и примените маску к иконке:

```jsx
import React from 'react';
import GlowMask from './GlowMask';

const Icon = () => (
  <svg>
    <defs>
      <GlowMask />
    </defs>

    <g mask="url(#glow-mask)">
      // Здесь размещается содержимое вашей иконки
    </g>
  </svg>
);

export default Icon;
```

Теперь ваша иконка будет иметь эффект свечения, примененный через маску. Вы можете настроить параметры и внешний вид маски, изменяя содержимое компонента `GlowMask`.

В React-приложении вы можете добавлять свечение к SVG-иконкам с помощью инструментов React и CSS. Вот, как это можно сделать:

1. Создайте компонент с именем Icon, который будет отображать ваши SVG-иконки. В этом компоненте можно использовать свойства mask-image и другие, чтобы настроить свечение иконок.

```
import React from 'react';

const Icon = ({ name }) => {
  const iconPath = `/path/to/icons/${name}.svg`;

  return (
    <div className="icon">
      <img className="icon-image" src={iconPath} alt={name} />
    </div>
  );
};

export default Icon;
```

2. В вашем основном компоненте, где вы хотите использовать эти SVG-иконки, просто передайте имя иконки в компонент Icon. Например:

```
import React from 'react';
import Icon from './Icon';

const App = () => {
  return (
    <div>
      <Icon name="add-user" />
      <Icon name="delete" />
      {/* Другие иконки */}
    </div>
  );
};

export default App;
```

3. В CSS вы можете добавить стили для свечения иконок, используя селектор .icon. Например:

```
.icon {
  display: inline-block;
  mask-position: center center;
  mask-size: 100%;
  mask-repeat: no-repeat;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
}

.icon-image {
  mask-image: url('/path/to/mask.svg');
}
```

Обратите внимание, что вам нужно заменить /path/to/icons/${name}.svg на путь к вашим SVG-иконкам и /path/to/mask.svg на путь к вашей маске SVG.

Теперь вы можете использовать компонент Icon с любым именем и получите соответствующую SVG-иконку со свечением стилями. Этот подход позволяет вам использовать иконки декларативно, передавая только имя иконки, а не создавая отдельный компонент для каждой иконки.