import SVG directly as a React Component

[Chastrlove]

希望能像cra一样 既提供导出svg资源，又支持导出组件
import { ReactComponent as Logo } from "logo.svg"
import logo from "logo.svg"

[yyx990803]

This is React specific and can be only be done via plugins.

[aleclarson]

See https://www.npmjs.com/package/vite-plugin-react-svg

[Chastrlove]

@svgr/rollup resolved that

[phoenisx]

@Chastrlove Can you share your config here. I am trying to add:

{
  ...svgr({
    memo: true,
    icon: true,
    svgoConfig: {
      removeViewBox: false
    }
  }),
  enforce: 'pre',
}

as plugin, but this isn't working. It still imports .svg as a url.

---

Let it be, I found that importing .svg needs to be changed. It's supposed to be:

import { ReactComponent as Logo } from './logo.svg';

Update:

No, it works on dev, but breaks for prod builds.

I figured out the issue. It's specific to Typescript. The declaration of module *.svg in vite client.d.ts does not export any const ReactComponent, due to which tsc throws error, while build.

Also, since @rollup/plugin-url is used by default (I guess or some other Rollup Plugin), and is called before svgr plugin, even after using enforce: 'pre' option, forces svgr to export url string as default export.

Also, there is no way (that I am aware of) to override already existing declare statements in client.d.ts files, I guess, as per:

• Placeholder Type Declarations microsoft/TypeScript#31894
• Force Override Declarations Types microsoft/TypeScript#36146

Is it ok to add support for typescript declarations for svgr? If yes, I can raise a PR for the same! 🎉

[MKRhere]

@phoenisx Just add this to svg.d.ts and add it to include array in tsconfig.json and you get proper TS support

declare module "*.svg" {
	import * as React from "react";

	export const ReactComponent: React.FunctionComponent<
		React.SVGProps<SVGSVGElement> & { title?: string }
	>;
}

[AlexGustafsson]

Is there any way to disable the use of the existing SVG transformer? Sure, this works as a workaround, but it leaves a lot to be desired. First, the SVG assets are still copied to the output. Second, the default export cannot be overwritten, leaving needless use of named imports instead.

The typing can be solved by not specifying client.d.ts in tsconfig and providing a type of your own, as mentioned previously, but there's no way to achieve proper support for SVGs in React even with plugins for as long as there is a hard coded transformer already present.

[aleclarson]

@AlexGustafsson Please open a new issue for that 👍

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.