SVG files are still included in output

[reknih]

vite still outputs the SVG files that svgr converted into React components in the final output. Because the SVGs are already stored within the JavaScript, it would be nice to suppress the additional file outputs.

[soaresluciano]

I managed to avoid the svg files to be emitted using the rollup-plugin-no-emit
My config looks like this:
plugins: [ svgr({ exportAsDefault: true, }), noEmit({ match: (file) => file.endsWith('.svg') }), react(), ],

It's not ideal, but it gets the job done util this option is not available.
I hope it helps you.

[lukashaertel]

We've been working on this issue ourselves. Our solution is to amend this plugin in the following way.

import type {Plugin} from 'vite'
import basePlugin, {ViteSvgrOptions} from 'vite-plugin-svgr'

interface ViteSvgToJsxOptions extends ViteSvgrOptions {
    includeSvgAssets?: boolean;
}

function svgToJsx(
    {
        exportAsDefault,
        svgrOptions,
        esbuildOptions,
        include = '**/*.svg',
        exclude,
        includeSvgAssets,
    }: ViteSvgToJsxOptions): Plugin {
    // Create own filter instance to prevent assets from being emitted.
    const filter = createFilter(include, exclude);

    // Create plugin from base.
    const plugin = basePlugin({
        exportAsDefault,
        svgrOptions,
        esbuildOptions,
        include,
        exclude
    });

    // Update name, set enforce to pre if no SVG assets should be emitted, set load to capture files that match filter.
    plugin.name = 'vite-plugin-svg-to-jsx';
    plugin.enforce = !includeSvgAssets ? 'pre' : undefined;
    plugin.load = (id) => !includeSvgAssets && filter(id) ? "" : null;
    return plugin;
}

By enforcing the plugin to run in 'pre' and returning a non-null value for load, the standard asset plugin will no longer include the SVG in the assets. This has so far been the cleanest way, as the load step still has the full path to work with and match the filters against, as opposed to removing the SVG from the bundle.

I think that adding the option and enforce and load properties is a simple inclusion to fix this issue.

[woodreamz]

Could be really nice to fix this issue :) A PR seems ready.

[EwenDC]

I managed to avoid the svg files to be emitted using the rollup-plugin-no-emit My config looks like this: plugins: [ svgr({ exportAsDefault: true, }), noEmit({ match: (file) => file.endsWith('.svg') }), react(), ],

It's not ideal, but it gets the job done util this option is not available. I hope it helps you.

If TypeScript yells at you when you try to add noEmit to the plugin list, it's because that package has Rollup 2 as a peer dependency, when the latest version of Vite is using Rollup 3. The plugin itself is actually perfectly compatible with Rollup 3 however, so you can just tell your package manager of choice to resolve the dependency as such. For example, when using pnpm you can add the following to your package.json:

  "pnpm": {
    "peerDependencyRules": {
      "allowedVersions": {
        "rollup-plugin-no-emit>rollup": "3"
      }
    }
  },

[mattsputnikdigital]

Any news with this?

[mattsputnikdigital]

@lukashaertel do you know why, when using your solution, I get the following error? I just set includeSvgAssets: false and everything else is the default options.

import { ReactComponent as Chevron } from 'modules/theme/images/icons/button/chevron.svg';

error during build:
RollupError: "ReactComponent" is not exported by "src/modules/theme/images/icons/button/chevron.svg", imported by "src/components/shared/Button/index.tsx".

[pd4d10]

See #71 (comment)

[EwenDC]

See #71 (comment)

I'm still seeing the SVG's being output in the build folder, regardless of how I configure include/exclude. Those options seem to control what files get transformed but not what files get included in the final output.

The primary reason I even care is that I'm using this in a PWA, and even if the JavaScript code never references the erroneously outputted .svg's, they still get included in the list of precache assets that are downloaded automatically. Ideally we don't want to force users to download an svg that has already been inlined in JavaScript code in the application itself.

If you want a real use case to play around with, I have a branch on my open source project where I have attempted to replace the existing no-emit solution with just using this plugin.

[pd4d10]

@EwenDC Thanks for the feedback! Indeed, we should set enforce: pre to override the built-in vite:asset plugin's behavior.

Would you please try the latest v4.1.0?

[EwenDC]

@EwenDC Thanks for the feedback! Indeed, we should set enforce: pre to override the built-in vite:asset plugin's behavior.

Would you please try the latest v4.1.0?

Hey! Apologies for the slow response. I can confirm that the latest version resolves the issue. Thank you!

[woodreamz]

I also confirm it's fixed!

Thanks :)

[mikepink]

Hello, this ended up being a breaking change for us since SVGs were no longer present in the build manifest generated by Vite. We mitigated by downgrading to v4.0.0.