What program should I use for creating or editing a svg library? I’d like to add more icons from material.io and other svgs to the material library or a new library. I use Inkscape for svg editing right now but when opening the libraries I’m not seeing how to add individual svgs to the library.
Look at the Using Icons section in the docs here. There’s a specific way you need to have your SVGs so that Perspective will display them. I’ve used Inkscape successfully in tandem with the instructions in that link to have my own icons. You may need to open the SVG in a text editor like notepad++ or something to make sure the format is correct.
I use inkscape. Love it!
Easiest way to do it i have found is open the material.svg in Notepad++ or something.
Delete all you don’t need. And save a copy as. This is handy if you’re using a bunch of icons. Especially through a repeater or something.
Leave the header of the document. In tact.
I have a bunch of “Cards” that are displayed through flex repeaters. Each card represents a machine. There are 30 cards. With 10 svgs a piece.
I made a new material.svg called it machinestatus.svg. and deleted all the icons out of the big material file except for the ones i needed
It decreased the loading time of that page by order of magnitude.
<svg viewBox="0 0 24 24">
<g class="icon" id="watch_later">
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z" />
</g>
</svg>
Using inkscape. Set the document size to 24x24px do your work. save as PLAIN svg.
Open it in notepad.
add the new SVG from “< svg >” to " < /svg > " make sure indentation is correct. and that is it.
Its easier to save a new file. I have several dozen. When testing. Cause saving to a file already read by perspective is slow to update. So either save as a new name. Or restart perspective module to see results.
4 Likes
make sure. that you only include path unless you for some reason want to hard code fill color or stroke width or some such.
1 Like
Thank you! That filled in the gaps I needed between a svg and a svg library.
I use Inkscape too. This thread may be helpful too