unable to resize SVG element

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

Answer

I don’t believe you’ll be able to override any styling like you’re trying. If you look at the docs it may be clear why:

babel-plugin-inline-react-svg

Transforms imports to SVG files into React Components, and optimizes the SVGs with SVGO.

For example, the following code…

import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSVG />;

will be transformed into…

import React from 'react';
const CloseSVG = () => <svg>{/* ... */}</svg>;

const MyComponent = () => <CloseSVG />;

const CloseSVG = () => <svg>{/* ... */}</svg>; doesn’t allow for passing additional props to the JSX

Suggestion 1

You may be able to create a wrapper the applies CSS styling to nested svg tags.

Example using styled-components:

import styled from "styled-components";

const SvgWrapper = styled.div`
  svg {
    fill: ${({ fill }) => fill};
    height: ${({ height }) => height};
    width: ${({ width }) => width};
  }
`;

<SvgWrapper height="25px" width="25px" fill="pink">
  <SvgIcon />
</SvgWrapper>

Suggestion 2

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

Adding SVGs

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

Then to style:

  1. Use the style prop

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

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

Edit unable-to-resize-svg-element (forked)

enter image description here