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

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.

CodePudding user response：

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

CodePudding user response：

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"
  
  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;
}