Documention for how to get SVG URL

[swedieman]

Migrating from react-scripts to Vite I need the URL for the imported SVG file. But I cannot figure out how to expose the URL rather than the React component with vite-plugin-svgr 4 (to use e.g. when you want to use the SVG as a background image).

In my old react-scripts setup I could do something like this:
import actionActivityIconUrl { ReactComponent as ActionActivityIcon } from './@img/action/activity.svg';

so I could use both the generated URL and the generated react component. But this version of vite-plugin-svgr is supposed to be used like this:
import ActionActivityIcon from './@img/action/activity.svg';

but how do I get the URL?
And where is the reference documentation for vite-plugin-svgr? I can only find simple examples in the readme file here but cannot find all possible options for how to use vite-plugin-svgr.

[zkorhone]

I was expecting url to be returned when pattern ?react was not present. This is a blocker for us

@swedieman It turned out that it was actually a vite change related to assets that caused our problems. Disabling inlining solved problem for now. I guess we need to dig deeper and see, if we actually want to conditionally enable this. While vite should also support ?url suffix that got inlined too :-(

For react component: from './@img/action/activity.svg?react'
For url: from './@img/action/activity.svg?url' or from './@img/action/activity.svg' (inlining must be disabled)

export default defineConfig({
  build: {
    assetsInlineLimit: 0, // disables inlining - supports also a matcher function

Would you like to use style { ReactComponent as ActionActivityIcon } configure plugin with this:

    svgrPlugin({
      svgrOptions: {
        exportType: 'named'
      },

And create custom type definition:

declare module '*.svg?react' {
  import type { ComponentProps } from 'react'

  export const ReactComponent: React.FunctionComponent<ComponentProps<'svg'> & { title?: string }>
}

Unfortunately I don't think you can anymore import both url and component with single import line.

[Grsmto]

I can confirm this was working as expected with Vite 4 but doesn't anymore with Vite 5.