Есть список из стилизованных под кнопку NavLink'ов, каждая из которых содержит модификатор класса по цвету.
link--red, link--green, link--blue...

Когда ссылка активна, на нее вешается дополнительный класс --active. В результате это  выглядит так:
<NavLink className="link link--blue link--active" />

В scss иконка окрашивается в зависимости от указанного в модификаторе правила (--red, --blue...).

Как сделать так, если присутствует класс &--active, то ссылка из серого окрашивалась в цвет модификатора, а иконка в любой другой?

Мне кажется такой код, как на второй картинке описывает то что я хочу, но к сожалению он не валидный

тут это оффтоп, не надо писать в сто чатов сразу

то есть?

Погоди, не оч понятно. у тебя ссылка и иконка, так? Они имеют разные классы?

тут чат по вёрстке, а не по реакт-коду

смотри если вибрать елемент на figma  показивает css или android а мне нужно react

что реакт? какой реакт-код? тебе нужен код компонентов?

так не работает