I wanted to learn how SVG <symbol> works. Test of fill, outline, and gradient fill:
- Download all the svg icons from https://game-icons.net/
- Combine the individual files from using <svg … viewBox=…>…</svg> to <symbol viewBox=…>…</symbol>, making them reusable icons. (icon-to-svg-symbols.py)
- Reference the symbols by using <use href="#centaur" x=… y=… width=… height=… />, and then apply styling using fill=…, stroke=…, etc.
This means I can use any icon from game-icons with a single SVG <use>.
Minor glitch: I was planning to use the icon filename as the id= but occasionally multiple icons use the same filename, like lorc/hand and sbed/hand. I’ll deal with this later.
Minor issue: the stroke width seems to be in viewbox coordinates, not in the output size coordinates, so that I have to look beyond this abstraction to be able to apply strokes. However … all of game-icons seems to be 512x512 so it’s not so bad in this particular case.
./icon-to-svg-symbols.py centaur baby-face moebius-triangle \ justice-star moebius-star maze-saw maze-cornea orbital \ pentagram-rose triorb triple-corn triple-beak zigzag-cage \ ubisoft-sun triple-yin triple-plier divided-spiral \ concentric-crescents barbed-sun yin-yang trinacria anarchy \ >_icons.svg
Related: C header-only library https://github.com/memononen/nanosvg can render these icons to a raster image. However I’m using these on the web so I will use the browser’s SVG renderer for now.
Related: the icons are available as a TTF font https://github.com/seiyria/gameicons-font