Icon tweaks

scripts/createIcons.bat

@@ -23,8 +23,17 @@ FOR %%X in (*.ico) DO (
 )
 
 FOR /D %%X in (*) DO (
-    C:\ImageMagick\magick.exe "%%X\max.png" -compress lossless -resize 144x144 -strip -quality 100 "..\144x144\%%~nX.png"
-    C:\ImageMagick\magick.exe "%%X\max.png" -compress lossless -resize 96x96 -strip -quality 100 "..\96x96\%%~nX.png"
+    IF NOT EXIST "%%X\144x144.png" (
+        C:\ImageMagick\magick.exe "%%X\max.png" -compress lossless -resize 48x48 -strip -quality 100 "..\144x144\%%~nX.png"
+    ) ELSE (
+        COPY "%%X\144x144.png" "..\144x144\%%~nX.png"
+    )
+
+    IF NOT EXIST "%%X\96x96.png" (
+        C:\ImageMagick\magick.exe "%%X\max.png" -compress lossless -resize 48x48 -strip -quality 100 "..\96x96\%%~nX.png"
+    ) ELSE (
+        COPY "%%X\96x96.png" "..\96x96\%%~nX.png"
+    )
 
     IF NOT EXIST "%%X\48x48.png" (
         C:\ImageMagick\magick.exe "%%X\max.png" -compress lossless -resize 48x48 -strip -quality 100 "..\48x48\%%~nX.png"
@@ -44,8 +53,8 @@ FOR /D %%X in (*) DO (
         COPY "%%X\16x16.png" "..\16x16\%%~nX.png"
     )
 
-    cwebp -q 100 -z 9 -m 6 -sharp_yuv -pass 10 -resize 144 144 -mt -lossless -v "%%X\max.png" -o "..\144x144\%%~nX.webp"
-    cwebp -q 100 -z 9 -m 6 -sharp_yuv -pass 10 -resize 96 96 -mt -lossless -v "%%X\max.png" -o "..\96x96\%%~nX.webp"
+    cwebp -q 100 -z 9 -m 6 -sharp_yuv -pass 10 -resize 144 144 -mt -lossless -v "%%X\144x144.png" -o "..\144x144\%%~nX.webp"
+    cwebp -q 100 -z 9 -m 6 -sharp_yuv -pass 10 -resize 96 96 -mt -lossless -v "%%X\96x96.png" -o "..\96x96\%%~nX.webp"
     cwebp -q 100 -z 9 -m 6 -sharp_yuv -pass 10 -mt -lossless -v "..\48x48\%%~nX.png" -o "..\48x48\%%~nX.webp"
     cwebp -q 100 -z 9 -m 6 -sharp_yuv -pass 10 -mt -lossless -v "..\32x32\%%~nX.png" -o "..\32x32\%%~nX.webp"
     cwebp -q 100 -z 9 -m 6 -sharp_yuv -pass 10 -mt -lossless -v "..\16x16\%%~nX.png" -o "..\16x16\%%~nX.webp"

styles/common/Icon.tsx

@@ -86,8 +86,10 @@ const Icon: FC<IconProps & React.ImgHTMLAttributes<HTMLImageElement>> = (
     <StyledIcon
       ref={$imgRef}
       onLoad={() => setLoaded(true)}
-      src={isStaticIcon ? src : undefined}
-      srcSet={!isStaticIcon ? imageSrcs(src, $imgSize || 1, ".png") : undefined}
+      src={isStaticIcon ? src : imageSrc(src, $imgSize, 1, ".png")}
+      srcSet={
+        !isStaticIcon ? imageSrcs(src, $imgSize, ".png", true) : undefined
+      }
       style={style}
       {...componentProps}
       {...dimensionProps}
@@ -100,9 +102,7 @@ const Icon: FC<IconProps & React.ImgHTMLAttributes<HTMLImageElement>> = (
         SUPPORTED_PIXEL_RATIOS.map((ratio) => (
           <source
             key={ratio}
-            media={
-              ratio > 1 ? `screen and (min-resolution: ${ratio}x)` : undefined
-            }
+            media={ratio > 1 ? `screen and (resolution > ${ratio - 1}x)` : ""}
             srcSet={imageSrc(src, $imgSize, ratio, ".webp")}
             type="image/webp"
           />

utils/functions.ts

@@ -29,11 +29,14 @@ export const imageSrc = (
 export const imageSrcs = (
   imagePath: string,
   size: number,
-  extension: string
+  extension: string,
+  skipFallback: boolean
 ): string =>
-  `${imageSrc(imagePath, size, 1, extension)},
-    ${imageSrc(imagePath, size, 2, extension)},
-    ${imageSrc(imagePath, size, 3, extension)}`;
+  [
+    ...(skipFallback ? [] : [imageSrc(imagePath, size, 1, extension)]),
+    imageSrc(imagePath, size, 2, extension),
+    imageSrc(imagePath, size, 3, extension),
+  ].join(", ");
 
 export const imageToBufferUrl = (
   path: string,