gatsbygatsby-imagegatsby-plugin

Gatsby shows only first rendered svg

Gatsby renders only first svg image and applies it to others as well. When it has to show all of these icons (there is no problem in path) it shows it this way:

https://ibb.co/8PHfXkD

This is my code:

import Html from "../assets/skills/html.inline.svg"
import Css from "../assets/skills/css.inline.svg"
import Bird from "../assets/skills/bird.inline.svg"
import Gatsb from "../assets/skills/gatsby.inline.svg"

function Team() {
  return (
    <Layout>
      <div>
        <Html />
        <Css />
        <Js />
        <Vue />
        <Rea />
        <Gatsb />
        <Next />
        <Bird />
      </div>
    </Layout>
  )
}

export default Team

This is how I use the plugin:

{
  resolve: "gatsby-plugin-react-svg",
  options: {
    rule: {
      include: /\.inline\.svg$/,
    }
  }
}

What's the problem?

Solution

  • I guess that your SVGs share are sharing the same internal id hence it is only displaying the first one. If so, change the id of each one to convert them to a unique value.