Как темизировать иконки разноцветные svg?

Question

mletov @mletov

CSS
SVG

Как темизировать иконки разноцветные svg?

Пожалуйста, подскажите:
Есть иконки svg. Иконка может состоять из 3-4 цветов. Без градиентов.
И нужно, чтобы при смене темы цвета иконки менялись. Например, была иконка светофора "красный-желтый-зеленый", а стала "белый-синий-красный".

В принципе, решение у меня есть. Присвоить разным кускам svg свои css классы, и менять при смене темы описание стиля класса.

<polygon points="28,20 10,20 10,4 28,4 20,12  class="polygon-1" />

Просто хотелось бы узнать, не велосипед ли я придумываю, может есть примеры, как это уже реализовано, например, в каких-нибудь ui фреймворках.

Вопрос задан 14 нояб. 2023
79 просмотров

3 комментария

Подписаться 2 Простой 3 комментария

Kentavr16 @Kentavr16

Не встречал инструментов для такого. Да в принципе инструменты и не нужны. имхо проще прописать руками все в соответствии со своими запросами. Так именно нужная часть свг будет меняться. Откуда посторонний человек может знать, хотите вы правый или левый глаз аватарки окрасить в черный? чтобы было проще цвета можно сохранить в переменные css и подставлять нужные при смене темы.

Написано 14 нояб. 2023
Ankhena @Ankhena Куратор тега CSS

svg поддерживают кастомные свойства css внутри себя.
Пишете что-то типа fill="var(accent-color-1)"

Написано 14 нояб. 2023

ProjectSoft @ProjectSoft

mletov не известно, что понимается под "темой".
Тема браузера (тёмная, светлая, системная) или тема оформления шаблона.
В фреймворках под тему браузера сделано так:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<title>SVG ICON</title>
		<style type="text/css">
			:root {
				--body-bg: #FFFFFF;
				--traffic-black: #464F5D;
				--traffic-grey: #2F3744;
				--traffic-red: #FF0000;
				--traffic-yellow: #FFFF00;
				--traffic-green: #00FF00;
			}
			@media (prefers-color-scheme: dark) {
				:root {
					--body-bg: #000000;
					--traffic-black: #CCCCCC;
					--traffic-grey: #FFFFFF;
					--traffic-red: #FFFFFF;
					--traffic-yellow: #0000FF;
					--traffic-green: #FF0000;
				}
			}
			body {
				background-color: var(--body-bg);
			}
			.svg-black{
				fill: var(--traffic-black);
			}
			.svg-grey{
				fill: var(--traffic-grey);
			}
			.svg-red{
				fill: var(--traffic-red);
			}
			.svg-yellow{
				fill: var(--traffic-yellow);
			}
			.svg-green{
				fill: var(--traffic-green);
			}	
		</style>
	</head>
	<body>
		<div>
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
				<path class="svg-black" d="M342.1,512H169.9c-11,0-19.9-8.9-19.9-19.9V19.9c0-11,8.9-19.9,19.9-19.9h172.1c11,0,19.9,8.9,19.9,19.9v472.3
					C361.9,503.1,353,512,342.1,512"/>
				<path class="svg-grey" d="M44.1,53c0,29.3,23.7,53,53,53h8.8c24.4,0,44.1,19.7,44.1,44.1V53H44.1z M44.1,203c0,29.3,23.7,53,53,53h8.8
					c24.4,0,44.1,19.7,44.1,44.1V203L44.1,203L44.1,203z M44.1,353.1c0,29.3,23.7,53,53,53h8.8c24.4,0,44.1,19.7,44.1,44.1v-97.1
					L44.1,353.1L44.1,353.1z M467.9,53c0,29.3-23.7,53-53,53h-8.8c-24.4,0-44.1,19.7-44.1,44.1V53H467.9z M467.9,203
					c0,29.3-23.7,53-53,53h-8.8c-24.4,0-44.1,19.7-44.1,44.1V203L467.9,203L467.9,203z M467.9,353.1c0,29.3-23.7,53-53,53h-8.8
					c-24.4,0-44.1,19.7-44.1,44.1v-97.1L467.9,353.1L467.9,353.1z"/>
				<path class="svg-green" d="M309,406.1c0,29.3-23.7,53-53,53s-53-23.7-53-53s23.7-53,53-53S309,376.8,309,406.1"/>
				<path class="svg-yellow" d="M309,256c0,29.3-23.7,53-53,53s-53-23.7-53-53s23.7-53,53-53S309,226.7,309,256"/>
				<path class="svg-red" d="M309,105.9c0,29.3-23.7,53-53,53s-53-23.7-53-53s23.7-53,53-53S309,76.7,309,105.9"/>
			</svg>
		</div>
	</body>
</html>

Переключите тему браузера (Chrome, Yandex, Opera и им подобных) с светлого на тёмный и обратно.

Написано 14 нояб. 2023

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+3 ещё

Простой
Возникла поломка файлов для установки пакетов в редакторе Atom, есть ли решение данной проблемы?
- 1 подписчик
- 6 часов назад
- 42 просмотра
1

ответ
CSS

Средний
Как загруглить края полосы прокрутки?
- 1 подписчик
- 9 часов назад
- 35 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- 23 часа назад
- 86 просмотров
0

ответов
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- вчера
- 48 просмотров
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- вчера
- 97 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- вчера
- 35 просмотров
1

ответ
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- вчера
- 54 просмотра
0

ответов
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 24 апр.
- 62 просмотра
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 24 апр.
- 70 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Дизайн интерьера для заведения

27 апр. 2024, в 21:24

150000 руб./за проект

Нужно добавить несколько параллакс эффектов

27 апр. 2024, в 21:12

500 руб./за проект

Доработать функционал загрузки прайсов в БД

27 апр. 2024, в 20:40

5000 руб./за проект

Не встречал инструментов для такого. Да в принципе инструменты и не нужны. имхо проще прописать руками все в соответствии со своими запросами. Так именно нужная часть свг будет меняться. Откуда посторонний человек может знать, хотите вы правый или левый глаз аватарки окрасить в черный? чтобы было проще цвета можно сохранить в переменные css и подставлять нужные при смене темы.
svg поддерживают кастомные свойства css внутри себя.
Пишете что-то типа fill="var(accent-color-1)"

Как темизировать иконки разноцветные svg?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт