Fill для внешнего SVG файла в React

Есть ли какой-то способ изменить цвет SVG файла если тот был импортирован из внешнего SVG файла? То есть <img src="[svgfile]"> не позволяет контроллировать цвет, а добавляя SVG код каждой иконки в React сильно замусорит его. Я пытаюсь понять как красиво и удобно импортировать все иконки в проект.

У меня сейчас примерно следующий код:

<buttonWrapper>
    <button iconBefore={facebookIcon}>Facebook</button>
</buttonWrapper>

facebookIcon должен быть строчный SVG элемент с своими параметрами и возможностью контроллировать цвет, так есть при наведении цвет будет меняться.

Я хочу получить что-то в этом роде:

import icon from "./icons/user.svg"
<icon fill="red" />

Пока что поиск ничего полезного не дал, многие варианты лишь портят структуру кода да и в принципе много вариантов я не нашел. Может кто подскажет что делать в такой ситуации?

Меня по сути интересует как удобно и гибко писать код что бы таких вопросов больше не возникало. Из-за большого колличества расширений в проекте уже сложная структура и усложнять ее дальше страшновато.