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

Question

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

...

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

user_13348337 · Answer

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.

What i recommend you for this case is to create Homeicon as a component (homeIcon.tsx) as following (My example is with an EllipsisIcon):

import React from "react";

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

export default EllipsisIcon;

And to implement It you import it as a normal component and use it in the return as usual. Import EllipsisIcon from “…” Using it as where you need

user_11922545 · Answer

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

user_11662335 · Answer

React normally supports svg and does not require webpack editing.

You can define Svg's in a folder in src

Ex: eye.svg

Notice: Use currentColor for changes

Use ReactComponents to use svg

import {ReactComponents as EyeSvg} from '...';

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

export default Component;

If you changed your webpack.config.js

            // "url" loader works like "file" loader except that it embeds assets
            // smaller than specified limit in bytes as data URLs to avoid requests.
            // A missing `test` is equivalent to a match.
            {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              loader: require.resolve('url-loader'),
              options: {
                limit: imageInlineSizeLimit,
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            // Process application JS with Babel.
            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
            {
              test: /\.(js|mjs|jsx|ts|tsx)$/,
              include: paths.appSrc,
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),
                presets: [
                  [
                    require.resolve('babel-preset-react-app'),
                    {
                      runtime: hasJsxRuntime ? 'automatic' : 'classic',
                    },
                  ],
                ],
                
                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent:
                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                        },
                      },
                    },
                  ],
                  isEnvDevelopment &&
                    shouldUseReactRefresh &&
                    require.resolve('react-refresh/babel'),
                ].filter(Boolean),
                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
                // See #6846 for context on why cacheCompression is disabled
                cacheCompression: false,
                compact: isEnvProduction,
              },
            },

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

3 Answers