Icon Generator - Quickly generate icons from SF Symbols

[Floating.Point]

Icon Generator (Github)

Icon Generator quickly converts an SF Symbol to a .png for use in workflows.

 

 

This workflow was adapted from code by Mark Gavin - https://labs.appligent.com/pdfblog/convert-sf-symbols-to-images/

This workflow wouldn't be possible without the helpful guidance of Vitor. 

 

Edited October 1, 2022 by Floating.Point
Version update & video demo

[vitor]

Nice! I know people who’ll be really happy to have this. Ping @Chris Messina, because you mentioned something like this before.

 

@Floating.Point I’ll encourage you to share this on GitHub, so you can get contributions. We have a tutorial on the blog. Feel free to ask if something is unclear.

Riffing ideas:

• A feature¹ to simply save the icon (e.g. to the Desktop) because there are situations² where one does really need the icon as a file.
• Generating icons with a coloured border, to make sure it will always be legible in light and dark themes.³
• Auto-generating all the icons and showing them in a Script Filter or prepopulating a List Filter so they can be searched from Alfred’s window.
  

Suggested fixes:

• In your workflow’s directory, you have extraneous images.
• The way you’re referencing output.png means it’s using a path relative to your workflow directory and you’re not deleting the image, meaning the last icon will always end up there. Instead, prepend /tmp/ to the path. As in: /tmp/output.png. Though better to make it a more unique name, like /tmp/neigh.alfred.icon_generator.icon.png so it doesn’t conflict with other scripts.⁴
  

Naturally, all of this is optional, it’s your workflow. If you do share it on GitHub, please do let us know. I can help with those.

 

---

¹ Perhaps as a modifier (⌘↩) or as a User Configuration Checkbox.

² Example: Script Filter.

³ ImageMagick, which you’re already using, should be able to do it.

⁴ There are other more “proper” ways, but they add complexity.

[Floating.Point]

Hi Vitor,

 

Thanks for the excellent feedback. Your ideas are all very welcome. I actually have already uploaded to GitHub (see updated post), though I’m not sure I’ve followed best practices there. I’ll review the blog post you linked and try get better acquainted with GitHub. Then I would very much like to address your feedback. These will all be later-things. As it’s very late for me. 

But for now, cheers! 🍻 

[Floating.Point]

I've been working on a nice little update for this workflow inspired by Vitor's ideas. 

 

I've ran into a little bit of trouble which I have outlined below. For troubleshooting this issue, I have created a branch in GitHub (I think I'm starting to 'get it' with GitHub). Here's the link

 

I've set the default save location to /tmp/ and provided a new config field, where the user can choose their own location. Now we need unique naming for the outputs, so let's use the symbol itself for the file name. This works great for the first part of the workflow, where the file is generated and saved to disk. But it isn't playing nice with the AppleScript portion of the script, where the file is then copied to the clipboard.

 

It seems to fall over when transporting the variable out of Alfred and into AppleScript 

set output to (system attribute "output")
set the clipboard to (read (POSIX file output) as  {«class PNGf»})

 

It's interpreting the output as

…/ÙÄõ∏.png

instead of

…/􀛸.png

 

But if I hardcode the file path, like below, the AppleScript handles the file copy perfectly fine:

set the clipboard to (read (POSIX file "/Users/nathan/Desktop/􀛸.png") as  {«class PNGf»})

 

So if anyone can help get around that hiccup, the overall workflow is coming together pretty nicely.  It's actually super fast using Alfred's universal actions. Just select the symbol in the SF Symbols app, invoke Alfred's actions menu, and execute the workflow. Bam! Icon ready to go. One could even assign a hotkey / temporary macro if they needed to make a bunch of these.

 

I still need to explore ImageMagick further, for stuff like generating an outline, and I think I'd like to provide the option to choose a background colour and then generate a filled squircle using this colour, along with a drop shadow. Future features 😊 

 

Overall, it's really fun working on something that I hope might be useful for others.

 

