Demo

Menu icons

Wrap @icon-park/react icons with IconParkMenuTabIcon inside MenuTab when registering AppRegistry.menu items so sidebar, bottom nav, and mobile menus stay consistent.

Overview

Always import IconParkMenuTabIcon and MenuTab from @quan-erp/shared-ui. Do not drop raw IconPark components into menu configs — the wrapper sets sizing, outline theme, and data-plugin tracking.

  • icon — IconPark component (Home, SettingTwo, …)
  • pluginName — usually metadata.name
  • Use inside MenuTab for localized labels

Usage

TSXmenu.add
1import { IconParkMenuTabIcon, MenuTab } from "@quan-erp/shared-ui"; 2import { SettingTwo, Bookmark } from "@icon-park/react"; 3import metadata from "../../module.metadata.json" with { type: "json" }; 4import { Locale } from "./locale.export"; 5 6AppRegistry.menu.add({ 7 name: ( 8 <MenuTab 9 pluginName={metadata.name} 10 icon={ 11 <IconParkMenuTabIcon 12 pluginName={metadata.name} 13 icon={SettingTwo} 14 /> 15 } 16 labelKey="settings-tab" 17 fallbackLabel="Settings" 18 locale={Locale} 19 /> 20 ), 21 pluginName: metadata.name, 22 children: [ 23 { 24 name: ( 25 <MenuTab 26 pluginName={metadata.name} 27 icon={ 28 <IconParkMenuTabIcon 29 pluginName={metadata.name} 30 icon={Bookmark} 31 /> 32 } 33 labelKey="sub-item" 34 fallbackLabel="Sub Item" 35 locale={Locale} 36 /> 37 ), 38 path: `/${metadata.name}/sub-route`, 39 requiredApis: [ 40 { url: `/${metadata.name}/endpoints/`, method: "GET" }, 41 ], 42 }, 43 ], 44});