Как покрасить SVG-иконку?

Question

[Алексей Николаев]

Доброго вечера.
Есть SVG-символ, который далее вставляется и используется через use. В общем, стандартный набор. Но есть одно "но" - он не реагирует на свойство color, вообще. Иконка упрощенно представляет собой кольцо, созданное через тэг path (да, я знаю, что для кругов path не используется, но иконки делались через иллюстратор путем конвертации путей из фотошопа, и не хотелось бы возиться с генерируемым кодом - работаем с тем, что есть).

Прочел, что необходимо убрать атрибуты fill, stroke, т.к. они имеют больший приоритет, нежели css. Ок, хорошо. Но поведение становится непонятным и неадекватным:
- если я убираю stroke у элемента path, исчезают все видимые элементы
- если я уберу и атрибут fill тоже, получается сплошной круг, а нужно кольцо
- во всех вышеперечисленных случаях ничего не реагирует на css-правило с color

Как покрасить иконку через css? Фиддл всего этого дела.

Answer 1

[Danila]

https://jsfiddle.net/nfkub464/
- во всех вышеперечисленных случаях ничего не реагирует на css-правило с color
всё верно, потому что оно отвечает за цвет текста

если нужно управлять цветом через color можно сделать так
https://jsfiddle.net/cfdg0q0n/1/

Comments

[Алексей Николаев]

Забавно, но ваш фиддл работает, а мой - нет, хотя код аналогичен - https://jsfiddle.net/f0nu5adq/5/ . Может, баг на jsfiddle?

[Danila]

Алексей Николаев: посмотрите внимательней, он не аналогичен

Answer 2

[Froggyweb]

Можно так если надо
.

icon {
  color: red;
}

svg use {
  fill: currentColor;
}

только нужно убрать fill="none" в SVG