kazijawad / esbuild-plugin-svgr Goto Github PK
View Code? Open in Web Editor NEWAn esbuild plugin for importing SVGs as React components.
Home Page: https://npmjs.com/package/esbuild-plugin-svgr
License: MIT License
An esbuild plugin for importing SVGs as React components.
Home Page: https://npmjs.com/package/esbuild-plugin-svgr
License: MIT License
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 ResolveKind
s 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,
}),
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.