Как сделать свечение SVG-иконки?

Question

[shsv382]

Есть React-приложение, в котором SVG-иконки добавляются через mask.
<i className="icon-add-user" />

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

.icon-add-user {
    @extend %icon;
    mask-image: url(../svg/add-user.svg);
}

Как мне сделать иконки со свечением как на картинке?
Как это реализовать в React-приложении? И как это сделать наиболее декларативным способом, чтобы просто передать в компонент имя иконки, а не делать отдельный компонент для каждой SVG (на данный момент их 30)?

Comments

[Максим]

Не ясна реализация

[Ankhena]

Видимо, не вставлять масками

[shsv382]

Ankhena, спасибо, конечно, но вопрос стоит "как сделать?", а не "как не надо делать?". Если у вас есть более содержательные мысли на этот счет, был бы благодарен!

[shsv382]

Максим, есть множество svg-иконок, которые вставляются следующим образом
<i className="icon-add-user" />

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

.icon-add-user {
    @extend %icon;
    mask-image: url(../svg/add-user.svg);
}

Теперь появилась необходимость сделать иконки со свечением


Вопрос: как это реализовать в React-приложении? И как это сделать наиболее декларативным способом, чтобы просто передать в компонент имя иконки, а не делать отдельный компонент для каждой SVG (на данный момент их 30)?

[Ankhena]

shsv382, да, использовать drop-shadow

[shsv382]

Ankhena, за drop-shadow спасибо, но тогда вопрос другой: как сделать это более декларативно? То есть, я не хочу для каждой отдельной страницы импортировать отдельно нужные SVG, я хочу сделать компонент, принимающий на входе имя SVG-иконки (либо имя файла), и возвращающий иконку со свечением

[shsv382]

shsv382, еще один минус вставки через импорт как компонент

import { ReactComponent as YourSvg } from '../../svg/add-user.svg';
// ...
<YourSvg className={styles.glowingIcon} />

заключается в том, что для всех SVG нужно вручную переделывать цвет заливки/обводки, т.к. не все они белые

[shsv382]

В общем, самое близкое, что удалось реализовать - это скопировать svg в public, поменять всем цвет заливки на белый (fill: #ffffff), и вставлять картинкой, прикрутив drop-shadow (спасибо Ankhena)

<img src={`svg/${props.name}.svg`} className={styles.glowingIcon} />