Как изменить цвет у сложных спрайтовых иконок в отдельном файле?

Question

[Genri_Rus]

Вот пример иконок ссылка
У иконок несколько path и как можно задать разный цвет данным иконкам?
P.S. Спрайт с иконками подключается как svg файл.

Comments

[Ankhena]

Либо через currentColor либо стереть fill в исходнике, задать класс и задавать классу fill в стилях.

[Genri_Rus]

Ankhena, доброго времени суток.

Либо через currentColor либо стереть fill в исходнике

А как сделать разный цвет для круга и название у логотипа?

задать класс и задавать классу fill в стилях.

А если спрайт подключается как отдельный svg файл, там же нельзя к path обратиться.

[Ankhena]

Genri_Rus, если реальный пример это всё таки не круг с лого, то инлайнить.

p.s. символьные спрайты устарели, можно использовать стеки, которые работают не только в use.
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...
Но это не к вашей проблеме.

[Genri_Rus]

Ankhena,

если реальный пример это всё таки не круг с лого

В реальном примере при наведении на иконку цвет у круга должен измениться.

[Ankhena]

Genri_Rus, если реальный пример это круг и лого, то зачем делать круг в svg? Если это обычный border-radius, а цвет иконки меняйте масками.

[Genri_Rus]

Ankhena, тоже думал об этом)
Просто иконки в спрайте будут разные (даже с градиентом), обновил ссылку

[Ankhena]

Genri_Rus, пока, всё что есть на текущий момент в примере рисуется на css.

[Genri_Rus]

Ankhena, а в данном примере?
Все можно с помощью псевдоэлементов сделать?

[Ankhena]

Genri_Rus, ну вы как, можете закрасить кружочек градиентом на css?

[Genri_Rus]

Ankhena, в фигме иконка pinterest цельная и ее нельзя отделить от кружочка.
У данной иконки меняется только цвет у кружочка.

[Ankhena]

Genri_Rus, давайте так: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
А дальше сами. Ну либо уже с конкретикой, как вы всё это пытались применить.

Answer 1

[Александр Васильев]

обычный currentColor в значении fill и color для svg в стилях
если несколько, то как-то так fill="var(--color-6)" и в стилях сответственно

svg{
       --color-6: white;
     
    }

Comments

[Genri_Rus]

если несколько, то как-то так fill="var(--color-6)" и в стилях сответственно

Доброго времени суток, а других вариантов без использования переменных нету?

[Александр Васильев]

Genri_Rus, не знаю. Либо инлайн, либо как я сказал уже. Это самые простые варианты.

[Genri_Rus]

Александр Васильев, понял, спасибо большое.

[Александр Васильев]

Genri_Rus, пожалуйста