SVG image size in React

Question

I have an SVG image that must be imported. The original image is too big so it must be made smaller.

This is the image added in code:

  render() {
    return (
      <div>
        <Grid>
          <img src={mySvgImage}></img>
          //other elements
        </Grid>
    </div>
    );
}

Playing with Developers tools I had discovered that if in Styles > element.style it is added: height: 10% the image size is shrunk to the desired size. Like here:

So how can this be done in code?

I added it like inline CSS but doesn't work:

  render() {
    return (
      <div>
        <Grid>
          <img style={{ heigth: '10%' }} src={mySvgImage}></img>
          //other elements
        </Grid>
    </div>
    );
}

Tried with saving it in a css file and import it with className='myClassName' , same, no changes. The image has the original size.

How can this be done?

Answer 1

You might have a typo:

// not heigth
<img style={{ height: '10%' }} src={mySvgImage}></img>

.imgClassName {
  height: 10%;
}

<div>
  <Grid>
    <img className="imgClassName" src={mySvgImage}></img>
  </Grid>
</div>