search

codefeathers / rollup-plugin-svelte-svg

Import SVG files as Svelte Components
MIT License
75 stars 13 forks source link

Remove svg wrapper #6

Closed joycollector closed 4 years ago

joycollector commented 4 years ago

Modified approach to create svelte component.

I use regular expression to split svg into two parts (<svg..... ) and (>....). After that I'm using $$props to pass all props to the svg.

As result we are getting clean svg without wrapper with all passed properties.

joycollector commented 4 years ago

Fixes #5

MKRhere commented 4 years ago

Thanks for the PR. Using $$props was a brilliant idea. I didn't know of it.

But there seems to be a problem with your RegExp. If the tag was simply <svg> with no props, it matches <svg><... as the first group instead of <svg as you might expect.

With <svg ...props>, it correctly matches <svg ...props as first group. Parsing XML with RegExp is a landmine regardless, and is why I'd been holding out. Could you wait until this weekend for a proper solution?

joycollector commented 4 years ago

No problem. Updated regex to support additional cases. Worth to mention that I'm not "parsing" xml here. This is a simple string splitting before any ">".

joycollector commented 4 years ago

Parsing XML with RegExp is a landmine regardless, and is why I'd been holding out. Could you wait until this weekend for a proper solution?

BTW I've also tried the solution with xmldom. But it looks like an overkill to me for such a task.