И вот тут начинается самое интересно. Даже несмотря на то, что иконка прошла через SVGR(который рандомит IDшки в каждой иконе, что бы не было коллизий между разными иконками), при добавлении нескольких иконок на страницу эти коллизии появляются, но в рамках одной иконки. В принципе в этом нет ничего страшного, если бы не наш градиент... Из за того, что градиент аплается к нодам по IDшке, все иконки шарят одну единственную градиент ноду, даже если их в доме +100500, а когда мы меняем цвет у какой-то иконки, градиент подхватывает этот цвет и вместе с этим все иконки, которые юзают этот градиент, меняют цвет тоже, ЛОЛ. Демка тут: (https://codepen.io/Gandju/pen/JjNmBNB)

Ну а фикс на самом деле простой, выкасить градиент и использовать

currentColor

непосредственно в

fill

 атрибуте path'а:

<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="All-Blocks-Kit" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
    <g id="Artboard" transform="translate(-325.000000, -453.000000)">
      <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"
        fill="currentColor"
      ></path>
    </g>
  </g>
</svg>

В общем проверяйте и рефачте свои SVGшки, в них оч много мусора и можно словить оч неприятные баги...

#svg #баги