1

I have added svgr to my webpack config. When importing a svg in a component, I have a string: a8ef8eeaa76ec666d9b8ee7e93eea4c4.svg instead of the actual svg. How to fix this?

module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          exclude: /node_modules/,
          use: { loader: "babel-loader" },
        },
        { test: /\.css$/, use: ["style-loader", "css-loader"] },
        { test: /\.(png|jpg|gif)$/, use: ["file-loader"] },
        {
          test: /\.svg$/,
          use: ["@svgr/webpack"],
        },
      ],
    },

import React from "react";
import Upload from "../../assets/svg/upload.svg";

export default function Icon() {
  return <div>{Upload}</div>;
}
DoneDeal0
  • 5,273
  • 13
  • 55
  • 114
  • why dont you use img tag instead ? – Jake Lam Oct 25 '20 at 08:56
  • I've tried blabla, but I only have the alt displayed as well. The svg loading doesn't work. – DoneDeal0 Oct 25 '20 at 09:06
  • thats weird because img tag shd work, can you create a sandbox to illustrate it. Otherwise you can post your full package.json,webpack.config.js and svg files for ppl to mimic your problems – Jake Lam Oct 25 '20 at 09:10
  • I have the same problem, but for me it outputs "export default __webpack_public_path__ + &quot;images/bbfd3d7aaf23b286af050b7e10125db6-bolt.svg&quot;;" as a text. Did you find any solution? – Olli Dec 11 '20 at 19:19

0 Answers0