Переход между двумя реакциями SVG ⇐ CSS

[Anonymous]

У меня есть заголовок с логотипом слева, заголовок страницы — посередине и меню пользователя справа. В настоящее время я показываю SVG рядом с заголовком каждой страницы. Например, на странице /organizations я показываю это:





После этого я добавил SVG, который отображается при наведении курсора на элемент (это тот же SVG, но с заливкой)





Как сделать переход между этими двумя элементами плавным? Я использую Tailwind для стилизации и пробовал добавить transition-all почти в каждый класс, но, к сожалению, это не сработало.

Это код, отвечающий за переключение между SVG:

const [hover, setHover] = React.useState(false); const handleMouseOver = () => { setHover (истина); }; const handleMouseLeave = () => { setHover (ложь); }; возвращаться ( ... {наведите курсор ? getModuleInfo(путь, t, организация).logoHover : getModuleInfo(путь, t, организация).logo} {getModuleInfo(путь, t, организация).title} ... ) UPD: чтобы было понятнее, это будут два примера SVG, между которыми я хотел бы перейти:





А это для них:
// Незаполненный SVG | // Заполненный SVG