How is SVG format images are set in React.Js? - reactjs

Question

I have been working on my college website and to make things easier and time saving, I downloaded a template and completed half of the requirements of my project but I got some issues while finding new image formats like svg as I didn't learn about handling them earlier.
Can anyone tell me how to use use svg format images because they are written in xml...!!
I surfed through many websites still can't get out my problem ,please help me out.

Answer 1

The easiest way to use SVG images in react is by importing them and using them in the <img /> src.
import myLogo from '/path/to/image.svg'
const Button = () => {
return (
<button>
<img src={myLogo} alt="SVG logo image"/>
</button>
);
}
Setting them as background images and such with CSS:
.container {
background-image: url(/path/to/image.svg);
}
Converting into JSX:
Regular SVG tag:
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
/>
</svg>
React:
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
/>
</svg>
SVG as a React Component
/path/to/LeftArrow.jsx
export const LeftArrow = () =>{
return(
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
/>
</svg>
)
};
import { LeftArrow } from './path/to/LeftArrow.jsx'
export const Button = () =>{
return(
<button>
<LeftArrow />
</button>
)
};
Use SVGR as data-url
This is what I do as it allows me to use SVGs as inline elements.
npm install svg-url-loader --save-dev
webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10240,
// make all svg images to work in IE
iesafe: true,
},
},
],
},
],
},
};
import myLogo from '/path/to/image.svg'
const Button = () => {
return (
<button>
<img src={myLogo} alt="SVG logo image"/>
</button>
);
};
This will compile it into a URL like:
<img src="wes49idjdur935jujd8907jdh.svg" alt="SVG logo image" />
Most of the time when using React, you're likely going to want to render SVGs conditionally. A common example would be the "hamburger" menu (which changes upon click). I went ahead and included an example of that:
Hamburger.jsx
import React from 'react';
export const Hamburger = () =>{
const [ isOpen, setisOpen ] = React.useState(false)
return(
<React.Fragment>
{ isOpen ? (
<button
onClick={()=>setisOpen(false)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
):( <button
onClick={()=>setisOpen(true)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
)
}
</React.Fragment>
)
};
Additional CSS to make the SVG appear properly:
svg {
height: 40px;
width: 40px;
}

Answer 2

Actually is very easy. You can configure webpack (or the bundler you are using) to import svgs directly as react components. You can use an img tag and add the route to the svg, it should render it directly as an image. An also you can rely on a library . All in all, even though they are written in xml, you can think about svg as images