-
Notifications
You must be signed in to change notification settings - Fork 55
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SVG files are still included in output #69
Comments
I managed to avoid the svg files to be emitted using the rollup-plugin-no-emit It's not ideal, but it gets the job done util this option is not available. |
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 I think that adding the option and |
Could be really nice to fix this issue :) A PR seems ready. |
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"
}
}
}, |
Any news with this? |
@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.
|
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. |
@EwenDC Thanks for the feedback! Indeed, we should set 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! |
I also confirm it's fixed! Thanks :) |
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. |
vite
still outputs the SVG files thatsvgr
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.The text was updated successfully, but these errors were encountered: