I am currently working on a React project that involves displaying Lottie-react animations and SVG's. My main concern is making sure that these illustrations are responsive on my website.
The components are stored in a .js file, which I import into my project as shown below:
import React from 'react'
import MobileAnimation from '../../images/illustrations/mobileanimation.js';
import Icon from '../../images/illustrations/Icon.js';
const Section = () => {
return (
<section className="section-four">
<MobileAnimation fill="#49c" width={100} name="phone" className="pagefouranimation" />
// No effect to size
<Icon fill="#49c" name="phone" width="800" height="800"/>
</section>
)
}
export default Section
I have tried giving the 'MobileAnimation' a className and changing the width and height like this:
.pagefouranimation {
padding: 0;
width: 100px;
height: 50px;
margin-left: -124px;
}
.illustration-comp {
width: 200px;
height: 200px;
}
SVG
import React from "react";
import styled from "styled-components";
export default class Icon extends React.Component {
render() {
return (
<svg className="illustration-comp" class="illustration" viewBox="0 0 1155 700" fill="none" xmlns="http://www.w3.org/2000/svg">
// SVG paths and shapes go here...
</svg>
}
}
However, directly modifying the size in the .js file doesn't seem to work. How can I make the Lottie illustrations and animations responsive across different devices? Currently, I'm looking for alternative solutions to address this issue.