Remake all icons to SVG and add SVG compression plugin (#451)

packages/app-ui/package.json

@@ -28,15 +28,15 @@
     "@types/node": "20.12.7",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "eslint": "8.57.0",
     "glob": "^10.3.12",
     "jest": "29.7.0",
-    "sass": "^1.77.0",
+    "sass": "^1.77.8",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-lib-inject-css": "^2.0.1"
+    "vite": "^5.3.4",
+    "vite-plugin-dts": "4.0.0-beta.1",
+    "vite-plugin-lib-inject-css": "^2.1.1"
   },
   "peerDependencies": {
     "@loadable/component": "^5.16.4",
@@ -59,6 +59,7 @@
     "rollup-preserve-directives": "^1.1.1",
     "sanitize.css": "13.0.0",
     "typed-scss-modules": "^8.0.1",
+    "vite-plugin-svgo": "^1.4.0",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }

packages/app-ui/src/components/atoms/Icon/Icon.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
 import { type IconNamesList, type TokenSymbolsList } from '@summerfi/app-types'
+import Image from 'next/image'
 
 import { getTokenGuarded } from '@/tokens/helpers'
 
@@ -26,6 +27,42 @@ export interface IconPropsWithTokenName extends IconPropsBase {
   tokenName: TokenSymbolsList
 }
 
+const FallbackSvg = ({
+  focusable,
+  role,
+  finalSize,
+  proxyStyle,
+  errorLoading,
+}: {
+  focusable?: boolean
+  role?: 'presentation'
+  finalSize: number
+  proxyStyle?: React.CSSProperties
+  errorLoading?: boolean
+}) => (
+  <svg
+    viewBox="0 0 6.35 6.35"
+    color="inherit"
+    display="inline-block"
+    focusable={focusable}
+    role={role}
+    width={finalSize}
+    height={finalSize}
+  >
+    <circle
+      style={{
+        fill: errorLoading ? 'red' : '#9d9d9d',
+        fillOpacity: 0.350168,
+        strokeWidth: 0.340624,
+        ...proxyStyle,
+      }}
+      cx="3.175"
+      cy="3.175"
+      r="3.175"
+    />
+  </svg>
+)
+
 export const Icon: FC<IconPropsWithIconName | IconPropsWithTokenName> = ({
   variant = 'l',
   role = 'presentation',
@@ -36,6 +73,7 @@ export const Icon: FC<IconPropsWithIconName | IconPropsWithTokenName> = ({
   style,
   proxyStyle,
 }) => {
+  const [errorLoading, setErrorLoading] = useState(false)
   const finalSize =
     size ??
     {
@@ -56,39 +94,37 @@ export const Icon: FC<IconPropsWithIconName | IconPropsWithTokenName> = ({
   return (
     <LazyIconComponent
       fallback={
-        <svg
-          viewBox="0 0 6.35 6.35"
-          color="inherit"
-          display="inline-block"
+        <FallbackSvg
           focusable={focusable}
           role={role}
-          width={finalSize}
-          height={finalSize}
-        >
-          <circle
-            style={{ fill: '#9d9d9d', fillOpacity: 0.350168, strokeWidth: 0.340624, ...proxyStyle }}
-            cx="3.175"
-            cy="3.175"
-            r="3.175"
-          />
-        </svg>
+          finalSize={finalSize}
+          proxyStyle={proxyStyle}
+        />
       }
     >
-      {({ default: iconData }) => (
-        <svg
-          viewBox={'viewBox' in iconData ? iconData.viewBox : '0 0 24 24'}
-          color="inherit"
-          display="inline-block"
-          focusable={focusable}
-          role={role}
-          width={finalSize}
-          height={finalSize}
-          style={style}
-        >
-          {iconName}
-          {iconData.path}
-        </svg>
-      )}
+      {({ default: iconData }) =>
+        iconData && !errorLoading ? (
+          <Image
+            src={iconData}
+            color="inherit"
+            alt={iconName}
+            role={role}
+            width={finalSize}
+            height={finalSize}
+            style={style}
+            unoptimized
+            onError={() => setErrorLoading(true)}
+          />
+        ) : (
+          <FallbackSvg
+            focusable={focusable}
+            role={role}
+            finalSize={finalSize}
+            errorLoading={errorLoading}
+            proxyStyle={{ ...proxyStyle, fill: 'red', fillOpacity: 1 }}
+          />
+        )
+      }
     </LazyIconComponent>
   )
 }