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}