for my UI design practice I often misuse Glyphs 3 as a drawing tool for icons, because I know and love the interface from building fonts and the results are much cleaner (also crisper in monitors) than anything that can be achieved in Figma, AI or similar vector tools.
So far so good, this all works great – but nearing the end of projects I often find myself in an endless copy-paste-scenario to export all the icons as single *.svg’s (some developers like to work with fonts some don’t).
Is there an efficient way to batch export an icon font as *.woff, *.otf and also single *.svg’s for each and every glyph / icon?
You can set an export path for each icon (I need that in Glyphs). And you can export multiple sizes (that is useful for Apples icons).
The “default” is just the description for this preset, you can ignore it.
With the “Height”, you can scale exported image. I usually draw scaled up 10 times (so for an icon that needs to be 18/18px, I set the drawing area to 180/180 units). Then I put the intended size into the Height filed.
the “1×” can be used to export “@2x” retina versions of an image. Mostly justful for .png export
Select the file type you need.
The “file name”. The {{{glyph.name}}} will be replaced by the name of the glyph. That can be used as is of you add a @2x for when you set the “2×”.
You need to open the filter once for every glyph to change the settings. After that, you can export all glyphs from the font view. The default would export pdfs in 100% scaling for each selected glyph.
Does this help?
If not, you could use drawbot to write the svg. search for it in the forum. That was discussed a few times.
that helps a lot! The interface is alright. (when it works it works )
The only gripe I’d have is that I would need to set the filter for every single glyph … in terms of practicality that unfortunately is not far from copy-pasting – I will give it a shot for new icon-sets.
Is this planned to be a fully fledged export feature for an upcoming version of glyphs?
Until then, you can use that script to propagate the settings to all glyphs:
Set the settings you need in the first glyph and then run this in the macro window.
setting = Font.glyphs[0].layers[0].userData["com.GeorgSeifert.ImageExportSettings"]
print(setting)
for g in Font.glyphs:
l = g.layers[0]
l.userData["com.GeorgSeifert.ImageExportSettings"] = setting.copy()
No final release date, but it has been out for a while and is fairly stable. You can opt into the cutting edge version in the Updates section in the Glyphs settings.
)