Recibo el siguiente error cuando intento descargar svg como componente de React.
SyntaxError: unknown: las etiquetas de espacio de nombres no se admiten de forma predeterminada. JSX de React no admite etiquetas de espacio de nombres. Puede activar el indicador 'throwIfNamespace' para omitir esta advertencia.
import React from "react"; import { ReactComponent as LO } from "../a/Logo.svg" import { NavLink } from "react-router-dom"; const Logo = () => ( <> <NavLink to={"/"}> <LO width={"40px"} height={"40px"} /> </NavLink> </> ); export default Logo;Cuál es la razón ?
En el archivo SVG, intente cambiar:
sketch:type TO sketchType xmlns:xlink TO xmlnsXlink xlink:href TO xlinkHrefetc...
La idea es crear la propiedad camelCase, recuerda que estás trabajando con JSX, no estás creando una cadena como lo hace XML.
Dado que estamos en el área de juegos de JSX, sus etiquetas SVG deben escribirse como camelCase
Entonces puede optimizar fácilmente su SVG usando el enlace a continuación para evitar este error :)
La solución más simple es simplemente convertir el archivo SVG a JSX. Luego, cree un componente separado o simplemente copie y pegue la etiqueta. Este sitio web hace el trabajo perfectamente.