Edited September 30, 2022 by Floating.Point
Added screenshot (because I like pictures and words often fail me)

[vitor]

Looks like an encoding problem. Why the weird characters for the name? If you’re looking to make it unique, use a {random:UUID} placeholder or a date.

[Floating.Point]

The weird characters are actually the symbols themselves, which of course rendered weirdly in the code block above). I just thought it would be cute to have the actual symbol as the file name. Maybe a bad idea?

 

 

[vitor]

Clever! But yes, you should avoid filenames with non-ASCII characters¹. Try to support them when you need to take user input (unpredictable), but when you have the control it’ll save you a lot of headaches to avoid them.

Even spaces can be problematic. For example: shells separate arguments by spaces which means you should always quote your variables. This applies to your first script filter, where you should have "$1" and "$output", otherwise spaces in those variables can mess up what you’re trying to do.

 

If you can extract the symbol’s name, that would be optimal. Otherwise make a unique name with the suggestions above.

If you really want the icon as the name, you can first save it to a temporary location, do what you have to do, then move it to the final destination with the icon name. Or try to work out the (likely) Unicode issue that is causing the original problem. I would recommend neither, at least before the rest of the Workflow is exactly as you want.²

Extra note: On GitHub you have the packaged workflow in the releases section (good!) but then have a repeat of it together with the README. The second one is redundant and won’t allow you to properly review submissions. Instead the recommendation is having the packaged workflow as a release, then the contents of the workflow directory in the repository itself. How the latter is organised is up to you, I keep everything in a Workflow directory. As an example, see the official Shortcuts workflow.³

 

 

---

¹ And even then, only a subset: _, 0–9, A–Z, a–z, no diacritics.

² Especially the second one. Dealing with text encoding issues can get frustrating.

³ Any of the official workflows, really. They all follow the same structure.

[Floating.Point]

I love avoiding headaches and have happily implemented {random:UUID} instead of pretty, though devilish, non-ASCII characters. I've also taken on board the imperative to quote variables to avoid problems around spaces. Finally, I understand your guidance around how to best author Alfred workflows on GitHub.

 

So, I'll finish up the current fixes; restructure the repository; and merge the branch into Master (as a point revision).

Hopefully I'm getting terminology here somewhat correct and Ill carry on with it

 

Thanks again Vitor!

[vitor]

33 minutes ago, Floating.Point said:

Hopefully I'm getting terminology here somewhat correct

 

You got it perfectly.

[Floating.Point]

Repo updated with new version along with video demonstration. Updates in first post 😊

[Floating.Point]

I think there might be a way to globally change the colour of all generated icons. We could use ImageMagick to search through all images in a folder, and where it finds single colour icons, it could update the RGB value, leaving the alpha channel in tact. Then we would have a way to update all monochrome icons within our Alfred Environment.  

 

If anyone is handy with ImageMagick and would like to contirbute, I could use some help (either here, or I've also started a discussion over in ImageMagick land).

 

The script should run along these lines:

1 Recursively search a directory.

2 Identifying all images that only contain one colour (+ alpha).

3 Replace that one colour with a new value (leaving the alpha as is).

4 Save over the image file.

 

I think I've found some leads for finding single colour images and for replacing RGB only … but I'm out of my depth for bringing this together into a single script as outlined above.

Edited October 1, 2022 by Floating.Point

[vitor]

Did a quick test, and you don’t need to ask users to install the font separately. If they install the SF Symbols app (which is required for the copy), the font is installed at the same time.

[Floating.Point]

Ah of course, that makes sense, I’ll simplify the readme. Thanks!

 

While I’m here, a little update. I’ve had some good guidance around how to use imagemagick to change colours of existing icons. And while I haven’t gotten my head around implementing it just yet, I hope to get back to it once work dies down again

[denno]

how do I install in Alfred?

 

[vitor]

1 hour ago, denno said:

how do I install in Alfred?

 

 

In the releases page, download the Icon.Generator.alfredworkflow and open it.