mirror of
https://github.com/feschber/lan-mouse.git
synced 2026-05-08 15:18:05 +03:00
makeicns.sh: produce Big Sur+ style macOS app icon
The previous script generated a 1024x1024 icon from the SVG with no squircle background and no transparent padding, which caused macOS to render the Dock/Finder icon noticeably larger than first-party apps and without the rounded-square shape users expect. Rewrite the script to follow Apple's Big Sur+ icon template: - 1024x1024 canvas - 824x824 white squircle, centered (100px transparent padding outside) - Artwork rendered at 560x560, centered inside the squircle - Squircle corner radius ~22.5% of the squircle size Use rsvg-convert to rasterize the SVG (ImageMagick crops this particular SVG when rendering directly), then composite onto the squircle background in two steps for reliability. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
committed by
Ferdinand Schober
parent
e6cd1630b2
commit
f858a7de00
@@ -3,8 +3,15 @@ set -e
|
|||||||
|
|
||||||
usage() {
|
usage() {
|
||||||
cat <<EOF
|
cat <<EOF
|
||||||
$0: Make a macOS icns file from an SVG with ImageMagick and iconutil.
|
$0: Make a macOS icns file from an SVG with rsvg-convert, ImageMagick and iconutil.
|
||||||
usage: $0 [SVG [ICNS [ICONSET]]
|
|
||||||
|
Follows the Big Sur+ icon template:
|
||||||
|
- 1024x1024 canvas with a rounded-square (squircle) background
|
||||||
|
- Icon artwork scaled to fit inside an 824x824 content area, centered
|
||||||
|
- Transparent padding outside the squircle so the Dock/Finder render it
|
||||||
|
like other first-party macOS apps.
|
||||||
|
|
||||||
|
usage: $0 [SVG [ICNS [ICONSET]]]
|
||||||
|
|
||||||
ARGUMENTS
|
ARGUMENTS
|
||||||
SVG The SVG file to convert
|
SVG The SVG file to convert
|
||||||
@@ -28,15 +35,55 @@ iconset="${3:-./target/icon.iconset}"
|
|||||||
|
|
||||||
set -u
|
set -u
|
||||||
|
|
||||||
mkdir -p "$iconset"
|
workdir="$(dirname "$iconset")/icon-work"
|
||||||
magick "$svg" -background none -resize 1024x1024 "$iconset"/icon_512x512@2x.png
|
rm -rf "$iconset" "$workdir"
|
||||||
magick "$svg" -background none -resize 512x512 "$iconset"/icon_512x512.png
|
mkdir -p "$iconset" "$workdir"
|
||||||
magick "$svg" -background none -resize 256x256 "$iconset"/icon_256x256.png
|
|
||||||
magick "$svg" -background none -resize 128x128 "$iconset"/icon_128x128.png
|
# Big Sur+ macOS icon template proportions (in a 1024 canvas):
|
||||||
magick "$svg" -background none -resize 64x64 "$iconset"/icon_32x32@2x.png
|
# canvas = 1024
|
||||||
magick "$svg" -background none -resize 32x32 "$iconset"/icon_32x32.png
|
# squircle = 824 (the white rounded-square background, inset 100px)
|
||||||
magick "$svg" -background none -resize 16x16 "$iconset"/icon_16x16.png
|
# content = 560 (artwork inside the squircle, with generous margin)
|
||||||
cp "$iconset"/icon_512x512.png "$iconset"/icon_256x256@2x.png
|
# radius = 185 (~22.5% of the squircle, the characteristic curvature)
|
||||||
cp "$iconset"/icon_256x256.png "$iconset"/icon_128x128@2x.png
|
CANVAS=1024
|
||||||
cp "$iconset"/icon_32x32.png "$iconset"/icon_16x16@2x.png
|
SQUIRCLE=824
|
||||||
|
CONTENT=560
|
||||||
|
RADIUS=185
|
||||||
|
BG_COLOR="#FFFFFF"
|
||||||
|
SQUIRCLE_OFFSET=$(( (CANVAS - SQUIRCLE) / 2 ))
|
||||||
|
CONTENT_OFFSET=$(( (CANVAS - CONTENT) / 2 ))
|
||||||
|
|
||||||
|
# 1) Render the SVG to the content size at full fidelity.
|
||||||
|
# rsvg-convert handles our SVG correctly; ImageMagick sometimes crops it.
|
||||||
|
rsvg-convert -w "$CONTENT" -h "$CONTENT" "$svg" -o "$workdir/content.png"
|
||||||
|
|
||||||
|
# 2) Draw the rounded-square (squircle) background on a transparent canvas.
|
||||||
|
# The squircle is inset from the canvas edges (transparent padding), so the
|
||||||
|
# Dock/Finder render it at the same visual size as other first-party apps.
|
||||||
|
magick -size ${CANVAS}x${CANVAS} xc:none \
|
||||||
|
-fill "$BG_COLOR" \
|
||||||
|
-draw "roundrectangle ${SQUIRCLE_OFFSET},${SQUIRCLE_OFFSET} $((CANVAS-SQUIRCLE_OFFSET-1)),$((CANVAS-SQUIRCLE_OFFSET-1)) $RADIUS,$RADIUS" \
|
||||||
|
"$workdir/background.png"
|
||||||
|
|
||||||
|
# 3) Composite the artwork onto the background, centered inside the content area.
|
||||||
|
magick "$workdir/background.png" \
|
||||||
|
"$workdir/content.png" -geometry +${CONTENT_OFFSET}+${CONTENT_OFFSET} -composite \
|
||||||
|
"$workdir/icon-1024.png"
|
||||||
|
|
||||||
|
# 4) Generate each iconset size from the master so all sizes share the same
|
||||||
|
# squircle proportions and look consistent at every resolution.
|
||||||
|
for size in 1024 512 256 128 64 32 16; do
|
||||||
|
magick "$workdir/icon-1024.png" -resize ${size}x${size} "$workdir/${size}.png"
|
||||||
|
done
|
||||||
|
|
||||||
|
cp "$workdir/1024.png" "$iconset"/icon_512x512@2x.png
|
||||||
|
cp "$workdir/512.png" "$iconset"/icon_512x512.png
|
||||||
|
cp "$workdir/512.png" "$iconset"/icon_256x256@2x.png
|
||||||
|
cp "$workdir/256.png" "$iconset"/icon_256x256.png
|
||||||
|
cp "$workdir/256.png" "$iconset"/icon_128x128@2x.png
|
||||||
|
cp "$workdir/128.png" "$iconset"/icon_128x128.png
|
||||||
|
cp "$workdir/64.png" "$iconset"/icon_32x32@2x.png
|
||||||
|
cp "$workdir/32.png" "$iconset"/icon_32x32.png
|
||||||
|
cp "$workdir/32.png" "$iconset"/icon_16x16@2x.png
|
||||||
|
cp "$workdir/16.png" "$iconset"/icon_16x16.png
|
||||||
|
|
||||||
iconutil -c icns "$iconset" -o "$icns"
|
iconutil -c icns "$iconset" -o "$icns"
|
||||||
|
|||||||
Reference in New Issue
Block a user