feat: app icon/splash asset guidelines + app.json config (FIBEROPS-209)
- Fix slug typo: "firberops" → "fiberops" - Update splash backgroundColor to brand #F8FAFC (was Expo default #2563EB) - Update android adaptiveIcon backgroundColor to brand cyan #0891B2 - Add assets/ASSETS.md with full brand guidelines (colors, fonts, dimensions) - Add scripts/generate-assets.sh to regenerate PNGs from SVG sources via inkscape/rsvg-convert
This commit is contained in:
142
scripts/generate-assets.sh
Executable file
142
scripts/generate-assets.sh
Executable file
@@ -0,0 +1,142 @@
|
||||
#!/usr/bin/env bash
|
||||
# generate-assets.sh — Generate FiberOps PNG assets from SVG sources
|
||||
#
|
||||
# Requirements (install one):
|
||||
# brew install inkscape (macOS / Linux)
|
||||
# brew install librsvg (lighter: rsvg-convert)
|
||||
# apt-get install librsvg2-bin (Debian/Ubuntu)
|
||||
#
|
||||
# Usage:
|
||||
# ./scripts/generate-assets.sh
|
||||
#
|
||||
# Output: assets/*.png (overwrites existing files)
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
REPO_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
|
||||
ASSETS="$REPO_ROOT/assets"
|
||||
SVGS="$SCRIPT_DIR/svg"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Check for a suitable SVG renderer
|
||||
# ---------------------------------------------------------------------------
|
||||
if command -v inkscape &>/dev/null; then
|
||||
RENDERER="inkscape"
|
||||
elif command -v rsvg-convert &>/dev/null; then
|
||||
RENDERER="rsvg"
|
||||
else
|
||||
echo "ERROR: Install inkscape or librsvg (rsvg-convert) first." >&2
|
||||
echo " macOS: brew install inkscape OR brew install librsvg" >&2
|
||||
echo " Linux: apt-get install inkscape OR apt-get install librsvg2-bin" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
export_png() {
|
||||
local svg="$1" out="$2" w="$3" h="$4"
|
||||
echo " → $out (${w}×${h})"
|
||||
if [[ "$RENDERER" == "inkscape" ]]; then
|
||||
inkscape --export-type=png \
|
||||
--export-filename="$out" \
|
||||
--export-width="$w" \
|
||||
--export-height="$h" \
|
||||
"$svg" 2>/dev/null
|
||||
else
|
||||
rsvg-convert -w "$w" -h "$h" -o "$out" "$svg"
|
||||
fi
|
||||
}
|
||||
|
||||
mkdir -p "$SVGS"
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Inline SVG sources (written to scripts/svg/ so they can be edited)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
# 1. icon-bg.svg — opaque cyan square with "FO" (used for icon.png)
|
||||
cat > "$SVGS/icon-bg.svg" <<'SVG'
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
|
||||
<rect width="1024" height="1024" rx="230" ry="230" fill="#0891B2"/>
|
||||
<text x="512" y="590"
|
||||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||||
font-weight="700"
|
||||
font-size="460"
|
||||
text-anchor="middle"
|
||||
fill="#FFFFFF">FO</text>
|
||||
</svg>
|
||||
SVG
|
||||
|
||||
# 2. icon-fg.svg — transparent background, white "FO" (adaptive icon foreground)
|
||||
cat > "$SVGS/icon-fg.svg" <<'SVG'
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
|
||||
<text x="512" y="590"
|
||||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||||
font-weight="700"
|
||||
font-size="460"
|
||||
text-anchor="middle"
|
||||
fill="#FFFFFF">FO</text>
|
||||
</svg>
|
||||
SVG
|
||||
|
||||
# 3. splash.svg — transparent, centered logo for splash (composited over #F8FAFC)
|
||||
cat > "$SVGS/splash.svg" <<'SVG'
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
|
||||
<!-- Circle backdrop -->
|
||||
<circle cx="512" cy="430" r="220" fill="#0891B2"/>
|
||||
<!-- "FO" inside circle -->
|
||||
<text x="512" y="505"
|
||||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||||
font-weight="700"
|
||||
font-size="200"
|
||||
text-anchor="middle"
|
||||
fill="#FFFFFF">FO</text>
|
||||
<!-- "FiberOps" wordmark below -->
|
||||
<text x="512" y="730"
|
||||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||||
font-weight="600"
|
||||
font-size="110"
|
||||
text-anchor="middle"
|
||||
fill="#0891B2">FiberOps</text>
|
||||
</svg>
|
||||
SVG
|
||||
|
||||
# 4. favicon.svg — tiny "F" on cyan
|
||||
cat > "$SVGS/favicon.svg" <<'SVG'
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
|
||||
<rect width="48" height="48" rx="8" fill="#0891B2"/>
|
||||
<text x="24" y="36"
|
||||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||||
font-weight="700"
|
||||
font-size="30"
|
||||
text-anchor="middle"
|
||||
fill="#FFFFFF">F</text>
|
||||
</svg>
|
||||
SVG
|
||||
|
||||
# 5. monochrome.svg — white "FO" on transparent (Android 13 themed icon)
|
||||
cat > "$SVGS/monochrome.svg" <<'SVG'
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024">
|
||||
<text x="512" y="590"
|
||||
font-family="'Fira Sans', 'Inter', sans-serif"
|
||||
font-weight="700"
|
||||
font-size="460"
|
||||
text-anchor="middle"
|
||||
fill="#FFFFFF">FO</text>
|
||||
</svg>
|
||||
SVG
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Export PNGs
|
||||
# ---------------------------------------------------------------------------
|
||||
echo "Exporting PNGs..."
|
||||
|
||||
export_png "$SVGS/icon-bg.svg" "$ASSETS/icon.png" 1024 1024
|
||||
export_png "$SVGS/icon-fg.svg" "$ASSETS/adaptive-icon.png" 1024 1024
|
||||
export_png "$SVGS/icon-fg.svg" "$ASSETS/android-icon-foreground.png" 1024 1024
|
||||
export_png "$SVGS/icon-bg.svg" "$ASSETS/android-icon-background.png" 1024 1024
|
||||
export_png "$SVGS/monochrome.svg" "$ASSETS/android-icon-monochrome.png" 1024 1024
|
||||
export_png "$SVGS/splash.svg" "$ASSETS/splash-icon.png" 1024 1024
|
||||
export_png "$SVGS/favicon.svg" "$ASSETS/favicon.png" 48 48
|
||||
|
||||
echo ""
|
||||
echo "Done. Files written to assets/"
|
||||
echo "Verify with: ls -lh assets/*.png"
|
||||
Reference in New Issue
Block a user