I am working on converting an open-source icon library into the format necessary for Perspective, and I am not finding great documentation on syntax that the SVG renderer is ignoring vs accepting.
Here is the repo: https://lucide.dev
An example SVG:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
My example converted version:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="transparent" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<g class="icon" id="activity">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</g>
</svg>
But I am noticing that I can't get it to recognize the additional props in the <svg>
tag other than viewBox
. So I am always getting a greyed out icon, unless I add properties in the designer to override fill
and stroke
EDIT: It looks like the icon selection popup renders the stroke
attribute in the svg
tag accurately, but not the fill
.
EDIT #2: It looks like if I move the styling syntax in to the group tag it works as well, just not the svg tag... so maybe this is a bug?