unable to resize SVG element

Question

I have been trying to resize this svg element i have imported to my react project but with no luck in multiple ways

I import the SVG

import SVG from "../icon.svg"

then use it as an inline-svg

I tried

<SVG
  style={{
    fill: hover ? color : "#fff",
    width="25px" // first method
    height="25px" // first method
  }}
  viewBox="0 0 25 25" // second method
  width="25" // third method
  height="25" // third method
/>

also tried all of them with no luck

I also tried to cap the svg size by its container no luck

the parent svg element is resized but its paths are overflowing outside and not resizing properly with the values provided

the closest i can get to normal is when i set the height to a low number like 1-5 but anyways it will clip the icon

i am also using babel-plugin to import svg images as react components

what am i doing wrong here ?

svg i am using is under this link link

Is the icon cropped when using the second method (only the viewBox and no width and height attributes) ? In this case you may need a different viewBox value. Can you edit your question and add the svg you are using? — enxaneta
all having the same effect where the Path will leave the svg element area and overflows i will share the svg image, added the link to question — Raffi

Drew Reese Drew Reese · Accepted Answer · 2021-08-13T22:21:03

Import the SVG image as a ReactComponent and apply styling props.

Adding SVGs

import { ReactComponent as SVG } from './icon.svg';

Then to style:

Use the style prop

<SVG
  style={{
    fill: hover ? color : "#fff",
    width: "25px",
    height: "25px"
  }}
/>

Using SVG props

<SVG
  fill={hover ? color : "#fff"}
  width={25}
  height={25}
/>

unable to resize SVG element

1 Answers