Наши дизайнеры все еще юзают Скетч. Это боль для всех, он тупит, к нему нужен Zeplin и вот это вот все. Все наши иконки из скетча приходят в таком виде и мы их прогоняем через SVGR (https://github.com/gregberge/svgr) что бы получить реактовские компоненты:
<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="currentColor" stop-opacity="0.85" offset="0%">
</stop>
<stop stop-color="currentColor" offset="100%">
</stop>
</linearGradient>
<path d="M336.519312,459.519575 L332.332119,459.845638 C332.08759,459.86468 331.892977,460.058279 331.872656,460.302704 L331.522088,464.519515 C331.499511,464.791086 331.272508,465 331,465 L331,465 C330.728943,465 330.50456,464.789333 330.487486,464.518815 L330.222001,460.31263 C330.206295,460.063791 330.009661,459.864554 329.761051,459.845576 L325.480744,459.51884 C325.209515,459.498136 325,459.272019 325,459 L325,459 C325,458.727823 325.209321,458.501419 325.480663,458.480109 L329.762141,458.143872 C330.010269,458.124386 330.206285,457.925368 330.221998,457.676973 L330.487418,453.481181 C330.504531,453.210655 330.728933,453 331,453 L331,453 C331.272522,453 331.499548,453.208897 331.522177,453.480478 L331.872664,457.686919 C331.892992,457.930886 332.086978,458.124255 332.331008,458.143805 L336.519397,458.479354 C336.790819,458.501099 337,458.727709 337,459 L337,459 C337,459.27213 336.790621,459.498447 336.519312,459.519575 Z" id="path-2">
</path>
</defs>
<g id="All-Blocks-Kit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-325.000000, -453.000000)">
<g id="Shape-Copy">
<use fill="currentColor" xlink:href="#path-2">
</use>
<use fill="url(#linearGradient-1)" xlink:href="#path-2">
</use>
</g>
</g>
</g>
</svg>
SVG иконки мы немного правим руками, меняем цвет на
currentColor- что бы потом через propsы или css менять цвет иконок. Рабочий флоу, что может пойти не так скажете вы?
Это все работает до тех пор, пока на странице не появится 2 одинаковые иконки, один и тот же SVG код в разных местах дома, с разными цветами. В нашем случае в одном из мест по ховеру иконка меняет цвет, а в месте с ней меняется цвет и у второй иконки. WTF?! Разный HTML, на разных уровнях, кажется как баг в браузере или еще что...
ХЗ почему, может у вас не так, но у нас во всех иконках после скетча есть градиент
linearGradient тег которым задается цвет иконки, хотя сама иконка плоская и одного цвета. Как мы знаем что бы юзать градиент в svg ему нужно задать ID и использовать этот IDшник в fill атрибуте path'а fill="url(#linearGradient-1)".