User:IagoQnsi/Emoji One recolor script

The icons in Category:Emoji One recolored circles were generated automatically. Here are the scripts I used and some info about how they work.

SVG modification script

First I downloaded all the SVGs I wanted to recolor, renamed the files with more descriptive names (e.g. `Emojione BW 1F1E6.svg` → `letter-a.svg`), and placed them in a directory called `icons/`.

Then I created a file with a list of colors. I used Material Design colors at level 600, which I got from materialuicolors.co. I put all of them in a file called `colors.txt`, which looked like this:

red,e53935
pink,d81b60
purple,8e24aa
deep-purple,5e35b1
indigo,3949ab
blue,1e88e5
light-blue,039be5
cyan,00acc1
teal,00897b
green,43a047
light-green,7cb342
lime,c0ca33
yellow,fdd835
amber,ffb300
orange,fb8c00
deep-orange,f4511e
brown,6d4c41
grey,757575
blue-grey,546e7a

In the same directory where I had `icons/` and `colors.txt`, I ran the following Bash script:

#!/usr/bin/env bash

mkdir -p out/
cat colors.txt | while read line
do
    IFS=',' read -ra row <<< "$line"
    colorname="${row[0]}"
    colorhex="${row[1]}"
    echo "$colorname"
    for icon in icons/*.svg
    do
        iconname=`basename "$icon"`
        cat "$icon" | sed -E "s/\/>/ fill=\"#$colorhex\"\/>/g" > "out/eo_circle_${colorname}_${iconname}"
        cat "out/eo_circle_${colorname}_${iconname}" | sed -E "1 s/>/><circle cx=\"32\" cy=\"32\" r=\"30\" fill=\"#fff\"\/>/" > "out/eo_circle_${colorname}_white_${iconname}"
    done
done

This script uses nested loops to iterate over every icon with every color. The two cat statements in the innermost loop modify the SVG files using sed. The first cat statement does a simple recolor, by searching for /> (the ending bit of every path/rect/circle/etc tag) and adding a fill="" statement in front of it. The second cat statement takes the SVG file generated by the previous line and transforms it further, by adding a <circle> tag immediately after the closing angle bracket of the opening <svg> tag. That circle code was taken directly from File:Emojione BW 1F311.svg.

Gallery script

When I decided to make a gallery page at Emoji One colored circles featuring all these icons, I decided to adapt my previous Bash script to generate a wikitable. Here's the gallery table generation script:

#!/usr/bin/env bash

mv gallery.txt gallery.txt.bak
echo '{| class="wikitable" style="text-align:center;font-size:90%"' >> gallery.txt
echo '|-' >> gallery.txt
echo '!width="150px"| Name' >> gallery.txt
cat colors.txt | while read line
do
    IFS=',' read -ra row <<< "$line"
    colorname="${row[0]}"
    colorhex="${row[1]}"

    echo "!width=\"40px\"| $colorname" >> gallery.txt
done

for icon in icons/*.svg
do
    iconname=`basename "$icon" .svg`
    echo "|-" >> gallery.txt
    echo "| $iconname" >> gallery.txt
    cat colors.txt | while read line
    do
        IFS=',' read -ra row <<< "$line"
        colorname="${row[0]}"
        colorhex="${row[1]}"

        echo "| [[File:eo_circle_${colorname}_${iconname}.svg|32x32px]]" >> gallery.txt
    done
done

echo "|}" >> gallery.txt