Skip to content

Commit ad75b28

Browse files
SchneegansSchneegans
committed
🔧 Bring macOS icon closer to the guidelines
1 parent eb8a5e0 commit ad75b28

File tree

2 files changed

+40
-36
lines changed

2 files changed

+40
-36
lines changed

‎icons/create.sh

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -123,16 +123,18 @@ composite_svgs() {
123123
local base_svg="$1"
124124
local overlay_svg="$2"
125125
local output_svg="$3"
126-
local overlay_margin="$4"
126+
local base_margin="$4"
127+
local overlay_margin="$5"
127128

128-
if [[ -z "$base_svg" || -z "$overlay_svg" || -z "$overlay_margin" || -z "$output_svg" ]]; then
129-
echo "Usage: composite_svgs <base_svg> <overlay_svg> <output_svg> <overlay_margin>"
129+
if [[ -z "$base_svg" || -z "$overlay_svg" || -z "$base_margin" || -z "$overlay_margin" || -z "$output_svg" ]]; then
130+
echo "Usage: composite_svgs <base_svg> <overlay_svg> <output_svg> <base_margin> <overlay_margin>"
130131
return 1
131132
fi
132133

133134
cp "$base_svg" "$TMP_DIR/base.svg"
134135
cp "$overlay_svg" "$TMP_DIR/overlay.svg"
135136

137+
add_margin_to_svg "$TMP_DIR/base.svg" "$base_margin"
136138
add_margin_to_svg "$TMP_DIR/overlay.svg" "$overlay_margin"
137139

138140
# Optimize the base and overlay SVGs.
@@ -149,15 +151,16 @@ composite_svgs_and_save_as_png() {
149151
local base_svg="$1"
150152
local overlay_svg="$2"
151153
local output_png="$3"
152-
local overlay_margin="$4"
153-
local size="$5"
154+
local base_margin="$4"
155+
local overlay_margin="$5"
156+
local size="$6"
154157

155-
if [[ -z "$base_svg" || -z "$overlay_svg" || -z "$output_png" || -z "$overlay_margin" || -z "$size" ]]; then
156-
echo "Usage: composite_svgs_and_save_as_png <base_svg> <overlay_svg> <output_png> <overlay_margin> <size>"
158+
if [[ -z "$base_svg" || -z "$overlay_svg" || -z "$output_png" || -z "$base_margin" || -z "$overlay_margin" || -z "$size" ]]; then
159+
echo "Usage: composite_svgs_and_save_as_png <base_svg> <overlay_svg> <output_png> <base_margin> <overlay_margin> <size>"
157160
return 1
158161
fi
159162

160-
composite_svgs "$base_svg" "$overlay_svg" "$TMP_DIR/tmp.svg" "$overlay_margin"
163+
composite_svgs "$base_svg" "$overlay_svg" "$TMP_DIR/tmp.svg" "$base_margin" "$overlay_margin"
161164
convert_svg_to_png "$TMP_DIR/tmp.svg" "$output_png" "$size"
162165
rm "$TMP_DIR/tmp.svg"
163166
}
@@ -189,7 +192,7 @@ convert_svg_to_png "$TMP_DIR/blossom_tiny_dark.svg" "$OUTPUT_DIR/trayDark.png" 6
189192
rm "$TMP_DIR/blossom_tiny_dark.svg"
190193

191194
# For the colored tray icon, we overlay the blossom_tiny.svg onto the bg_tiny_square.svg.
192-
composite_svgs source/bg_tiny_square.svg source/blossom_tiny.svg $TMP_DIR/trayColor.svg 24
195+
composite_svgs source/bg_tiny_square.svg source/blossom_tiny.svg $TMP_DIR/trayColor.svg 0 24
193196
convert_svg_to_png "$TMP_DIR/trayColor.svg" "$OUTPUT_DIR/trayColor.png" 64
194197

195198

@@ -198,26 +201,26 @@ convert_svg_to_png "$TMP_DIR/trayColor.svg" "$OUTPUT_DIR/trayColor.png" 64
198201
echo "Creating favicon..."
199202

200203
# For the browser favicon, we overlay the blossom_small.svg onto the bg_tiny_square.svg.
201-
composite_svgs source/bg_tiny_square.svg source/blossom_small.svg $OUTPUT_DIR/favicon.svg 24
204+
composite_svgs source/bg_tiny_square.svg source/blossom_small.svg $OUTPUT_DIR/favicon.svg 0 24
202205

203206

204207
# --------------------------------------- Homepage Icon ------------------------------------------ #
205208

206209
echo "Creating homepage icon..."
207210

208211
# The homepage icon is an SVG made from blossom_medium.svg on top of bg_square.svg.
209-
composite_svgs source/bg_square.svg source/blossom_medium.svg $OUTPUT_DIR/web-icon.svg 32
212+
composite_svgs source/bg_square.svg source/blossom_medium.svg $OUTPUT_DIR/web-icon.svg 16 32
210213

211214

212215
# ---------------------------------------- Linux Icon -------------------------------------------- #
213216

214217
echo "Creating Linux icon..."
215218

216219
# The Linux icon is an SVG made from blossom_medium.svg on top of bg_circle.svg.
217-
composite_svgs source/bg_circle.svg source/blossom_medium.svg $OUTPUT_DIR/icon.svg 32
220+
composite_svgs source/bg_circle.svg source/blossom_medium.svg $OUTPUT_DIR/icon.svg 0 32
218221

219222
# We also need a png version of the icon.
220-
convert_svg_to_png "$OUTPUT_DIR/icon.svg" "$OUTPUT_DIR/icon.png" 512
223+
convert_svg_to_png "$OUTPUT_DIR/icon.svg" "$OUTPUT_DIR/icon.png" 0 512
221224

222225

223226
# ---------------------------------------- Windows Icon ------------------------------------------ #
@@ -229,12 +232,12 @@ WIN_TMP_DIR=$TMP_DIR/win
229232
mkdir -p $WIN_TMP_DIR
230233

231234
# Create PNGs at different sizes.
232-
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_tiny.svg "$WIN_TMP_DIR/16.png" 32 16
233-
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_small.svg "$WIN_TMP_DIR/32.png" 32 32
234-
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_medium.svg "$WIN_TMP_DIR/48.png" 32 48
235-
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_medium.svg "$WIN_TMP_DIR/64.png" 32 64
236-
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_large.svg "$WIN_TMP_DIR/96.png" 32 96
237-
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_large.svg "$WIN_TMP_DIR/256.png" 32 256
235+
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_tiny.svg "$WIN_TMP_DIR/16.png" 0 32 16
236+
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_small.svg "$WIN_TMP_DIR/32.png" 0 32 32
237+
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_medium.svg "$WIN_TMP_DIR/48.png" 0 32 48
238+
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_medium.svg "$WIN_TMP_DIR/64.png" 0 32 64
239+
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_large.svg "$WIN_TMP_DIR/96.png" 0 32 96
240+
composite_svgs_and_save_as_png source/bg_circle.svg source/blossom_large.svg "$WIN_TMP_DIR/256.png" 0 32 256
238241

239242
convert \
240243
"$WIN_TMP_DIR/16.png" \
@@ -255,16 +258,16 @@ MAC_TMP_DIR=$TMP_DIR/icon.iconset
255258
mkdir -p $MAC_TMP_DIR
256259

257260
# Create PNGs at different sizes.
258-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_tiny.svg "$MAC_TMP_DIR/icon_16x16.png" 40 16
259-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_small.svg "$MAC_TMP_DIR/[email protected]" 36 32
260-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_small.svg "$MAC_TMP_DIR/icon_32x32.png" 36 32
261-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_medium.svg "$MAC_TMP_DIR/[email protected]" 32 64
262-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_medium.svg "$MAC_TMP_DIR/icon_128x128.png" 32 128
263-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/[email protected]" 32 256
264-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/icon_256x256.png" 32 256
265-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/[email protected]" 32 512
266-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/icon_512x512.png" 32 512
267-
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/[email protected]" 32 1024
261+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_tiny.svg "$MAC_TMP_DIR/icon_16x16.png" 16 40 16
262+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_small.svg "$MAC_TMP_DIR/[email protected]" 16 36 32
263+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_small.svg "$MAC_TMP_DIR/icon_32x32.png" 16 36 32
264+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_medium.svg "$MAC_TMP_DIR/[email protected]" 24 40 64
265+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_medium.svg "$MAC_TMP_DIR/icon_128x128.png" 24 40 128
266+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/[email protected]" 24 40 256
267+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/icon_256x256.png" 24 40 256
268+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/[email protected]" 24 40 512
269+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/icon_512x512.png" 24 40 512
270+
composite_svgs_and_save_as_png source/bg_square.svg source/blossom_large.svg "$MAC_TMP_DIR/[email protected]" 24 40 1024
268271

269272
# Create the icns file. If the iconutil command is not available, we print a warning and skip this step.
270273
if command -v iconutil >/dev/null 2>&1; then
@@ -279,7 +282,7 @@ fi
279282
echo "Creating social icon..."
280283

281284
# The social icon is an SVG made from blossom_medium.svg on top of bg_full.svg.
282-
composite_svgs source/bg_full.svg source/blossom_medium.svg $OUTPUT_DIR/social.svg 32
285+
composite_svgs source/bg_full.svg source/blossom_medium.svg $OUTPUT_DIR/social.svg 0 32
283286

284287
# We also need a png version of the icon.
285288
convert_svg_to_png "$OUTPUT_DIR/social.svg" "$OUTPUT_DIR/social.png" 512

‎icons/source/bg_square.svg

Lines changed: 7 additions & 6 deletions
Loading

0 commit comments

Comments
 (0)