Как вернуть нативный цвет svg иконки?

324

09 апреля 2017, 00:48

Добрый день, можно ли вернуть стандартный цвет иконки? Если svg закидываю через тег svg цвет отображается должным образом, но я пропихиваю иконку только через use, не кидаю ее в телом куском svg

mixin icon(name)
  svg(class="icon icon_" + name)&attributes(attributes)
    use(xlink:href=config.path.images + "/icons.svg#" + name)

тогда иконка заливается одним цветом, как это исправить? Выше иконка пропихивается через use, нижний вариант так как есть, те помещаю тег svg в тело документа.

Answer 1

Как только вы используете команду use объект попадает в shadow DOM и стилизация иконки не работает. Для того, чтобы устранить эту проблему необходимо:

Удалить в коде иконки все атрибуты стилизации у патчей, полигонов и т.д все инлайновые стили - fill, stroke
Добавить в таблице стилей path{ fill:inherit; stroke:inherit; }
Стилизацию иконок уже делать в таблице стилей на уровне классов иконок
В шапку файлов иконок добавить строчку, указывающую на внешнюю таблицу стилей
<?xml-stylesheet type="text/css" href="style.css"?>
1. Файл таблицы стилей и файлы SVG лучше разместить в одной папке, так как браузеры чувствительны к этому, больше других chrome