Aquí está mi código, actualmente muestra svg1 dos veces. Quiero mostrar svg1 y svg2.
futuro quiero agregar más de 2 animaciones SVG. soy nuevo en reaccionar y lottie
import React from 'react'; import Lottie from 'react-lottie'; import svg1 from '../../assets/svg/svg1'; import svg2 from '../../assets/svg/svg2'; export default function Landing() { const defaultOptions = { loop: true, autoplay: true, animationData: svg1, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, }; return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <h1>Landing Page</h1> <Lottie options={defaultOptions} height={900} width={900} /> <Lottie options={defaultOptions} height={900} width={900} /> </div> ); }Gracias
Puede definir varias variables "defaultOptions" y usarlas en varios componentes de Lottie de la siguiente manera:
export default function Landing() { const defaultOptions1 = { loop: true, autoplay: true, animationData: svg1, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, }; const defaultOptions2 = { loop: true, autoplay: true, animationData: svg2, rendererSettings: { preserveAspectRatio: 'xMidYMid slice', }, }; return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <h1>Landing Page</h1> <Lottie options={defaultOptions1} height={900} width={900} /> <Lottie options={defaultOptions2} height={900} width={900} /> </div> ); }