Use lazy loaded icon in side icon

Jean-Tinland · Aug 6, 2024 · e29a8de · e29a8de
1 parent fba21bc
commit e29a8de
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/lib/components/icons/icons.jsx b/lib/components/icons/icons.jsx
@@ -26,6 +26,7 @@ export const AndroidStudio = React.lazy(() =>
 export const Anki = React.lazy(() => import("./library/anki.jsx"));
 export const Anytype = React.lazy(() => import("./library/anytype.jsx"));
 export const AppStore = React.lazy(() => import("./library/app-store.jsx"));
+export const Apple = React.lazy(() => import("./library/apple.jsx"));
 export const Arc = React.lazy(() => import("./library/arc.jsx"));
 export const Atom = React.lazy(() => import("./library/atom.jsx"));
 export const Audacity = React.lazy(() => import("./library/audacity.jsx"));

diff --git a/lib/components/icons/library/apple.jsx b/lib/components/icons/library/apple.jsx
@@ -0,0 +1,9 @@
+import Icon from "../icon.jsx";
+
+export default function Apple(props) {
+  return (
+    <Icon {...props}>
+      <path d="M18.5373 12.7261c.0337 3.6251 3.1802 4.8315 3.215 4.8469-.0266.085-.5027 1.719-1.6576 3.4069-.9984 1.4593-2.0347 2.9131-3.6671 2.9432-1.6038.0296-2.1196-.9511-3.9534-.9511-1.8332 0-2.4062.921-3.9245.9807-1.5756.0596-2.7755-1.5779-3.7821-3.0319-2.0572-2.9739-3.6292-8.4038-1.5183-12.069 1.0486-1.8202 2.9226-2.9727 4.9566-3.0023 1.5472-.0295 3.0076 1.041 3.9534 1.041.9453 0 2.72-1.2873 4.5857-1.0983.7809.0326 2.9734.3155 4.3811 2.3761-.1135.0703-2.616 1.5272-2.5888 4.5579M15.523 3.8247C16.3596 2.812 16.9226 1.4026 16.769 0c-1.2058.0485-2.6638.8035-3.5287 1.8155-.7751.8962-1.4539 2.3306-1.2707 3.7053 1.344.104 2.7168-.683 3.5534-1.6961Z" />
+    </Icon>
+  );
+}
diff --git a/lib/components/side-icon.jsx b/lib/components/side-icon.jsx
@@ -1,4 +1,6 @@
 import * as Uebersicht from "uebersicht";
+import * as Icons from "./icons/icons.jsx";
+import { SuspenseIcon } from "./icons/icon.jsx";
 import { useSimpleBarContext } from "./simple-bar-context.jsx";
 
 const { React } = Uebersicht;
@@ -13,14 +15,9 @@ export function Component() {
 
   return (
     <div className="side-icon">
-      <svg
-        className="side-icon__svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-      >
-        <path d="M18.5373 12.7261c.0337 3.6251 3.1802 4.8315 3.215 4.8469-.0266.085-.5027 1.719-1.6576 3.4069-.9984 1.4593-2.0347 2.9131-3.6671 2.9432-1.6038.0296-2.1196-.9511-3.9534-.9511-1.8332 0-2.4062.921-3.9245.9807-1.5756.0596-2.7755-1.5779-3.7821-3.0319-2.0572-2.9739-3.6292-8.4038-1.5183-12.069 1.0486-1.8202 2.9226-2.9727 4.9566-3.0023 1.5472-.0295 3.0076 1.041 3.9534 1.041.9453 0 2.72-1.2873 4.5857-1.0983.7809.0326 2.9734.3155 4.3811 2.3761-.1135.0703-2.616 1.5272-2.5888 4.5579M15.523 3.8247C16.3596 2.812 16.9226 1.4026 16.769 0c-1.2058.0485-2.6638.8035-3.5287 1.8155-.7751.8962-1.4539 2.3306-1.2707 3.7053 1.344.104 2.7168-.683 3.5534-1.6961Z" />
-      </svg>
+      <SuspenseIcon>
+        <Icons.Apple className="side-icon__svg" />
+      </SuspenseIcon>
     </div>
   );
 }