Change height and width of static SVG string in React.js

Question

I have a static svg string "testImg" that I am working with in my React application

the testImg string looks like

"<?xml version=\"1.0\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 20010904//EN\"\n \"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\">\n<svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\"\n width=\"225.000000pt\" height=\"225.000000pt\" viewBox=\"0 0 225.000000 225.000000\"\n preserveAspectRatio=\"xMidYMid meet\">\n<metadata>\nCreated by potrace 1.16, written by Peter Selinger 2001-2019\n</metadata>\n<g transform=\"translate(0.000000,225.000000) scale(0.100000,-0.100000)\"\nfill=\"#000000\" stroke=\"none\">\n</g>\n</svg>\n"

I am currently rendering this string using dangerouslySetInnerHTML , which I feel isn't ideal.

 <div dangerouslySetInnerHTML={{ __html: testImg }}></div>

My main issue though is, I want to change the size of the image being rendered. I have currently tried different variations of things like

 document.querySelector("svg").setAttribute("width", "20px")

Is there a way for me to resize this svg string being rendered?

Any help would be great.

Answer 1

Does this help at all?

import testImg from "./testImg.svg";
<img src={testImg} style={{ height: 40, width: 20 }} alt="Test Image"/>

Answer 2

You could try making the svg a component and pass the height and width as props and import it to replace the div.