0
155
Views`<ruta>` está rodeada de comillas cuando se envía a `<SvgIcon>`, lo que hace que SVG no se reproduzca
Al intentar usar el componente SvgIcon de Material-UI, la <path> está entre comillas, lo que hace que el SVG no se procese.
Estoy trabajando con Storybook en un archivo MDX. Para representar el SVG, probé algunos métodos, pero todos dan como resultado el mismo resultado. El más sencillo de estos intentos es:
import { accessibility1Icon } from '@cds/core/icon'; export const Template = (args) => { return ( <SvgIcon {...args}>{accessibility1Icon[1].outline}</SvgIcon> ) } La referencia que entra en <SvgIcon> es de hecho una path . Sale (como se ve en la imagen de arriba) pero está entre comillas en el DOM.
¿Qué me podría estar perdiendo que está causando estas comillas, o qué se puede hacer para volver a escribir la referencia para que no aparezcan?
1 answers
Answer question0
Debido a que no puede representar una string como JSX ,
Tienes que encontrar una manera de convertir la string a JSX .
1- Una solución que usa dangerouslySetInnerHTML :
import { accessibility1Icon } from '@cds/core/icon'; export const Template = (args) => { return ( <SvgIcon {...args}> <g dangerouslySetInnerHTML={{ __html: accessibility1Icon[1].outline }} /> </SvgIcon> ) } 2- Una solución usando html-react-parser
import { accessibility1Icon } from '@cds/core/icon'; import parse from 'html-react-parser'; export const Template = (args) => { return ( <SvgIcon {...args}> {parse(accessibility1Icon[1].outline)} </SvgIcon> ) }