SVG files are emitted, but appear to be corrupted in a single-spa react module. How to load SVG file-CodePudding

I'm using single-spa for modular React app. I'm using Typescript, Webpack and svg-url-loader. The SVG appears to be generated and present ([hash].svg), but is not loaded correctly (you cannot see the image, just a placeholder).

Here is my Webpack configuration:

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "Daboo1998",
    projectName: "react-module",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    module: {
      rules: [
        {
          test: /\.svg$/,
          use: [
            {
              loader: 'svg-url-loader',
              options: {
                limit: 10000000,
              },
            },
          ],
        },
      ]
    }
  });
};

Thats the SVG decleration:

declare module "*.svg" {
  const src: string;
  export default src;
}

and that how I use it:

import homeIcon from "./icons/house-4.svg";

...
<img src={homeIcon} />

What could I be doing wrong? If more information is needed, please comment!

CodePudding user response：

As its in svg (scalar vector graphic), so its an image by itself, dont need to go inside an src attribute, you can render homeIcon itself.

You can also create that Homeicon as a component (homeIcon.tsx) as following (My example is with an EllipsisIcon):

import React from "react";

const EllipsisIcon = () => {
    return (
        <svg
            aria-hidden="true"
            focusable="false"
            data-prefix="fal"
            data-icon="ellipsis-v"
            className="svg-inline--fa fa-ellipsis-v fa-w-2"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 64 512"
        >
            <path
                fill="currentColor"
                d="M32 224c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zM0 136c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32zm0 240c0 17.7 14.3 32 32 32s32-14.3 32-32-14.3-32-32-32-32 14.3-32 32z"
            ></path>
        </svg>
    );
};

export default EllipsisIcon;

And to implement It you import it as a normal component and use it in the return as usual.

CodePudding user response：

You can display SVGs using the img element with webpack file-loader, assuming you're using less than webpack 5. Do npm install file-loader --save-dev and add to the rules arrays in the webpack config

 {
    test: /\.(png|jpe?g|gif|svg)$/i,
    use: [
      {
        loader: 'file-loader',
      },
    ],
  },

It can be tricky styling SVG asset with the img element, so you're better of creating a react component to render the SVG for you as described by @Nacho