Как сделать свечение SVG-иконки?
Есть 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); } |
%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)?
Дополнительно:
Не ясна реализация
<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); } |
%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)?
import { ReactComponent as YourSvg } from '../../svg/add-user.svg'; // ... <YourSvg className={styles.glowingIcon} /> |
import { ReactComponent as YourSvg } from '../../svg/add-user.svg'; // ... <YourSvg className={styles.glowingIcon} />
заключается в том, что для всех SVG нужно вручную переделывать цвет заливки/обводки, т.к. не все они белые
<img src={`svg/${props.name}.svg`} className={styles.glowingIcon} /> |
<img src={`svg/${props.name}.svg`} className={styles.glowingIcon} />
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать свечение SVG-иконки, можно использовать фильтры в CSS. Ниже приведен пример кода, который позволит добавить эффект свечения к вашей SVG-иконке:
В данном примере мы создаем фильтр с помощью тега , который применяет размытие к иконке с помощью . Затем мы объединяем размытое изображение с оригинальной иконкой с помощью , чтобы создать эффект свечения.
Вы также можете настроить параметры фильтра, такие как радиус размытия (stdDeviation) и цвет свечения, чтобы добиться нужного эффекта. Не забудьте изменить значение атрибута "fill" в теге на цвет вашей иконки.
Надеюсь, это поможет вам добавить свечение к вашей SVG-иконке!