Ilya_Dityatiev

Каждому элементу SVG необходимо присваивать уникальный id на каждый градиент, моя ошибка была в том, что у меня, в каждом элементе был один и тот же id:

Не рабочий код:

<path
        fill="url(#paint0_linear_424_1291)"
/>

<linearGradient
          id="paint0_linear_424_1291"
 >

Код решения:

<path
       fill={`url(#paint0_linear_424_1291${colorStart}${colorEnd})`}
 />

<linearGradient
          id={`paint0_linear_424_1291${colorStart}${colorEnd}`}
>

Суть решения: в каждой итерации .map() при отрисовке SVG где есть ссылка на элемент внутри, этим ссылкам нужно присваивать уникальные id

Решение для SCSS файла:

.all-buttons__img {
    path {
        fill: red;
    }
}

Для CSS:

.all-buttons__img path {
    fill: red;
}