search

codefeathers / rollup-plugin-svelte-svg

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

SvgRegex too restricture for mozzila photon icons #10

Closed Chase22 closed 3 years ago

Chase22 commented 3 years ago

When using icons from mozzila Photon (https://design.firefox.com/icons/viewer/#) these icons come with a comment at the start of the file as well with path-tags with no content. These open path tags as well as the comment causes the importer to crash with the error "svg file did not start with tag. Unable to convert to Svelte component"

The error is thrown here https://github.com/codefeathers/rollup-plugin-svelte-svg/blob/1fa764b4c6106216d3eda2514114dfe00c6841e9/src/index.js#L44

The used regex is very restrictive and does not allow any other content aside from the well formatted svg in the file.

MKRhere commented 3 years ago

Thanks for reporting; comments should absolutely be ignored. I'll see how to fix, meanwhile you should be able to use by removing the leading comment!

haydenbleasel commented 3 years ago

Escaping the forward slash should fix the problem:

(<svg.*?)(/?>.*) -> (<svg.*?)(\/?>.*)

If you're just checking it's an SVG, you can even just get away with matching the first group:

<svg.*?

MKRhere commented 3 years ago

Published a new version 1.0.0-beta1 that seems to work fine with Mozilla Photon and other SVGs. While updating, remember to make this change in your config:

-import svelteSVG from "rollup-plugin-svelte-svg";
+import { svelteSVG } from "rollup-plugin-svelte-svg";