Animate external svg file

[hasanm95]

Hi,
I am using "react-spring": "^9.4.4" with next js and I am loading my SVG icons next-react-svg . Now, I want to few of my SVG icons to be animated on hover. But, I couldn't find any documentation or example to animate an external SVG file. Is there any way to animate an external SVG file?

[joshuaellis]

Do you have a code snippet of how you're using your icons that you can share?

[hasanm95]

import Shape2 from "@assets/svgs/shape-2.svg";

const BlogArea = () => {
    return (
        <div className="absolute z-1 bottom-[50px] left-[60%]">
            <Shape2 className="fill-primary-light w-[226px] h-[226px]" />
        </div>
    );
};

export default BlogArea;

This is my code snippet.

[joshuaellis]

I would do

import { animated } from '@react-spring/web';
import Shape2 from "@assets/svgs/shape-2.svg";

const AnimatedShape2 = animated(Shape2);

const BlogArea = () => {
    return (
        <div className="absolute z-1 bottom-[50px] left-[60%]">
            <AnimatedShape2 className="fill-primary-light w-[226px] h-[226px]" />
        </div>
    );
};

export default BlogArea;

Then you can pass springs to the component.

[hasanm95]

Thanks for your reply. Is there any way to redraw that SVG on hover like this (https://www.npmjs.com/package/react-vivus)