MinPluto/share2fedi
Archived
1
Fork 0
Code Issues Pull requests Activity

Update icons

Browse source
This commit is contained in:
Nikita Karamov 2023-03-16 17:58:52 +01:00
parent d7dd716b23
commit 6ae45b0cbd
No known key found for this signature in database
GPG key ID: 41D6F71EE78E77CD
9 changed files with 54 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -37,11 +37,10 @@
<script type="module" src="/lib/main.js" async defer></script> <script type="module" src="/lib/main.js" async defer></script>
<script type="module" src="/lib/count.js" async defer></script> <script type="module" src="/lib/count.js" async defer></script>
<link href="/favicon.ico" rel="icon" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" sizes="any" />
<link href="/apple-touch-icon.png" rel="icon" type="image/svg+xml" /> <link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link href="/apple-touch-icon.png" rel="apple-touch-icon" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link href="/site.webmanifest" rel="manifest" /> <link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#3088d4" />
</head> </head>
<body> <body>
<header> <header>

1
package.json
View file

@ -13,7 +13,6 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"build": "vite build", "build": "vite build",
"build-icons": "svgo --multipass assets/pentagon.svg assets/s2f.svg assets/share2fedi.svg -o assets/pentagon.min.svg assets/s2f.min.svg assets/share2fedi.min.svg",
"dev": "vite", "dev": "vite",
"fmt": "prettier --write .", "fmt": "prettier --write .",
"lint": "prettier --check . && eslint . && stylelint '**/*.scss'", "lint": "prettier --check . && eslint . && stylelint '**/*.scss'",

BIN
public/apple-touch-icon.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/favicon.ico
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
public/icon-192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
public/icon-512.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 69 KiB

26
public/icon.svg
View file

