Animate svg defined in external file

[AndrewSB]

Hey! I'm trying to use Spring to animate an SVG I'm loading with svgr. Here's what I'm trying

import { ReactComponent as Dade } from '../../public/dade.svg'

<Spring to={{fill: displayContext === 'normal' ? Style.fontColorLandingWhite : '#000'}}>
    {props => <Dade fill={props.fill.get()} />}
</Spring>

Unfortunately, react-spring doesn't recognize this element as one that I can animate (i.e. I can't write <animated.Dade ... />), and svgr's properties don't accept SpringValue<string>, so I'm running .get() on the SpringValue to get a string. This leads to some unfortunate performance issues where the animation is janky and doesn't get to the terminal fill value for longer than expected.

Is there a better way to import animate an external SVG file? Couldn't find much discussion about it, every example I saw seems to use an inline SVG

[tomdohnal]

For this specific case, you could use fill="currentColor" in your SVG, wrap the svg into an animated.div and animate the color property of the div