OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity
element-web/scripts/make-icons.sh

118 lines
5.7 KiB
Bash
Raw Normal View History

Makeover! Also add script for generating the PNGs and add pre-rendered PNGs for the Linux electron build which means you don't need icns2png to build it and the Linux icons are straight from the SVG rather than resized bitmaps.
2016-12-08 17:21:37 +01:00
#!/bin/bash
Make scripts/make-icons.sh work on linux This commit detects if the macos-only utility `iconutil` is available in the PATH, if it is, then the icns is built as usual. However if it isn't (such as on a linux system), then it checks for `png2icns` and uses it if possible. Signed-off-by: Abel Luck <abel@guardianproject.info>
2019-02-13 11:59:36 +01:00
#
# Converts an svg logo into the various image resources required by
# the various platforms deployments.
#
# On debian-based systems you need these deps:
# apt-get install xmlstarlet python3-cairosvg icnsutils
Makeover! Also add script for generating the PNGs and add pre-rendered PNGs for the Linux electron build which means you don't need icns2png to build it and the Linux icons are straight from the SVG rather than resized bitmaps.
2016-12-08 17:21:37 +01:00
if [ $# != 1 ]
then
echo "Usage: $0 <svg file>"
exit
fi
set -e
set -x
tmpdir=`mktemp -d 2>/dev/null || mktemp -d -t 'icontmp'`
Numeracy
2016-12-08 19:04:44 +01:00
for i in 1024 512 310 256 192 180 152 150 144 128 120 114 96 76 72 70 64 60 57 48 36 32 24 16
Makeover! Also add script for generating the PNGs and add pre-rendered PNGs for the Linux electron build which means you don't need icns2png to build it and the Linux icons are straight from the SVG rather than resized bitmaps.
2016-12-08 17:21:37 +01:00
do
#convert -background none -density 1000 -resize $i -extent $i -gravity center "$1" "$tmpdir/$i.png"
# Above is the imagemagick command to render an svg to png. Unfortunately, its support for SVGs
# with CSS isn't very good (with rsvg and even moreso the built in renderer) so we use cairosvg.
# This can be installed with:
# pip install cairosvg==1.0.22 # Version 2 doesn't support python 2
# pip install tinycss
# pip install cssselect # These are necessary for CSS support
# You'll also need xmlstarlet from your favourite package manager
#
# Cairosvg doesn't suport rendering at a specific size (https://github.com/Kozea/CairoSVG/issues/83#issuecomment-215720176)
# so we have to 'resize the svg' first (add width and height attributes to the svg element) to make it render at the
# size we need.
# XXX: This will break if the svg already has width and height attributes
cp "$1" "$tmpdir/tmp.svg"
xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n width -v $i "$tmpdir/tmp.svg" > "$tmpdir/tmp2.svg"
xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n height -v $i "$tmpdir/tmp2.svg" > "$tmpdir/tmp3.svg"
cairosvg -f png -o "$tmpdir/$i.png" "$tmpdir/tmp3.svg"
rm "$tmpdir/tmp.svg" "$tmpdir/tmp2.svg" "$tmpdir/tmp3.svg"
done
# one more for the non-square mstile
cp "$1" "$tmpdir/tmp.svg"
xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n width -v 310 "$tmpdir/tmp.svg" > "$tmpdir/tmp2.svg"
xmlstarlet ed -N x="http://www.w3.org/2000/svg" --insert "/x:svg" --type attr -n height -v 150 "$tmpdir/tmp2.svg" > "$tmpdir/tmp3.svg"
cairosvg -f png -o "$tmpdir/310x150.png" "$tmpdir/tmp3.svg"
rm "$tmpdir/tmp.svg" "$tmpdir/tmp2.svg" "$tmpdir/tmp3.svg"
mkdir "$tmpdir/Riot.iconset"
cp "$tmpdir/16.png" "$tmpdir/Riot.iconset/icon_16x16.png"
cp "$tmpdir/32.png" "$tmpdir/Riot.iconset/icon_16x16@2x.png"
cp "$tmpdir/32.png" "$tmpdir/Riot.iconset/icon_32x32.png"
cp "$tmpdir/64.png" "$tmpdir/Riot.iconset/icon_32x32@2x.png"
cp "$tmpdir/128.png" "$tmpdir/Riot.iconset/icon_128x128.png"
cp "$tmpdir/256.png" "$tmpdir/Riot.iconset/icon_128x128@2x.png"
cp "$tmpdir/256.png" "$tmpdir/Riot.iconset/icon_256x256.png"
cp "$tmpdir/512.png" "$tmpdir/Riot.iconset/icon_256x256@2x.png"
cp "$tmpdir/512.png" "$tmpdir/Riot.iconset/icon_512x512.png"
cp "$tmpdir/1024.png" "$tmpdir/Riot.iconset/icon_512x512@2x.png"
Make scripts/make-icons.sh work on linux This commit detects if the macos-only utility `iconutil` is available in the PATH, if it is, then the icns is built as usual. However if it isn't (such as on a linux system), then it checks for `png2icns` and uses it if possible. Signed-off-by: Abel Luck <abel@guardianproject.info>
2019-02-13 11:59:36 +01:00
if [ -x "$(command -v iconutil)" ]; then
# available on macos
iconutil -c icns -o electron_app/build/icon.icns "$tmpdir/Riot.iconset"
elif [ -x "$(command -v png2icns)" ]; then
# available on linux
# png2icns is more finicky about its input than iconutil
# 1. it doesn't support a 64x64 (aka 32x32@2x)
# 2. it doesn't like duplicates (128x128@2x == 256x256)
rm "$tmpdir/Riot.iconset/icon_128x128@2x.png"
rm "$tmpdir/Riot.iconset/icon_256x256@2x.png"
rm "$tmpdir/Riot.iconset/icon_16x16@2x.png"
rm "$tmpdir/Riot.iconset/icon_32x32@2x.png"
png2icns electron_app/build/icon.icns "$tmpdir"/Riot.iconset/*png
else
echo "WARNING: Unsupported platform. Skipping icns build"
fi
Makeover! Also add script for generating the PNGs and add pre-rendered PNGs for the Linux electron build which means you don't need icns2png to build it and the Linux icons are straight from the SVG rather than resized bitmaps.
2016-12-08 17:21:37 +01:00
cp "$tmpdir/36.png" "res/vector-icons/android-chrome-36x36.png"
cp "$tmpdir/48.png" "res/vector-icons/android-chrome-48x48.png"
cp "$tmpdir/72.png" "res/vector-icons/android-chrome-72x72.png"
cp "$tmpdir/96.png" "res/vector-icons/android-chrome-96x96.png"
cp "$tmpdir/144.png" "res/vector-icons/android-chrome-144x144.png"
cp "$tmpdir/192.png" "res/vector-icons/android-chrome-192x192.png"
cp "$tmpdir/180.png" "res/vector-icons/apple-touch-icon.png"
cp "$tmpdir/180.png" "res/vector-icons/apple-touch-icon-precomposed.png"
cp "$tmpdir/57.png" "res/vector-icons/apple-touch-icon-57x57.png"
cp "$tmpdir/60.png" "res/vector-icons/apple-touch-icon-60x60.png"
cp "$tmpdir/72.png" "res/vector-icons/apple-touch-icon-72x72.png"
cp "$tmpdir/76.png" "res/vector-icons/apple-touch-icon-76x76.png"
cp "$tmpdir/114.png" "res/vector-icons/apple-touch-icon-114x114.png"
cp "$tmpdir/120.png" "res/vector-icons/apple-touch-icon-120x120.png"
cp "$tmpdir/144.png" "res/vector-icons/apple-touch-icon-144x144.png"
cp "$tmpdir/152.png" "res/vector-icons/apple-touch-icon-152x152.png"
cp "$tmpdir/180.png" "res/vector-icons/apple-touch-icon-180x180.png"
cp "$tmpdir/16.png" "res/vector-icons/favicon-16x16.png"
cp "$tmpdir/32.png" "res/vector-icons/favicon-32x32.png"
cp "$tmpdir/96.png" "res/vector-icons/favicon-96x96.png"
cp "$tmpdir/70.png" "res/vector-icons/mstile-70x70.png"
cp "$tmpdir/144.png" "res/vector-icons/mstile-144x144.png"
cp "$tmpdir/150.png" "res/vector-icons/mstile-150x150.png"
cp "$tmpdir/310.png" "res/vector-icons/mstile-310x310.png"
cp "$tmpdir/310x150.png" "res/vector-icons/mstile-310x150.png"
npm is "smart" enough to try and install our electron wrapper as a module instead of the actual electron package. With no way to ignore directories. I'd like to think of this as temporary, until I get to rip apart riot-web and riot-electron Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2017-05-10 14:36:27 +02:00
cp "$tmpdir/180.png" "electron_app/img/riot.png"
Makeover! Also add script for generating the PNGs and add pre-rendered PNGs for the Linux electron build which means you don't need icns2png to build it and the Linux icons are straight from the SVG rather than resized bitmaps.
2016-12-08 17:21:37 +01:00
ico needs to be at least 256x256
2016-12-09 23:33:20 +01:00
convert "$tmpdir/16.png" "$tmpdir/32.png" "$tmpdir/64.png" "$tmpdir/128.png" "$tmpdir/256.png" "res/vector-icons/favicon.ico"
Makeover! Also add script for generating the PNGs and add pre-rendered PNGs for the Linux electron build which means you don't need icns2png to build it and the Linux icons are straight from the SVG rather than resized bitmaps.
2016-12-08 17:21:37 +01:00
npm is "smart" enough to try and install our electron wrapper as a module instead of the actual electron package. With no way to ignore directories. I'd like to think of this as temporary, until I get to rip apart riot-web and riot-electron Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2017-05-10 14:36:27 +02:00
cp "res/vector-icons/favicon.ico" "electron_app/build/icon.ico"
cp "res/vector-icons/favicon.ico" "electron_app/img/riot.ico"
Makeover! Also add script for generating the PNGs and add pre-rendered PNGs for the Linux electron build which means you don't need icns2png to build it and the Linux icons are straight from the SVG rather than resized bitmaps.
2016-12-08 17:21:37 +01:00
# https://github.com/electron-userland/electron-builder/blob/3f97b86993d4ea5172e562b182230a194de0f621/src/targets/LinuxTargetHelper.ts#L127
for i in 24 96 16 48 64 128 256 512
do
npm is "smart" enough to try and install our electron wrapper as a module instead of the actual electron package. With no way to ignore directories. I'd like to think of this as temporary, until I get to rip apart riot-web and riot-electron Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2017-05-10 14:36:27 +02:00
cp "$tmpdir/$i.png" "electron_app/build/icons/${i}x${i}.png"
Makeover! Also add script for generating the PNGs and add pre-rendered PNGs for the Linux electron build which means you don't need icns2png to build it and the Linux icons are straight from the SVG rather than resized bitmaps.
2016-12-08 17:21:37 +01:00
done
rm -r "$tmpdir"