Tengo dos componentes compuestos de íconos en mi libro de cuentos de reacción usando 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> ); } En mi historia, Icons.stories.jsx , los represento:
const Template = (args) => ( <Icons {...args}> <Icons.Facebook /> <Icons.Instagram /> </Icons> ); export const AllIcons = Template.bind({}); AllIcons.args = {}; El problema que tengo es que estos dos íconos solo serán visibles después de recargar la página. Si voy a la pestaña del lienzo y vuelvo a la pestaña de documentos, permanecen en el dom, pero no están visibles. Si elimino el linearGradient y solo uso un color hexadecimal normal o un color (como red ), se muestran sin problemas.
Como puede ver, los id no son los mismos, estoy usando la sintaxis adecuada como leí en otras publicaciones y problemas de github, pero todavía no puedo encontrar una solución.
¿Algunas ideas?
hmm, parece que cuando moví <Icons.Facebook /> e <Icons.Instagram /> a la plantilla AllIcons como parte de los argumentos secundarios, children linearGradients y los svgs en sí mismos no desaparecieron.
const Template = (args) => ( <Icons {...args}> {args.children} </Icons> ); export const AllIcons = Template.bind({}); AllIcons.args = { children: ( <> <Icons.Facebook /> <Icons.Instagram /> </> ), };No estoy seguro de qué hace que esto sea diferente. ¿Alguna explicación?