From 819d43e059c7113c600e099fbe0265b5a091d1c5 Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Sat, 20 Dec 2025 21:55:26 -0500
Subject: [PATCH] IconViewer: Fix Filling Icons

---
 src/equicordplugins/iconViewer/components/IconsTab.tsx | 4 +++-
 src/equicordplugins/iconViewer/components/Modals.tsx   | 5 +++--
 src/equicordplugins/iconViewer/names.ts                | 3 ++-
 src/equicordplugins/iconViewer/styles.css              | 4 ++--
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/equicordplugins/iconViewer/components/IconsTab.tsx b/src/equicordplugins/iconViewer/components/IconsTab.tsx
index 6f846dabc..827219962 100644
--- a/src/equicordplugins/iconViewer/components/IconsTab.tsx
+++ b/src/equicordplugins/iconViewer/components/IconsTab.tsx
@@ -46,11 +46,13 @@ function searchMatch(search: string, name: string, Icon: Icon, searchByFunction:
 }
 
 function IconItem({ iconName, Icon }: { iconName: string; Icon: Icon; }) {
+    const fill = iconName === "CircleShield" ? "var(--background-base-low)" : "var(--interactive-icon-default)";
+    console.log(iconName);
     return (
         <div className="vc-icon-box">
             <Clickable onClick={() => openIconModal(iconName, Icon, IconsFinds[iconName])}>
                 <div className="vc-icon-container">
-                    <Icon className="vc-icon-icon" size="lg" width={32} height={32} color="var(--interactive-icon-default)" />
+                    <Icon className="vc-icon-icon" size="lg" width={32} height={32} color="var(--interactive-icon-default)" fill={fill} />
                 </div>
             </Clickable>
             <Heading className="vc-icon-title" tag="h3">{iconName}</Heading>
diff --git a/src/equicordplugins/iconViewer/components/Modals.tsx b/src/equicordplugins/iconViewer/components/Modals.tsx
index 10ae4547e..3a346aa71 100644
--- a/src/equicordplugins/iconViewer/components/Modals.tsx
+++ b/src/equicordplugins/iconViewer/components/Modals.tsx
@@ -229,6 +229,7 @@ function IconModal({ iconName, Icon, findPattern, onClose, transitionState }: {
     const colorData = cssColors[color];
     const colorKeys = useMemo(() => getCssColorKeys(), []);
 
+    const fill = iconName === "CircleShield" ? "var(--background-base-low)" : colorData?.css;
     const findCode = findPattern
         ? `const ${iconName}Icon = findComponentByCode(${JSON.stringify(findPattern)})`
         : null;
@@ -270,13 +271,13 @@ function IconModal({ iconName, Icon, findPattern, onClose, transitionState }: {
                         onContextMenu={openColorMenu}
                         onWheel={onWheel}
                     >
-                        <Icon className="vc-ic-icon-large" color={colorData?.css} />
+                        <Icon className="vc-ic-icon-large" color={colorData?.css} fill={fill} />
                     </div>
                     <Flex flexDirection="column" className="vc-ic-icon-info">
                         <Flex className="vc-ic-icon-sizes">
                             {iconSizes.map(size => (
                                 <TooltipContainer text={size} key={size}>
-                                    <Icon size={size} color={colorData?.css} />
+                                    <Icon size={size} color={colorData?.css} fill={fill} />
                                 </TooltipContainer>
                             ))}
                         </Flex>
diff --git a/src/equicordplugins/iconViewer/names.ts b/src/equicordplugins/iconViewer/names.ts
index d1ef744ed..00c82ea23 100644
--- a/src/equicordplugins/iconViewer/names.ts
+++ b/src/equicordplugins/iconViewer/names.ts
@@ -132,7 +132,8 @@ export const IconsFinds: Record<string, string> = {
     Key: "23-.24ZM10 16a2",
     InBox: "3H5ZM4 5.5C4",
     BookmarkOutline: "0-1-1ZM7 2a3",
-    Food: "7.58V8a1 1"
+    Food: "7.58V8a1 1",
+    CircleShield: "8 10.9999V17.9999C8"
 };
 
 // 13l4.91-8.05a1.8
diff --git a/src/equicordplugins/iconViewer/styles.css b/src/equicordplugins/iconViewer/styles.css
index 229877b14..d520329ee 100644
--- a/src/equicordplugins/iconViewer/styles.css
+++ b/src/equicordplugins/iconViewer/styles.css
@@ -48,7 +48,7 @@
     margin-bottom: 16px;
 }
 
-.vc-icon-tab-search-bar-grid>div:first-child {
+.vc-icon-tab-search-bar-grid > div:first-child {
     flex: 1;
 }
 
@@ -137,4 +137,4 @@
 .vc-ic-modal-title {
     user-select: none;
     padding-right: 32px;
-}
+}
\ No newline at end of file