kazijawad / esbuild-plugin-svgr Goto Github PK

I have a scss file that looks like this:

index.scss

body {
  background-image: url(@src/logo.svg);
}

When I build the project, the resulting css file will contain the same @src/logo.svg url, which is invalid.

Note that I have configured esbuild and the sassPlugin to resolve @src to the correct path.

Also note that a similar thing happens in the following case:

index.jsx

import Logo from "@src/logo.svg?url";

The resulting index.js file will contain @src/logo.svg (which is incorrect).

The correct behaviour would be to resolve the path to its final path. Eg, if my esbuild config is

assetNames: "[dir]/[name].[hash]",

then the url should look like /logo.8Fgx1Fgm.svg

Thanks for creating this plugin!

Is it possible to specify a custom filter for esbuild-plugin-svgr? In my use case, I want to import SVGs as React components, but only if they're contained in my images/icons directory. I'm new to ESBuild, so apologies if this is handled in their API.

i want to use esbuild-plugin-svgr with @svgr/plugin-svgo.
svgo has prefixIds plugin which sets all the ids attributes to the SVG file name.
Since esbuild-plugin-svgr doesn't pass svgr the filePath, svgo is changing all the ids (of different svgs) to the same id which causing problems.

I've created a pr with a solution #4

Is there a way to use esbuild-plugin-svgr for svgs imported in js while having css urls passed through to a specified esbuild loader like dataurl?

As a work around, I added this chunk to the plugin's onLoad:

if (args.suffix === "?data") {
    return {
        contents: svg,
        loader: "dataurl",
    };
}

...and appended ?data to my .css svg paths.

I'd like to avoid modifying source to satisfy a build processes though. I'm also a little confused why onLoad is called for items flagged external regardless...

Running into this problem when using the plugin

✘ [ERROR] Cannot use "some/path/to/my.svg" as a URL                                                                                                                                                                                
                                                                                                                                                                                                                                                                  
    path/to/stylesheet.css:14601:30:                                                                                                                                                                                             
      14601 │   background-image: none, url("some/path/to/my.svg");
            ╵                               ~~~~~~~~~~~~~~~~~~~~~

The underlying cause is because this plugin treats all ResolveKinds as equivalent, meaning that url()s in CSS files will be referencing JS files which errors out.

The fix would be to likely restrict to handling just the following

import-statement
require-call
dynamic-import
require-resolve

as these will actually be from within JS by writing an onResolve fn that narrows the transformation.

Would a PR be accepted?

i am trying to import svg file like this

import { ReactComponent as ActivityIcon } from './pathToActivityIcon'

and it gives following error

 error: No matching export in "/pathToSvgFile.svg" for import "ReactComponent"
 import { ReactComponent } from '.pathToSvgFile.svg'

Hello!
Should this plugin work with the option bundle:false?

Thank you so much!

how to use ReactComponent as svg in react

I am trying to use this plugin for SVGs used as ReactComponent with ESBuild.

I am facing The entry point "./src/assets/text.svg" cannot be marked as external error.

Can someone help me resolve this ?

My config:

export default defineConfig({
	entry: entryPoints,
	sourcemap: false,
	clean: true,
	dts: false,
	external: ["react", "react-proptypes", "~video.js/dist/video-js.min.css"],
	esbuildPlugins: [
		svgr({
			exportType: "named"
		}),
		{
			name: lessLoader().name,
			setup: lessLoader().setup as any
		}
	]
});

Hello!
I'm trying to use named exports and it's not working.

export { ReactComponent as Example } from './example.svg';
results in:
src/components/example.svg import { createElement } from "react";

It only works if i use:
export { default as Example } from './example.svg';

I have tried with the following config but it's not worked too.
svgrPlugin({namedExport: 'ReactComponent'}),

Any suggestion?

Thank you!

I've been using this plugin for a while and yesterday I upgraded @svgr/core and svgo to the latest versions of each package. Now my build is failing with these errors:

✘ [ERROR] Expected identifier but found "?"

    src/CustomIcon/icons/ack.svg:1:1:
      1 │ <?xml version="1.0" encoding="UTF-8"?>
        ╵  ^

Any idea would could be wrong? Relevant dependency versions:

"@svgr/core": "8.0.0",
"esbuild": "0.17.11",
"esbuild-plugin-svgr": "1.1.0",
"svgo": "3.0.2",
"vite-plugin-svgr": "3.2.0",

Here's the plugin in my esbuild config file:

    svgr({
      dimensions: false,
      svgo: false,
      titleProp: true,
    }),