How to import a local SVG file in React?

Question

I am trying to import a local SVG file in React but I keep coming across this error:

My code looks like this:

import React from "react";
import styled from "styled-components";
import { ReactComponent as Logo } from "./images/logo.svg";

const MainImage = styled.div`
  height: 400px;
  width: 100%;
  background: #026857;
`;

const Home = () => {
  return (
    
      
        
      
    
  );
};

export default Home;

I have tried many solutions offered by others such as importing default as Logo, creating an image prop to contain the local svg ( ) but none have given me any success so far. I believe I may have to add something to my Webpack config file but I'm not sure what it is and where I should put it, as the config file is nearly 800 lines of code.

Also, I am using SVG files from https://undraw.co/ if the information helps, it seems their illustrations have many tags in them which I have not seen in simple SVG icons.

user_1097123 · Answer

assuming you are using Webpack 5, you need to configure your webpack loader to something like this using asset modules:

  module: {
    rules: [
      {
        test: /\.svg$/i,
        type: 'asset/resource',
      },
      ...
    ]
  }

if you are using webpack 4, you can use file-loader instead of asset/resource:

  module: {
    rules: [
      {
        test: /\.svg$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      ...
    ]
  }

then you can import your svg file like this:

import Logo from "./images/logo.svg";

//...

return

user_10695692 · Answer

I usually always convert each SVG into its own component like so

import * as React from "react";

const ArrowDownSVG = (props: React.SVGProps) => (
  
);

export default ArrowDownSVG;

Has worked for me in the past year or so By leaving out the type for the props, you can use this in plain JS as well

How to import a local SVG file in React?

2 Answers