Icon builder from font awesome

[Gnarflord]

I've just got a streamdeck for christmas and am loving it! Though I find it cumbersome to search for icons so I wrote a quick&dirty program to pull icons from Font Awesome and render them in the correct size as 72x72 png files:

What I'm asking is: Would this be a desirable feature to add to streamdeck-ui? I'd imagine a small text field where one would enter, for example, volume-up and the corrrect image is displayed.

To quote https://github.com/FortAwesome/Font-Awesome

In the Font Awesome Free download, the CC BY 4.0 license applies to all icons packaged as .svg and .js files types.

So the icons can be shared and remixed as long as attribution is given.

I see two ways of implementing this:

• streamdeck-ui could just wget https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/metadata/icons.yml, search for the desired icon and download only this from the correct location in the official github-repo
• streamdeck-ui could, by default, ship with all icons (all svgs are about 1.6 megabyte, but they could also be pre-rendered as .png instead)

I'd volunteer to implement this if it seems like a useful feature.

[RandomLegend]

Wow that is awesome (no pun intended!) would you mind sharing your quick&dirty program?

I downloaded some huge free icon pack but it's tedious to search for every icon as you mentioned aswell. And i really like the simplistic look of those icons

[Gnarflord]

Ok, but I mean really quick&dirty! This is a small python program, it needs a pip-package (installed via pip install fontawesome) and the font awesome as ttf (which I've installed under Arch via pacman -S ttf-font-awesome).

Problem is: Generic icons (volume control etc) and brand icons (spotify) are in seperate font-files. Because I'm lazy I simply run the script twice, once with fa-solid-900.ttf and then again with fa-brands-400.ttf

Good luck!

from PIL import ImageFont, Image, ImageDraw
import fontawesome as fa
import os

# List of icons to draw
# Elements are either "icon-name" or ["icon-name", "color-code"]
icons = [
        "volume-down",
        "volume-up",
        "fast-forward",
        "forward",
        "fast-backward",
        "microphone-slash",
        "volume-mute",
        "music",
        "undo",
        "play",
        ["spotify", "#1db954"], # Draw Spotify in nice green!
        ]

# Load a OpenFont format font from a local directory as an ImageFont object
# In this case, a TrueType font using the truetype method.

# Uncomment the needed TTF: fa-solid for generic icons and fa-brands for brand icons!
font = ImageFont.truetype(font='/usr/share/fonts/TTF/fa-solid-900.ttf', size=45)
#font = ImageFont.truetype(font='/usr/share/fonts/TTF/fa-brands-400.ttf', size=45)

for element in icons:
    if isinstance(element, list):
        color = element[1]
        icon = element[0]
    else:
        icon = element
        color = '#ffffff'

    print(icon, end=", ")
    print(fa.icons[icon])

    # Create a new image onto which the text will be added
    image = Image.new(mode='RGB', size=(72, 72), color='#000000')

    # Create an ImageDraw object onto which the font text will be placed
    draw = ImageDraw.Draw(im=image)

    # Draw the text onto our image
    draw.text(xy=(72/2, 72/2), text=fa.icons[icon], font=font, fill=color, anchor='mm')

    # Save icons in temp-folder
    path = "/tmp/" + icon + ".png"
    print(path)
    image.save(path)

[dodgyrabbit]

Probably doesn't make sense to bundle fonts with this program. However, maybe an alternative is to make it possible to pick the desired font and size for the "Text" field. "Nerd fonts" is also a really good option if you're looking for fonts with ligatures and glyphs.

[javiermolina1234]

mogrify is a quick way to convert every .svg file into a .png.

mogrify -format png -colorspace sRGB -negate -size 72x72 *.svg

Using the -negate option will output white icons on black background as in the image from the first comment. Get the "Free for desktop" Font Awesome SVGs, run them through the above command and you have a lot of icons immediately available

[guiambros]

Thanks @javiermolina1234, this is handy, but any way to centralize icons automatically? Icons with width < 72 end up left-aligned, thus looking awkward. For example, any numbers in solid/[1-9].svg.

[javiermolina1234]

@guiambros see if this helps:

mogrify -format png -colorspace sRGB -negate -resize 72 *.svg

Using -resize instead of -size and specifying only one of the dimensions (in this case, width) outputs images 72 pixels wide and whatever height is appropriate to maintain the aspect ratio.

This is what they look like on my version of streamdeck-ui (1.1.2):

Attaching .pngs of the conversion for comparison in case you get different results: fontawesome-solid-digits.zip

[javiermolina1234]

Looking at the release notes for version 2.0.3 , it seems SVGs are now supported out of the box since a few days ago, probably worth trying

[guiambros]

Thank you @javiermolina1234; really appreciate it. Weirdly, mogrify still didn't work for me, and got the same result with the digits in your zip file (still left-aligned). But your suggestion to use the svg directly worked perfectly! I had to manually add color, but that's easy to automate.

(second row has the digits from your zip file; third row has the svg files)

So there's either some difference between versions, or maybe the behavior has changed slightly from Stream Deck MK2 vs. Stream Deck XL (which seems to be the one you're using).

Either way, I'll stick to the svg files. Thank you!

[imakecodes]

I'm using svg files, works fine and font awesome have SVG too. The problem is: the default color of the svgs is black and we can't change the display background yet

[coolapso]

hi, this project seems to be stale and a new fork as been made with the intention of replacing this one.

if this still an issue please reopen it at: https://github.com/streamdeck-linux-gui/streamdeck-linux-gui