this shit is bugged with typescript enabled
try using it with vite
svgr({
svgrOptions: {
icon: true,
typescript: true, /* this is causing the issue */
memo: true,
},
include: "**/*.svg",
})
import Edit from "@/svgs/thin/pencil.svg";
or
import Edit from "@/svgs/thin/pencil.svg?react";
you will be either getting Oops! String contains an invalid character
or this
if u turn off typescript and use .svg it works, if you use .svg?react - it doesnt react router 7 framework mode with vite
const tsTypeReferenceSVGProps = (ctx) => {
if (ctx.opts.native) {
const identifier2 = core.types.identifier("SvgProps");
getOrCreateImport(ctx, "react-native-svg", "type").specifiers.push(
core.types.importSpecifier(identifier2, identifier2)
);
return core.types.tsTypeReference(identifier2);
}
const identifier = core.types.identifier("SVGProps");
getOrCreateImport(ctx, ctx.importSource, "type").specifiers.push(
core.types.importSpecifier(identifier, identifier)
);
return core.types.tsTypeReference(
identifier,
core.types.tsTypeParameterInstantiation([
core.types.tsTypeReference(core.types.identifier("SVGSVGElement"))
])
);
};
issue is either in old typescript or something else because this doesnt look correct to me
the package itself is a mess including docs
https://react-svgr.com/docs/options/#output-directory
for example there's no outputdir and so on so maybe you should make a dedicated to this package docs
but maybe im just autistic or i cant read docs or docs are outdated or this or that even after asking ai and reading articles they suggests using ?react if i want import react component and just pure .svg path if i want it as a string
but after looking at export default function vitePluginSvgr({ svgrOptions, esbuildOptions, include = "**/*.svg?react", exclude, } = {}) { you can def tell that this probably wont let you export svg as a string maybe using include: "**/*.svg*", could fix it but it def wont fix the typescript issue
ill try using this https://github.com/iGoodie/vite-plugin-react-rich-svg just wanted to report