How to Make Scalable SVG React Components
- By : Mydatahack
- Category : Front-End, Web Technologies
- Tags: React, svg
SVG stands for Scalable Vector Graphic. The svg image can scale up and down according the size of the outer container as long as the image width is set to 100%. Let’s explore how we can make a React illustration component that supports multiple size by scaling up and down.
Firstly, we create an illustration container component that is used for all the svg illustration components. This wrapper component has three sizes, small, medium, large according to the design spec.
styles.scss defines the size variation.
By using this wrapper, we can add any svg that scales according to the design size spec in the container component.
To make svg scalable, the key is to set width 100% with a block display. Then, the image will scale according to the outer container.