Here, I have a simple HTML page with a div ID root where I am rendering this app component, which simply renders out the text demo. If I go ahead and change it to "Hello World," you can see that the page updates.
We are going to replace the HTML in the component with SVG. Here, I have a simple SVG file that renders an "I." If I go ahead and view its source, I can select all of it and copy it to the clipboard.
I am going to replace the div with the contents of the SVG file. You can see that I get a few errors. In this case, it is a matter of moving the XML link spaces, as those are no longer required. As soon as I do that, you can see that the SVG gets rendered by React.
With React, we can easily customize the contents of the SVG. For example, I can customize the width using a size property which I am going to default to the previous value. I am also going to use the size for height and for width.
You can see the component still renders the same, but now I can provide a different size property, for example 100 pixels, and the component renders a bit bigger.