This page shows you how you can show Svg in React.
The problem is that Raw Svg are not natively React component and therefore cannot be added to the React tree directly.
The Javascript world is weird and you should notice that import definition is dependent on your build server
For instance, in vite the default import will just return the resolved public URL.
You can therefore use it directly in a image.
import myLogo from '/logo.svg'
....
<img src={myLogo} className="logo" alt="logo" />
This article shows you how you can create a React Component from a Svg:
Below is the SVG that we want to integrate into React.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="36px">
<rect
x="128"
y="128"
width="336"
height="336"
rx="57"
ry="57"
fill="none"
stroke="currentColor"
stroke-linejoin="round"
stroke-width="32"
/>
<path
d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="32"
/>
</svg>
To transform a HTML element into a Jsx element:
For instance, the HTML attribute stroke-linejoin would become the JSX attribute strokeLinejoin.
For the icon above, the icon would then become:
let iconComponent = (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="36px">
<rect
x="128"
y="128"
width="336"
height="336"
rx="57"
ry="57"
fill="none"
stroke="currentColor"
strokeLinejoin="round"
strokeWidth="32"
/>
<path
d="M383.5 128l.5-24a56.16 56.16 0 00-56-56H112a64.19 64.19 0 00-64 64v216a56.16 56.16 0 0056 56h24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="32"
/>
</svg>
)
If you got tired to transform your SVG, you can also do it at compile time thanks to the SVGR.
The idea is that because there is a lot of chance that you use a bundler to compile JSX or Typescript into Javascript, the bundler can also transform SVG into React component.
SVGR is a bundler plugin that does exactly that.
For installation into your bundler, check the installation page
The advantage of this choice is that you can install icon package such as Bootstrap icon and use them directly.
Example:
import FolderIcon from "bootstrap-icons/icons/folder.svg";
const MyComponentWithAFolderIcon = () => (
<div>
<FolderIcon /> Bootstrap Folder Icon !
</div>
)
You can also automate it at runtime.
For instance, the material ui library has a Svg Icon that permits to pass directly the SVG.
import StarIcon from './star.svg';
<SvgIcon component={StarIcon} viewBox="0 0 600 476.6" />