Я пытаюсь стилизовать свои значки, которые динамически импортируются из другого файла .js в моем приложении реагирования ⇐ CSS

[Anonymous]

Мои значки импортируются и хранятся в отдельном файле .js. Я импортировал файл .js в свой файл .jsx и вижу, как SVG отображается на моем веб-сайте. Я также могу изменить размер, но цвет остается черным, несмотря ни на что. что я пробовал.
Я использую "реагировать-значки/tb | реакции-значки/gi | реакции-значки/fa | реакции-значки/fa6 | реакции-значки/би | реагирующие значки/bs | реагирующие значки/md | реагирующие значки/tb | реагирующие значки/ai "
Если кто-нибудь сможет помочь, буду очень признателен. спасибо
вот мой .jsx-код части значков:

{categories?.slice(1, 9).map((category, index) => (





{category.icon}
{category.label}



))}


а вот код .scss:
&_icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;

svg {
font-size: 60px;
color: #fff;
}

p {
font-weight: 600;
text-transform: capitalize;
color: inherit;
}
} ```



Подробнее здесь: https://stackoverflow.com/questions/787 ... -file-js-o