From 617c7ab7341a97a4b91b194012936568d43812df Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 17 Dec 2025 19:14:43 +0530
Subject: [PATCH] [WEB-5614] chore: logo and icon enhancements #8362
---
.../propel/src/emoji-icon-picker/logo.tsx | 102 ++++++++----------
packages/propel/src/icons/activity-icon.tsx | 4 +-
packages/propel/src/icons/updates-icon.tsx | 6 +-
3 files changed, 45 insertions(+), 67 deletions(-)
diff --git a/packages/propel/src/emoji-icon-picker/logo.tsx b/packages/propel/src/emoji-icon-picker/logo.tsx
index cfbc28602f..dbed85f58b 100644
--- a/packages/propel/src/emoji-icon-picker/logo.tsx
+++ b/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 (
-
- );
- }
+ // Reusable loading skeleton
+ const loadingSkeleton = ;
- // 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 (
item.name === value);
+ if (!lucideIcon) return null;
+
+ const LucideIconElement = lucideIcon.element;
+ return ;
+ }
+
+ // Material icon
return (
- <>
- {type === "lucide" ? (
- <>
- {lucideIcon && (
-
- )}
-
- ) : (
-
- {value}
-
- )}
-
+
+ {value}
+
);
}
- // if no value, return empty fragment
- return <>;
+ return null;
}
diff --git a/packages/propel/src/icons/activity-icon.tsx b/packages/propel/src/icons/activity-icon.tsx
index deb9118b11..aa32a5986b 100644
--- a/packages/propel/src/icons/activity-icon.tsx
+++ b/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)
);