react-svg-resizer

!npm Version

A simple React component for resizing SVG elements with ease.

Installation

``bash
pnpm add react-svg-resizer


or

yarn add react-svg-resizer

or (Why?)

npm install react-svg-resizer
`

Usage

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

const MyComponent = () => {
return (





);
};

export default MyComponent;
`

In this example, the SVG element inside SvgResizer will be scaled, so it's minimum axis would be 30 pixels (in this
case 30x30 circle).

Means that if a svg shape size 50x100 was given and a size of 1 would be given, the shape would be scaled to 1x2.

Code sandbox demo

here's codesandbox with demo

!react-svg-resizer




Props

$3

| Prop | Type | Default | Description |
|--------------|---------------------------------|---------|-------------------------------------------------------------------------------------------------------------------------------|
| size | number | 1 | The desired size of the normalized SVG. It scales the SVG by the provided factor. |
| scaleByMax | boolean | 'false' | Should the bigger axis should determine the size? by default, the final svg shape the determined relative to the smaller axis |
| svgProps | React.SVGProps | {} | Properties that would be passed down to the underlying svg react wrapper |

This component can be used to wrap svgs element. You most probably want to use this component.

$3

| Prop | Type | Default | Description |
|----------|-----------|---------|-----------------------------------------------------------------------------------|
| size | number | - | The size of the normalized inner SVG. |
| center | boolean | false | Determines whether to center the SVG around the origin (0,0). Default is false. |

This component is used to wrap inner SVG elements. For example ...

Example

`jsx
import React from 'react';
import SvgResizer, { SvgGResizer } from 'react-svg-resizer';

function App() {
return (
<>


SvgResizer

{" "}

);
}

const SvgResizerDemo = () => {
return (
<>

unmodified svg

scale inner svg to 30

scale entire svg to 30

);
};

export default App;
`

The result:

!image

the original svg shape is 80x80, and the scaled svg shape is 30x30.

$3

under the hood, SvgResizer` keeps track of the dimensions of the children svg by using
the getBBox method,
and scales the provided svg to the desired size.

License

This project is licensed under the MIT License.