vite-plugin-svgr icon indicating copy to clipboard operation
vite-plugin-svgr copied to clipboard

this shit is bugged with typescript enabled

Open ghost opened this issue 4 months ago • 1 comments

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

Image

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

Image

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

Image

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

ghost avatar Aug 26 '25 21:08 ghost