Comments (9)
I would leave the job of making sure class
and attributes
don't clash to the developer, honestly. For example, you as a developer might know that the svg
being used in a certain context have a fill
attribute which makes useless a class that changes the color (unless fill="currentColor"
). Also, when it comes to class
merging is more about the stylesheet generation order that makes the classes get applied to the SVG; which again is the dev job to make sure they are the right order for what you need (I am thinking of Tailwind that does the job for you already :) ).
Finally, for merging prop classes and SVG ones, I would use a tiny runtime library (228B!) to not have other implementation laying around.
With this said, I would definitely add the possibility and then the dev needs to make sure he's not breaking things :)
from sveltekit-svg.
Hi @poppa, I was just palying around with this plugin and I expected this to have already been implemented honestly.
For instance, vite-plugin-svelte-svg and rollup-plugin-svelte-svg have this feature.
It's very straightforward to implement, all you have to do is add a {...props}
to the end of the opening tag before passing the string to the Svelte compiler.
Here's how "vite-plugin-svelte-svg" does it: see
Here's how "rollup-plugin-svelte-svg" does it: see
As simple as it gets.
from sveltekit-svg.
since you need to parse all attributes in the SVG to merge the values if the attribute passed from the Svelte component already exists
You don't, just put {...props}
after all the attributes and the user-defined attributes will take precedence, Svelte already takes care of stuff like that.
from sveltekit-svg.
Hi @AradAral. You are more than welcome to create a PR π
from sveltekit-svg.
Thank you @poppa for implementing this! π
from sveltekit-svg.
I will take a look at it in the coming days π
from sveltekit-svg.
@vabatta I don't know if this is such a good idea. I think it will be difficult to manage this in an efficient way since you need to parse all attributes in the SVG to merge the values if the attribute passed from the Svelte component already exists in the SVG node. Take your class
attribute for example: It's not unthinkable that an SVG already has a class
attribute.
What I usually do is wrapping the SVG so I can style it from the parent node:
<div class="svg-wrapper">
<MySvg />
</div>
<style>
.svg-wrapper {
:global(svg) {
// svg style
}
}
</style>
Let me know if you have a good argument for forwarding attributes to the SVG and I will reconsider π
from sveltekit-svg.
since you need to parse all attributes in the SVG to merge the values if the attribute passed from the Svelte component already exists
You don't, just put
{...props}
after all the attributes and the user-defined attributes will take precedence, Svelte already takes care of stuff like that.
{...$$restProps}
* in this case
from sveltekit-svg.
@Tropix126 Well, you use $$restProps
when your component itself has props, in which case β$$restPropsβ would contain the "rest of the props" passed to the component, as the name implies. In this case, where the component doesn't have any props, both $$props
and $$restProps
would be the same.
from sveltekit-svg.
Related Issues (20)
- Use events on components HOT 3
- Modify the SVG doesn't hot reload HOT 2
- SSR true HOT 7
- Support alternative datauri encodings HOT 2
- Error: <Btn_Next> is not a valid SSR component. HOT 18
- Svelte 4 support HOT 1
- Import SVG component dynamically based on input that the component is getting HOT 2
- Using SVG as component is giving me an error? HOT 4
- Render the contents of the `<svg>` tag using `{@html}` in the component mode HOT 6
- Add a hook to allow plugin users to modify the resulting component HOT 3
- `Error: Cannot find module 'svgo'` HOT 4
- Simplify library usage for common usage HOT 7
- Sourcemap issues HOT 6
- Get SVGSVGElement from generated component HOT 2
- Not a valid SSR component HOT 2
- PSA: css selectors that target an imported `.svg` are considered `unused` and are pruned HOT 1
- `?url` + SVGO? HOT 11
- Svelte 5 Support HOT 5
- Error: Cannot find module '@rollup/pluginutils' HOT 6
- Fails to compile in Svelte 5: "Invalid compiler option: css: "none" is no longer a valid option" HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sveltekit-svg.