Resizing SVGs Made Easy with react-svg-resizer

Introducing react-svg-resizer - a powerful React component that simplifies the process of resizing SVG elements. Whether you're working with custom SVGs or popular icons like those from Material-UI, this component has got you covered.

Installation

Getting started is a breeze. Simply install react-svg-resizer using your preferred package manager:

pnpm add react-svg-resizer
# or 
yarn add react-svg-resizer

# or (Why?)
npm install react-svg-resizer

How to Use

import React from 'react';
import SvgResizer from 'react-svg-resizer';

const MyComponent = () => {
  return (
    <SvgResizer size={30}>
      <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="blue" />
      </svg>
    </SvgResizer>
  );
};
export default MyComponent;

Code Sandbox Demo

Explore a live demo in the sandbox, demonstaring usage with custom SVGs and MUI Icons here.

Under the Hood

SvgResizer uses the getBBox method to keep track of the dimensions of the child SVG. It then scales the provided SVG to the desired size.

Ready to Get Resizing?

This project is licensed under the MIT License, so feel free to dive in and start resizing those SVGs with ease! 🚀

See the full details at the Github Repo