Как темизировать иконки разноцветные 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 фреймворках.

Вопрос задан более года назад
85 просмотров

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

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

Kentavr16 @Kentavr16

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

Написано более года назад
Ankhena @Ankhena Куратор тега CSS

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

Написано более года назад

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 и им подобных) с светлого на тёмный и обратно.

Написано более года назад

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

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

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

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

CSS

Простой
Как лучше отобразить создаваемый нажатием div в grid контейнере?
- 1 подписчик
- 16 часов назад
- 43 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- вчера
- 137 просмотров
0

ответов
HTML

+1 ещё

Средний
Как создать такую вот кнопку как на изображении?
- 2 подписчика
- вчера
- 203 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Как открыть CSS селектор при помощи onclick?
- 1 подписчик
- вчера
- 98 просмотров
1

ответ
CSS

Простой
Как заменить псевдокласс has?
- 1 подписчик
- вчера
- 77 просмотров
1

ответ
CSS

Простой
Обязательно ли создавать контейнер?
- 1 подписчик
- 14 дек.
- 86 просмотров
1

ответ
CSS

Простой
Как добиться линий, как на скрине?
- 1 подписчик
- 14 дек.
- 143 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Делаю видеоплеер и в полноэкранном режиме почему-то не видит div с моими контролами?
- 1 подписчик
- 13 дек.
- 80 просмотров
2

ответа
CSS

Простой
Не могу разобраться почему before не становится по центру li (Оставил код ниже чтобы более понятно)?
- 1 подписчик
- 13 дек.
- 140 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как добавить анимацию div?
- 1 подписчик
- 13 дек.
- 94 просмотра
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

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

div. • Ставрополь

от 40 000 до 90 000 ₽

Разработка программы для Windows

18 дек. 2024, в 10:44

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

Доработка веб-ПО на rust + vue.js

18 дек. 2024, в 10:02

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

Доработка веб-ПО на GoLang / Vue.js

18 дек. 2024, в 09:56

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

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

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

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

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

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