Multiple SVG Components not working or render as expected

Question

I'm having a strange problem; and haven't been able to get a solution for it.

Context: NextJS App. I have 5 different svgs, and created some Icon components with them:

import React from 'react';
import { ReactComponent as NoReactionSvg } from './img/no-reaction.svg';
import { ReactComponent as OkSvg } from './img/ok.svg';
import { ReactComponent as QuestionSvg } from './img/question.svg';
import { ReactComponent as ToolSvg } from './img/tool.svg';
import { ReactComponent as TrophySvg } from './img/trophy.svg';

const Icon = ({ size = 'medium', color = 'currentColor', style, children, ...props }) => {
  const sizes = {
    small: '16px',
    medium: '24px',
    large: '32px',
  };

  return React.cloneElement(children, {
    width: sizes[size],
    height: sizes[size],
    color,
    style,
    ...props,
  });
};

export const NoReactionIcon = (props) => (
  <Icon {...props}>
    <NoReactionSvg />
  </Icon>
);

export const OkIcon = (props) => (
  <Icon {...props}>
    <OkSvg />
  </Icon>
);

export const QuestionIcon = (props) => (
  <Icon {...props}>
    <QuestionSvg />
  </Icon>
);

export const ToolIcon = (props) => (
  <Icon {...props}>
    <ToolSvg />
  </Icon>
);

export const TrophyIcon = (props) => (
  <Icon {...props}>
    <TrophySvg />
  </Icon>
);

And I'm trying to use these components like this:

<div><TrophyIcon /></div>
<div><ToolIcon /></div>
<div><QuestionIcon /></div>
<div><NoReactionIcon /></div>
<div><OkIcon /></div>

Problem is, it's not working as expected. As you can see, I have 5 components; but it's only rendering the first 3 (the other 2 are omitted).

Now, if I move the 4th icon to the top, suddenly it renders! But still the last one is not being rendered.

And If I move it to the top, suddenly the 2nd icon is not being rendered anymore.

I'm totally clueless about what's going on with this. Maybe is it a configuration on nextjs? Or maybe I'm creating these svg components wrong?

Answer 1

I had the same problem issue for more than a day, the solution to this problem is in your SVGComponents you should be using id='some-value' and for other SVGComponents you would be using the same value, you will need to make each SVG with unique ids,. eg

export default function AEIcon() {
return (
    <svg
        width="20"
        height="20"
        viewBox="0 0 20 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
    >
        <rect width="20" height="20" fill="url(#pattern0)" />
        <defs>
            <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                <use xlinkHref="#image0_698_26468123" transform="scale(0.0125)" />
            </pattern>
            <image
                id="image0_698_26468123"
                width="80"
                height="80"
                xlinkHref="data:image/png;base64,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" 
            />
        </defs>
    </svg>
);

}

in the above component id is used 2 places and their reference is also used, id should match with the respective references and the ids should not be same in any other SVGComponent.

in my case I was using similar svgs but all of them had same IDs.