@ -1 +1,25 @@
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M473.266 301.162c-6.855 35.271-61.403 73.871-124.051 81.352-32.669 3.898-64.833 7.48-99.131 5.908-56.092-2.57-100.352-13.389-100.352-13.389 0 5.46.337 10.66 1.01 15.522 7.293 55.356 54.89 58.672 99.977 60.218 45.508 1.558 86.028-11.22 86.028-11.22l1.87 41.141s-31.83 17.093-88.533 20.236c-31.268 1.719-70.092-.786-115.31-12.755C36.7 462.217 19.833 357.677 17.253 251.604c-.786-31.494-.302-61.191-.302-86.028C16.952 57.11 88.02 25.318 88.02 25.318c35.834-16.457 97.32-23.378 161.243-23.9h1.57c63.923.522 125.45 7.443 161.281 23.9 0 0 71.064 31.792 71.064 140.258 0 0 .892 80.026-9.91 135.586" fill="#3088d4" fill-rule="nonzero"/><g fill="#fff"><path d="M476.925 278.214c-4.531 1.19-9.3 1.72-14.272 1.72-15.137 0-26.834-3.956-35.088-11.868-8.256-7.915-12.386-19.439-12.386-34.576v-66.309h-22.704V141.38h22.704v-31.477h32.253v31.477h34.342c.961 7.6 1.403 15.66 1.403 24.197l-.003 1.605h-35.742v65.536c0 6.708 1.633 11.826 4.9 15.352 3.27 3.527 7.999 5.288 14.192 5.288 5.035 0 9.482-.918 13.318-2.817l-.471 5.996-2.446 21.678z"/><path d="M326.94 279.935c-13.933 0-26.492-3.012-37.672-9.033-11.182-6.02-19.91-14.404-26.19-25.155-6.276-10.75-9.417-22.922-9.417-36.51 0-13.587 3.141-25.715 9.418-36.38 6.28-10.665 15.007-19.008 26.19-25.026 11.179-6.02 23.738-9.032 37.67-9.032 14.105 0 26.747 3.011 37.927 9.032 11.182 6.018 19.91 14.361 26.19 25.026 6.276 10.665 9.417 22.793 9.417 36.38 0 13.588-3.14 25.76-9.418 36.51-6.279 10.751-15.007 19.135-26.19 25.155-11.179 6.021-23.82 9.033-37.926 9.033zm0-27.61c11.866 0 21.671-3.954 29.41-11.868 7.743-7.912 11.614-18.319 11.614-31.22 0-12.9-3.871-23.307-11.613-31.219-7.74-7.911-17.545-11.869-29.412-11.869-11.869 0-21.631 3.958-29.285 11.87-7.656 7.911-11.48 18.318-11.48 31.219 0 12.9 3.824 23.307 11.48 31.219 7.654 7.914 17.416 11.869 29.285 11.869z" fill-rule="nonzero"/><path d="M181.159 279.935c-13.933 0-26.489-3.012-37.668-9.033-11.182-6.02-19.91-14.404-26.19-25.155-6.28-10.75-9.418-22.922-9.418-36.51 0-13.587 3.139-25.715 9.418-36.38 6.28-10.665 15.008-19.008 26.19-25.026 11.18-6.02 23.735-9.032 37.668-9.032 14.105 0 26.747 3.011 37.93 9.032 11.179 6.018 19.91 14.361 26.189 25.026 6.276 10.665 9.415 22.793 9.415 36.38 0 13.588-3.139 25.76-9.415 36.51-6.28 10.751-15.01 19.135-26.19 25.155-11.182 6.021-23.824 9.033-37.93 9.033zm0-27.61c11.869 0 21.674-3.954 29.414-11.868 7.742-7.912 11.61-18.319 11.61-31.22 0-12.9-3.868-23.307-11.61-31.219-7.74-7.911-17.545-11.869-29.414-11.869-11.867 0-21.63 3.958-29.285 11.87-7.653 7.911-11.481 18.318-11.481 31.219 0 12.9 3.828 23.307 11.48 31.219 7.657 7.914 17.42 11.869 29.286 11.869z" fill-rule="nonzero"/><path d="M18.353 141.38h21.158v-31.478h32.25v31.477h36.896v25.802H71.762v65.536c0 6.708 1.635 11.826 4.902 15.352 3.268 3.527 7.998 5.288 14.192 5.288 7.222 0 13.243-1.89 18.06-5.676l9.029 22.963c-3.782 3.098-8.383 5.42-13.803 6.969-5.418 1.546-11.137 2.322-17.158 2.322-15.136 0-26.833-3.957-35.09-11.87-8.256-7.914-12.383-19.438-12.383-34.575v-66.309H16.947l.005-1.605c0-8.537.44-16.597 1.401-24.197z"/></g></svg> <svg viewBox="0 0 64 64" width="512" height="512" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="15"></feGaussianBlur>
</filter>
<clipPath id="pentagon">
<path d="m38.802 1.632 23.656 29.212-20.473 31.524-36.307-9.729-1.968-37.537z"></path>
</clipPath>
</defs>
<g clip-path="url(#pentagon)">
<g filter="url(#blur)">
<circle cx="0" cy="10" fill="#F44336" r="39"></circle>
<circle cx="45" cy="-5" fill="#FFEB3B" r="39"></circle>
<circle cx="70" cy="25" fill="#4CAF50" r="39"></circle>
<circle cx="50" cy="65" fill="#03A9F4" r="39"></circle>
<circle cx="5" cy="70" fill="#673AB7" r="39"></circle>
<circle cx="50" cy="31.5" fill="#4CAF50" r="12"></circle>
<circle cx="37.5" cy="50.5" fill="#03A9F4" r="12"></circle>
<circle cx="15.5" cy="44.5" fill="#673AB7" r="12"></circle>
<circle cx="14" cy="22" fill="#F44336" r="12"></circle>
<circle cx="36" cy="14" fill="#FFEB3B" r="12"></circle>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 1 KiB

1
public/mastodon.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 4.9 KiB

25
script/build-icons Executable file
View file

@ -0,0 +1,25 @@
#!/bin/bash
# This script converts raw SVG icons to favicons according to the article:
# https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
set -euo pipefail
if ! type "magick"; then
echo "ImageMagick ('magick') not found; exiting"
exit 1
fi
echo "[1/4] Making 'favicon.ico' for legacy browsers..."
magick convert -background none assets/pentagon.svg -alpha Set -define icon:auto-resize="32,16" -channel RGBA -depth 8 public/favicon.ico
echo "[2/4] Making 'icon.svg' for modern browsers..."
cp -f assets/pentagon.svg public/icon.svg
echo "[3/4] Making 'apple-touch-icon.png'..."
magick convert assets/s2f.svg -resize 140x140 -background white -gravity center -extent 180x180 public/apple-touch-icon.png
echo "[4/4] Making 'icon-*.png' icons for PWAs..."
magick convert -background none assets/s2f.svg -alpha Set -resize 192x192 public/icon-192.png
magick convert -background none assets/s2f.svg -alpha Set -resize 512x512 public/icon-512.png
echo "Done."