CODEWITHSUNDEEP
reactjssvg
Kamil Kamili
Kamil Kamili

Reputation: 1927

How to load a list of SVGs in React JS

I am storing a list of SVG's in an array. But for some reason they dont render. There is no error as well. I tried most of the solutions but none have worked for me. Any solutions?

My SVG Object:

In my data file: 

const userList = [
  {
    miniLogo: `${require("../assets/logo/jim.svg")}`,
    name: "Jim",
    id: "0",
  {
    miniLogo: `${require("../assets/logo/Dana.svg")}`,
    name: "Dana",
    id: "1",
  }
];

export default userList;

Then somewhere in my component:

import users from "../../constants/users.map";

//Other Render Stuff
         <div>
          <Slider {...settings}>
            {users.map((user, index) => {
              return (
                <div
                  key={index}
                  style={{
                    background: "#FFFFFF",
                    boxShadow: "0px 20px 50px #EEF0F4",
                    borderRadius: "32px"
                  }}
                >
                  <img src={user.miniLogo} />
                </div>
              );
            })}
          </Slider>
        </div>

My Webpack Config:

  {
    test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    use: "file-loader"
  },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
      "file-loader?name=images/[name].[ext]",
      "image-webpack-loader?bypassOnDebug"
    ]
  },
  {
    test: /\.svg$/,
    loader: "svg-inline-loader"
  },

UPDATE

I remove the string literal from miniLogo as advised in the answers below. But it still doesnt render. This is what I see.

SVG Doesnt render

My img tag after rendering:

Image TAG

Upvotes: 0

Views: 957

Answers (2)

AppleJam
AppleJam

Reputation: 1039

I think it's because the line miniLogo: `${require("../assets/logo/jim.svg")}`

It imported the svg syntax as string. So the img part became:

<img src="<svg>...</svg>" />

maybe you can try to remove the string literal:

const userList = [
    miniLogo: require("../assets/logo/jim.svg"),
    name: "Jim",
    id: "0",
  {
    miniLogo: require("../assets/logo/Dana.svg"),
    name: "Dana",
    id: "1",
  }
];

Update:

Hi, the image path does not contain image/, so it caused 404 issue. I check your webpack config, and guess that's because svg was correspond to the first loader setting(with ttf and eot type).

Please just use only one loader setting for one file type, or it may cause this kind of problem.

Therefore, remove the svg type from first loader:

{
    test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
    use: "file-loader"
  },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
      "file-loader?name=images/[name].[ext]",
      "image-webpack-loader?bypassOnDebug"
    ]
  }

OR

If you want to load it inline :

{
    test: /\.(ttf|eot)(\?[\s\S]+)?$/,
    use: "file-loader"
  },
  {
    test: /\.(jpe?g|png|gif)$/i,
    use: [
      "file-loader?name=images/[name].[ext]",
      "image-webpack-loader?bypassOnDebug"
    ]
  },
  {
    test: /\.svg$/,
    loader: "svg-inline-loader"
  },

Upvotes: 1

Tabish Javed
Tabish Javed

Reputation: 987

The SVG is just becoming a string. Can you give this a try

<img src={require(`../assets/logo/${user.miniLogo}`)} alt="logo" />

Do change the miniLogo path accordingly.

Upvotes: 0

Related Questions