I have two icon compound components in my react storybook using linearGradient likeso:
Icons.Facebook = function FacebookIcon() {
return (
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="url(#facebookGradient)"/>
<defs>
<linearGradient id="facebookGradient" x1="27.5" y1="2.49999" x2="1.04211" y2="4.16368" gradientUnits="userSpaceOnUse">
<stop offset="0%" style={{ stopColor: "#5936E3" }} />
<stop offset="100%" style={{ stopColor: "#6E56B5" }}/>
</linearGradient>
</defs>
</svg>
);
}
Icons.Instagram = function InstagramIcon() {
return (
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="url(#instagramGradient)"/>
<defs>
<linearGradient id="instagramGradient" x1="27.5" y1="2.49999" x2="1.04086" y2="4.15369" gradientUnits="userSpaceOnUse">
<stop offset="0%" style={{ stopColor: "#5936E3" }} />
<stop offset="100%" style={{ stopColor: "#6E56B5" }} />
</linearGradient>
</defs>
</svg>
);
}
In my story, Icons.stories.jsx, I render them:
const Template = (args) => (
<Icons {...args}>
<Icons.Facebook />
<Icons.Instagram />
</Icons>
);
export const AllIcons = Template.bind({});
AllIcons.args = {};
The issue I'm having with is that, these two Icons will only be visible after I reload the page. If I go to the canvas tab and back into the docs tab, they remain in the dom, but they are not visible. If I remove the linearGradient and just use a regular hex color or a color (like red), they show without a problem.
As you can see, the ids are not the same, I'm using proper syntax as I read on other posts and github issues, but I'm still not able to find a solution.
Any ideas?
hmm, it seems like when I moved the <Icons.Facebook /> and <Icons.Instagram /> into the AllIcons Template as part of the children args, the linearGradients and the svgs themselves did not disappear.
const Template = (args) => (
<Icons {...args}>
{args.children}
</Icons>
);
export const AllIcons = Template.bind({});
AllIcons.args = {
children: (
<>
<Icons.Facebook />
<Icons.Instagram />
</>
),
};
Not sure what makes this different. Any explanations?