From 10e88cd3e45c267c0f19aad30eb8de94fc32a2b3 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Sat, 16 Nov 2024 14:57:17 +1100
Subject: [PATCH] Use ApiIcon for plugin panels (#8496)

- Richer set of icons available
- Allows plugin to define their own icon
---
 src/frontend/src/components/items/ApiIcon.tsx | 5 +++++
 src/frontend/src/hooks/UsePluginPanels.tsx    | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/items/ApiIcon.tsx b/src/frontend/src/components/items/ApiIcon.tsx
index d820099919..f480516d50 100644
--- a/src/frontend/src/components/items/ApiIcon.tsx
+++ b/src/frontend/src/components/items/ApiIcon.tsx
@@ -11,8 +11,13 @@ export const ApiIcon = ({ name: _name, size = 22 }: ApiIconProps) => {
   const icon = useIconState(
     (s) => s.packagesMap[iconPackage]?.icons[name]?.variants[variant]
   );
+
   const unicode = icon ? String.fromCodePoint(Number.parseInt(icon, 16)) : '';
 
+  if (!unicode) {
+    console.warn(`ApiIcon not found: ${_name}`);
+  }
+
   return (
     <i
       className={classes.icon}
diff --git a/src/frontend/src/hooks/UsePluginPanels.tsx b/src/frontend/src/hooks/UsePluginPanels.tsx
index 78df7362c0..6eb43a865b 100644
--- a/src/frontend/src/hooks/UsePluginPanels.tsx
+++ b/src/frontend/src/hooks/UsePluginPanels.tsx
@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
 import { api } from '../App';
+import { ApiIcon } from '../components/items/ApiIcon';
 import type { PanelType } from '../components/panels/Panel';
 import {
   type InvenTreeContext,
@@ -15,7 +16,6 @@ import {
 import { ApiEndpoints } from '../enums/ApiEndpoints';
 import type { ModelType } from '../enums/ModelType';
 import { identifierString } from '../functions/conversion';
-import { InvenTreeIcon, type InvenTreeIconType } from '../functions/icons';
 import { apiUrl } from '../states/ApiState';
 import { useGlobalSettingsState } from '../states/SettingsState';
 
@@ -89,7 +89,7 @@ export function usePluginPanels({
   const pluginPanels: PanelType[] = useMemo(() => {
     return (
       pluginData?.map((props: PluginUIFeature) => {
-        const iconName: string = props?.icon || 'plugin';
+        const iconName: string = props?.icon || 'ti:plug:outline';
         const identifier = identifierString(
           `${props.plugin_name}-${props.key}`
         );
@@ -102,7 +102,7 @@ export function usePluginPanels({
         return {
           name: identifier,
           label: props.title,
-          icon: <InvenTreeIcon icon={iconName as InvenTreeIconType} />,
+          icon: <ApiIcon name={iconName} />,
           content: (
             <PluginPanelContent
               pluginFeature={props}