Skip to content

Commit 2052f8a

Browse files
SchneegansSchneegans
authored
Merge pull request #4 from kando-menu/feature/simplify-icons
2 parents 595ecf0 + 8b6cdb0 commit 2052f8a

File tree

3 files changed

+73
-278
lines changed

3 files changed

+73
-278
lines changed

‎icons/create.sh

Lines changed: 71 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,33 @@ EOL
7979
rm "$TMP_DIR/svgo.config.js"
8080
}
8181

82+
# Scales a given SVG file to 256x256. This is done by adding a <g> element to the root of the
83+
# SVG and scaling and translating the content.
84+
normalize_size() {
85+
local svg="$1"
86+
87+
if [[ -z "$svg" ]]; then
88+
echo "Usage: normalize_size <svg>"
89+
return 1
90+
fi
91+
92+
# This ensures that every tag is on a new line.
93+
optimize_svg "$svg"
94+
95+
local size=$(inkscape --query-width "$svg")
96+
local scale
97+
scale=$(echo "256 / $size" | bc -l)
98+
99+
# Insert a <g> after the <svg> line using sed.
100+
sed -e "/^<svg.*/a\\
101+
<g transform=\"translate(0, 0) scale($scale) \">" "$svg" > "$TMP_DIR/tmp.svg"
102+
mv "$TMP_DIR/tmp.svg" "$svg"
103+
104+
# Append the closing </g> tag before the final </svg> line using sed.
105+
sed -e '$i\'$'\n''</g>' "$svg" > "$TMP_DIR/tmp.svg"
106+
mv "$TMP_DIR/tmp.svg" "$svg"
107+
}
108+
82109
# Adds a margin to an SVG file. This is done by adding a <g> element to the root of the SVG and
83110
# scaling and translating the content. This function assumes that the SVG file has a size of 256x256.
84111
add_margin_to_svg() {
@@ -139,6 +166,10 @@ composite_svgs() {
139166
cp "$base_svg" "$TMP_DIR/base.svg"
140167
cp "$overlay_svg" "$TMP_DIR/overlay.svg"
141168

169+
# Normalize the size of the base and overlay SVGs.
170+
normalize_size "$TMP_DIR/base.svg"
171+
normalize_size "$TMP_DIR/overlay.svg"
172+
142173
add_margin_to_svg "$TMP_DIR/base.svg" "$base_margin"
143174
add_margin_to_svg "$TMP_DIR/overlay.svg" "$overlay_margin"
144175

@@ -170,55 +201,53 @@ composite_svgs_and_save_as_png() {
170201
rm "$TMP_DIR/tmp.svg"
171202
}
172203

204+
# ----------------------------- Temporary Recolored Tiny and Small Icons ------------------------- #
173205

174-
# ------------------------------------------ Tray Icons ------------------------------------------ #
206+
# We will use these icons multiple times, so we create temporary versions of them.
175207

176-
echo "Creating tray icons..."
177-
178-
# First, we create the tray icons for macOS. This requires three sizes: 16x16, 32x32, and 64x64.
179-
# All icons need to be black as they will be recolored by the system.
180-
181-
# We start by loading source/blossom_tiny.svg and replace the #f0cece color with black. We store
182-
# the result in $TMP_DIR/blossom_tiny_black.svg.
183-
ICON=$(sed 's/#f0cece/#000000/g' < source/blossom_tiny.svg)
208+
ICON=$(sed 's/path/path fill="#ffffff"/g' < source/blossom_tiny.svg)
209+
echo "$ICON" > "$TMP_DIR/blossom_tiny_white.svg"
210+
ICON=$(sed 's/path/path fill="#f0cece"/g' < source/blossom_tiny.svg)
211+
echo "$ICON" > "$TMP_DIR/blossom_tiny_light.svg"
212+
ICON=$(sed 's/path/path fill="#24272f"/g' < source/blossom_tiny.svg)
213+
echo "$ICON" > "$TMP_DIR/blossom_tiny_dark.svg"
214+
ICON=$(sed 's/path/path fill="#000000"/g' < source/blossom_tiny.svg)
184215
echo "$ICON" > "$TMP_DIR/blossom_tiny_black.svg"
185216

186-
convert_svg_to_png "$TMP_DIR/blossom_tiny_black.svg" "$OUTPUT_DIR/trayTemplate.png" 16
187-
convert_svg_to_png "$TMP_DIR/blossom_tiny_black.svg" "$OUTPUT_DIR/[email protected]" 32
188-
convert_svg_to_png "$TMP_DIR/blossom_tiny_black.svg" "$OUTPUT_DIR/[email protected]" 64
189-
rm "$TMP_DIR/blossom_tiny_black.svg"
217+
ICON=$(sed 's/path/path fill="#ffffff"/g' < source/blossom_small.svg)
218+
echo "$ICON" > "$TMP_DIR/blossom_small_white.svg"
219+
ICON=$(sed 's/path/path fill="#f0cece"/g' < source/blossom_small.svg)
220+
echo "$ICON" > "$TMP_DIR/blossom_small_light.svg"
221+
ICON=$(sed 's/path/path fill="#24272f"/g' < source/blossom_small.svg)
222+
echo "$ICON" > "$TMP_DIR/blossom_small_dark.svg"
223+
ICON=$(sed 's/path/path fill="#000000"/g' < source/blossom_small.svg)
224+
echo "$ICON" > "$TMP_DIR/blossom_small_black.svg"
190225

191-
# Then we need a light version of the tray icon and a dark version. The light version is simply
192-
# blossom_tiny.svg, for the dark version we replace #f0cece with #24272f.
193-
convert_svg_to_png source/blossom_tiny.svg "$OUTPUT_DIR/trayLight.png" 64
194-
ICON=$(sed 's/#f0cece/#24272f/g' < source/blossom_tiny.svg)
195-
echo "$ICON" > "$TMP_DIR/blossom_tiny_dark.svg"
196-
convert_svg_to_png "$TMP_DIR/blossom_tiny_dark.svg" "$OUTPUT_DIR/trayDark.png" 64
197-
rm "$TMP_DIR/blossom_tiny_dark.svg"
198-
199-
# For the colored tray icon, we overlay the blossom_tiny.svg onto the bg_tiny_square.svg.
200-
composite_svgs source/bg_tiny_square.svg source/blossom_tiny.svg $TMP_DIR/trayColor.svg 0 24
201-
convert_svg_to_png "$TMP_DIR/trayColor.svg" "$OUTPUT_DIR/trayColor.png" 64
226+
# ------------------------------------------ Tray Icons ------------------------------------------ #
202227

203-
# Pure black icon
204-
ICON=$(sed 's/#f0cece/#000000/g' < source/blossom_tiny.svg)
205-
echo "$ICON" > "$TMP_DIR/blossom_tiny_pure_black.svg"
206-
convert_svg_to_png "$TMP_DIR/blossom_tiny_pure_black.svg" "$OUTPUT_DIR/trayBlack.png" 64
207-
rm "$TMP_DIR/blossom_tiny_pure_black.svg"
228+
echo "Creating tray icons..."
208229

209-
# Pure white icon
210-
ICON=$(sed 's/#f0cece/#FFFFFF/g' < source/blossom_tiny.svg)
211-
echo "$ICON" > "$TMP_DIR/blossom_tiny_pure_white.svg"
212-
convert_svg_to_png "$TMP_DIR/blossom_tiny_pure_white.svg" "$OUTPUT_DIR/trayWhite.png" 64
213-
rm "$TMP_DIR/blossom_tiny_pure_white.svg"
230+
# First, we create the tray icons for macOS. This requires three sizes: 16x16, 32x32, and 64x64.
231+
convert_svg_to_png "source/blossom_tiny.svg" "$OUTPUT_DIR/trayTemplate.png" 16
232+
convert_svg_to_png "source/blossom_tiny.svg" "$OUTPUT_DIR/[email protected]" 32
233+
convert_svg_to_png "source/blossom_tiny.svg" "$OUTPUT_DIR/[email protected]" 64
234+
235+
# Then we need four versions of the tray icon.
236+
convert_svg_to_png "$TMP_DIR/blossom_tiny_white.svg" "$OUTPUT_DIR/trayWhite.png" 64
237+
convert_svg_to_png "$TMP_DIR/blossom_tiny_light.svg" "$OUTPUT_DIR/trayLight.png" 64
238+
convert_svg_to_png "$TMP_DIR/blossom_tiny_dark.svg" "$OUTPUT_DIR/trayDark.png" 64
239+
convert_svg_to_png "$TMP_DIR/blossom_tiny_black.svg" "$OUTPUT_DIR/trayBlack.png" 64
240+
241+
# For the colored tray icon, we overlay the light variant onto bg_tiny_square.svg.
242+
composite_svgs source/bg_tiny_square.svg $TMP_DIR/blossom_tiny_light.svg $TMP_DIR/trayColor.svg 0 24
243+
convert_svg_to_png "$TMP_DIR/trayColor.svg" "$OUTPUT_DIR/trayColor.png" 64
214244

215245
# ------------------------------------------ Favicon --------------------------------------------- #
216246

217247
echo "Creating favicon..."
218248

219-
# For the browser favicon, we overlay the blossom_small.svg onto the bg_tiny_square.svg.
220-
composite_svgs source/bg_tiny_square.svg source/blossom_small.svg $OUTPUT_DIR/favicon.svg 0 24
221-
249+
# For the browser favicon, we overlay the light small variant onto bg_tiny_square.svg.
250+
composite_svgs source/bg_tiny_square.svg $TMP_DIR/blossom_small_light.svg $OUTPUT_DIR/favicon.svg 0 24
222251

223252
# --------------------------------------- Homepage Icon ------------------------------------------ #
224253

@@ -248,8 +277,8 @@ WIN_TMP_DIR=$TMP_DIR/win
248277
mkdir -p $WIN_TMP_DIR
249278

250279
# Create PNGs at different sizes.
251-
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_tiny.svg "$WIN_TMP_DIR/16.png" 0 20 16
252-
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_small.svg "$WIN_TMP_DIR/32.png" 0 20 32
280+
composite_svgs_and_save_as_png source/bg_circle.svg $TMP_DIR/blossom_tiny_light.svg "$WIN_TMP_DIR/16.png" 0 20 16
281+
composite_svgs_and_save_as_png source/bg_circle.svg $TMP_DIR/blossom_small_light.svg "$WIN_TMP_DIR/32.png" 0 20 32
253282
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_medium.svg "$WIN_TMP_DIR/48.png" 0 20 48
254283
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_medium.svg "$WIN_TMP_DIR/64.png" 0 20 64
255284
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_large.svg "$WIN_TMP_DIR/96.png" 0 19 96
@@ -276,9 +305,9 @@ MAC_TMP_DIR=$TMP_DIR/icon.iconset
276305
mkdir -p $MAC_TMP_DIR
277306

278307
# Create PNGs at different sizes.
279-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_tiny.svg "$MAC_TMP_DIR/icon_16x16.png" 16 40 16
280-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_small.svg "$MAC_TMP_DIR/[email protected]" 16 36 32
281-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_small.svg "$MAC_TMP_DIR/icon_32x32.png" 16 36 32
308+
composite_svgs_and_save_as_png source/bg_square.svg $TMP_DIR/blossom_tiny_light.svg "$MAC_TMP_DIR/icon_16x16.png" 16 40 16
309+
composite_svgs_and_save_as_png source/bg_square.svg $TMP_DIR/blossom_small_light.svg "$MAC_TMP_DIR/[email protected]" 16 36 32
310+
composite_svgs_and_save_as_png source/bg_square.svg $TMP_DIR/blossom_small_light.svg "$MAC_TMP_DIR/icon_32x32.png" 16 36 32
282311
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_medium.svg "$MAC_TMP_DIR/[email protected]" 24 40 64
283312
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_medium.svg "$MAC_TMP_DIR/icon_128x128.png" 24 40 128
284313
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/[email protected]" 24 40 256

‎icons/source/blossom_small.svg

Lines changed: 1 addition & 132 deletions
Loading

0 commit comments

Comments
 (0)