[WEB-5614] chore: logo and icon enhancements #8362

packages/propel/src/emoji-icon-picker/logo.tsx

@@ -1,4 +1,3 @@
-import type { FC } from "react";
 // Due to some weird issue with the import order, the import of useFontFaceObserver
 // should be after the imported here rather than some below helper functions as it is in the original file
 
@@ -10,46 +9,34 @@ import { getEmojiSize, stringToEmoji } from "./helper";
 import { LUCIDE_ICONS_LIST } from "./lucide-icons";
 
 type Props = {
-  logo: TLogoProps;
+  logo?: TLogoProps;
   size?: number;
   type?: "lucide" | "material";
 };
 
-export function Logo(props: Props) {
-  const { logo, size = 16, type = "material" } = props;
-
-  // destructuring the logo object
-  const { in_use, emoji, icon } = logo;
-
-  // derived values
-  const value = in_use === "emoji" ? emoji?.value : icon?.name;
-  const color = icon?.color;
-  const lucideIcon = LUCIDE_ICONS_LIST.find((item) => item.name === value);
-
+export function Logo({ logo, size = 16, type = "material" }: Props) {
   const isMaterialSymbolsFontLoaded = useFontFaceObserver([
     {
-      family: `Material Symbols Rounded`,
-      style: `normal`,
-      weight: `normal`,
-      stretch: `condensed`,
+      family: "Material Symbols Rounded",
+      style: "normal",
+      weight: "normal",
+      stretch: "condensed",
     },
   ]);
-  // if no value, return empty fragment
-  if (!value) return <></>;
 
-  if (!isMaterialSymbolsFontLoaded && type === "material") {
-    return (
-      <span
-        style={{
-          height: size,
-          width: size,
-        }}
-        className="rounded-sm animate-pulse bg-layer-1"
-      />
-    );
-  }
+  // Reusable loading skeleton
+  const loadingSkeleton = <span style={{ height: size, width: size }} className="rounded-sm bg-layer-1" />;
 
-  // emoji
+  // Early returns for loading/empty states
+  if (!logo || !logo.in_use) return loadingSkeleton;
+
+  const { in_use, emoji, icon } = logo;
+  const value = in_use === "emoji" ? emoji?.value : icon?.name;
+
+  if (!value) return loadingSkeleton;
+  if (!isMaterialSymbolsFontLoaded && type === "material") return loadingSkeleton;
+
+  // Emoji rendering
   if (in_use === "emoji") {
     return (
       <span
@@ -66,38 +53,33 @@ export function Logo(props: Props) {
     );
   }
 
-  // icon
+  // Icon rendering
   if (in_use === "icon") {
+    const color = icon?.color;
+
+    // Lucide icon
+    if (type === "lucide") {
+      const lucideIcon = LUCIDE_ICONS_LIST.find((item) => item.name === value);
+      if (!lucideIcon) return null;
+
+      const LucideIconElement = lucideIcon.element;
+      return <LucideIconElement style={{ color, height: size, width: size }} />;
+    }
+
+    // Material icon
     return (
-      <>
-        {type === "lucide" ? (
-          <>
-            {lucideIcon && (
-              <lucideIcon.element
-                style={{
-                  color: color,
-                  height: size,
-                  width: size,
-                }}
-              />
-            )}
-          </>
-        ) : (
-          <span
-            className="material-symbols-rounded"
-            style={{
-              fontSize: size,
-              color: color,
-              scale: "115%",
-            }}
-          >
-            {value}
-          </span>
-        )}
-      </>
+      <span
+        className="material-symbols-rounded"
+        style={{
+          fontSize: size,
+          color,
+          scale: "115%",
+        }}
+      >
+        {value}
+      </span>
     );
   }
 
-  // if no value, return empty fragment
-  return <></>;
+  return null;
 }

packages/propel/src/icons/activity-icon.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import type { ISvgIcons } from "./type";
 
 export function ActivityIcon({ className = "text-current", ...rest }: ISvgIcons) {
@@ -16,7 +14,7 @@ export function ActivityIcon({ className = "text-current", ...rest }: ISvgIcons)
       <g clipPath="url(#clip0_15681_9387)">
         <path
           d="M14.6666 8.00001H13.0133C12.7219 7.99939 12.4384 8.09421 12.206 8.26999C11.9736 8.44576 11.8053 8.69281 11.7266 8.97334L10.1599 14.5467C10.1498 14.5813 10.1288 14.6117 10.0999 14.6333C10.0711 14.655 10.036 14.6667 9.99992 14.6667C9.96386 14.6667 9.92877 14.655 9.89992 14.6333C9.87107 14.6117 9.85002 14.5813 9.83992 14.5467L6.15992 1.45334C6.14982 1.41872 6.12877 1.38831 6.09992 1.36668C6.07107 1.34504 6.03598 1.33334 5.99992 1.33334C5.96386 1.33334 5.92877 1.34504 5.89992 1.36668C5.87107 1.38831 5.85002 1.41872 5.83992 1.45334L4.27325 7.02668C4.1949 7.30611 4.02751 7.55235 3.79649 7.72802C3.56548 7.90368 3.28347 7.99918 2.99325 8.00001H1.33325"
-          stroke="#8591AD"
+          stroke="currentColor"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"

packages/propel/src/icons/updates-icon.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import type { ISvgIcons } from "./type";
 
 export function UpdatesIcon({ className = "text-current" }: ISvgIcons) {
@@ -16,11 +14,11 @@ export function UpdatesIcon({ className = "text-current" }: ISvgIcons) {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M6.54325 5.056C8.46325 2.58867 11.4633 1 14.8333 1C14.9659 1 15.093 1.05268 15.1868 1.14645C15.2806 1.24021 15.3333 1.36739 15.3333 1.5C15.3333 4.87067 13.7446 7.87 11.2773 9.79067C11.3799 10.4335 11.3418 11.0909 11.1656 11.7176C10.9895 12.3443 10.6795 12.9253 10.257 13.4205C9.83454 13.9158 9.30964 14.3135 8.71854 14.5862C8.12744 14.8588 7.48422 15 6.83325 15C6.70064 15 6.57347 14.9473 6.4797 14.8536C6.38593 14.7598 6.33325 14.6326 6.33325 14.5V11.746C5.6852 11.2342 5.09942 10.6482 4.58792 10H1.83325C1.70064 10 1.57347 9.94732 1.4797 9.85355C1.38593 9.75979 1.33325 9.63261 1.33325 9.5C1.3332 8.84897 1.47441 8.20568 1.74713 7.61453C2.01986 7.02337 2.41761 6.49843 2.91293 6.07594C3.40824 5.65345 3.98934 5.34346 4.6161 5.16737C5.24287 4.99128 5.90038 4.95328 6.54325 5.056ZM10.3333 4.5C9.93543 4.5 9.5539 4.65804 9.27259 4.93934C8.99129 5.22064 8.83325 5.60218 8.83325 6C8.83325 6.39782 8.99129 6.77936 9.27259 7.06066C9.5539 7.34196 9.93543 7.5 10.3333 7.5C10.7311 7.5 11.1126 7.34196 11.3939 7.06066C11.6752 6.77936 11.8333 6.39782 11.8333 6C11.8333 5.60218 11.6752 5.22064 11.3939 4.93934C11.1126 4.65804 10.7311 4.5 10.3333 4.5Z"
-        fill="#8591AD"
+        fill="currentColor"
       />
       <path
         d="M3.83994 11.4947C3.8926 11.4554 3.93701 11.4062 3.97064 11.3497C4.00426 11.2933 4.02645 11.2308 4.03592 11.1658C4.04539 11.1008 4.04197 11.0346 4.02584 10.9709C4.00972 10.9072 3.98121 10.8473 3.94194 10.7947C3.90268 10.742 3.85342 10.6976 3.797 10.664C3.74057 10.6304 3.67807 10.6082 3.61307 10.5987C3.54807 10.5892 3.48184 10.5927 3.41816 10.6088C3.35448 10.6249 3.2946 10.6534 3.24194 10.6927C2.73054 11.0731 2.33288 11.5861 2.092 12.1762C1.85111 12.7663 1.77617 13.4111 1.87528 14.0407C1.89139 14.1455 1.94045 14.2426 2.01536 14.3177C2.09026 14.3929 2.18713 14.4422 2.29194 14.4587C2.92163 14.5577 3.56641 14.4827 4.15652 14.2417C4.74664 14.0007 5.25961 13.6029 5.63994 13.0913C5.68047 13.0388 5.71015 12.9788 5.72723 12.9147C5.74432 12.8506 5.74848 12.7837 5.73948 12.718C5.73047 12.6522 5.70847 12.589 5.67476 12.5318C5.64105 12.4747 5.59631 12.4248 5.54315 12.3852C5.48998 12.3455 5.42945 12.3168 5.36508 12.3007C5.30071 12.2847 5.23379 12.2816 5.16821 12.2917C5.10264 12.3017 5.03973 12.3248 4.98314 12.3594C4.92655 12.394 4.87742 12.4395 4.83861 12.4933C4.60612 12.806 4.30366 13.0599 3.95544 13.2347C3.60722 13.4095 3.22291 13.5004 2.83328 13.5C2.83328 12.68 3.22794 11.9513 3.83994 11.4947Z"
-        fill="#8591AD"
+        fill="currentColor"
       />
     </svg>
   );