Replace custom SVG icons and @mui/icons-material with lucide-react for consistent, lightweight icon management across the application. ## Changes - Add lucide-react package and remove @mui/icons-material - Create theme-aware Icon wrapper component with color resolution - Create iconMap.js for legacy icon name mappings - Migrate 64 components to use new Icon component - Remove 74 unused SVG files from assets/icons/ ## Benefits - Consistent icon API across the application - Smaller bundle size with tree-shakeable imports - Theme-aware color support via MUI theme paths - Simpler maintenance with single icon library
121 lines
2.9 KiB
JavaScript
121 lines
2.9 KiB
JavaScript
/**
|
|
* Maps legacy icon names to Lucide icon names
|
|
* Use: import { iconMap } from './iconMap'; LucideIcons[iconMap['monitors']]
|
|
*/
|
|
export const iconMap = {
|
|
// Navigation/Sidebar icons
|
|
monitors: "Globe",
|
|
incidents: "AlertTriangle",
|
|
integrations: "Link",
|
|
"page-speed": "Gauge",
|
|
settings: "Settings",
|
|
notifications: "Bell",
|
|
maintenance: "Wrench",
|
|
"status-pages": "Wifi",
|
|
docs: "FileText",
|
|
discussions: "MessageCircle",
|
|
support: "HelpCircle",
|
|
changeLog: "Code",
|
|
logs: "Database",
|
|
|
|
// User icons
|
|
user: "User",
|
|
"user-two": "Users",
|
|
"user-edit": "UserPen",
|
|
groups: "Users",
|
|
lock: "Lock",
|
|
key: "Key",
|
|
logout: "LogOut",
|
|
|
|
// Action icons
|
|
edit: "Pencil",
|
|
"trash-bin": "Trash2",
|
|
search: "Search",
|
|
"close-icon": "X",
|
|
check: "Check",
|
|
"check-icon": "CheckCircle",
|
|
"check-outlined": "CheckCircle",
|
|
|
|
// Arrow icons
|
|
"left-arrow": "ChevronLeft",
|
|
"right-arrow": "ChevronRight",
|
|
"up-arrow": "ChevronUp",
|
|
"down-arrow": "ChevronDown",
|
|
"left-arrow-double": "ChevronsLeft",
|
|
"right-arrow-double": "ChevronsRight",
|
|
"left-arrow-long": "ArrowLeft",
|
|
"top-right-arrow": "ArrowUpRight",
|
|
"open-in-new-page": "ExternalLink",
|
|
"selector-vertical": "ChevronsUpDown",
|
|
|
|
// Status/Alert icons
|
|
"alert-icon": "Bell",
|
|
"warning-icon": "AlertCircle",
|
|
"history-icon": "History",
|
|
|
|
// Data/Chart icons
|
|
dashboard: "LayoutGrid",
|
|
"monitor-graph-line": "TrendingUp",
|
|
"response-time-icon": "TrendingUp",
|
|
"uptime-icon": "Activity",
|
|
"speedometer-icon": "Gauge",
|
|
"spedometer-icon": "Gauge",
|
|
"ruler-icon": "Ruler",
|
|
"performance-report": "Layers",
|
|
"average-response-icon": "BarChart3",
|
|
"distributed-uptime": "Network",
|
|
|
|
// Misc icons
|
|
calendar: "Calendar",
|
|
"calendar-check": "CalendarCheck",
|
|
"clock-snooze": "Clock",
|
|
mail: "Mail",
|
|
email: "Mail",
|
|
folder: "Folder",
|
|
"dots-vertical": "MoreVertical",
|
|
"pause-icon": "PauseCircle",
|
|
"resume-icon": "PlayCircle",
|
|
"checkbox-filled": "CheckSquare",
|
|
"checkbox-outline": "Square",
|
|
"radio-checked": "Circle",
|
|
"cpu-chip": "Cpu",
|
|
certificate: "Award",
|
|
"interval-check": "RefreshCw",
|
|
};
|
|
|
|
/**
|
|
* MUI icon to Lucide mapping
|
|
*/
|
|
export const muiToLucideMap = {
|
|
AddCircleOutline: "PlusCircle",
|
|
ArrowDownwardRounded: "ArrowDown",
|
|
ArrowUpwardRounded: "ArrowUp",
|
|
ArrowDropDown: "ChevronDown",
|
|
ArrowOutward: "ExternalLink",
|
|
CheckCircle: "CheckCircle2",
|
|
Clear: "X",
|
|
Close: "X",
|
|
CloseRounded: "X",
|
|
CloudUpload: "Upload",
|
|
Delete: "Trash2",
|
|
DeleteOutlineRounded: "Trash2",
|
|
Email: "Mail",
|
|
ErrorOutline: "AlertTriangle",
|
|
ErrorOutlineOutlined: "AlertTriangle",
|
|
Image: "ImageIcon",
|
|
InfoOutlined: "Info",
|
|
KeyboardArrowDown: "ChevronDown",
|
|
Menu: "Menu",
|
|
PauseCircleOutline: "PauseCircle",
|
|
PauseOutlined: "Pause",
|
|
PlayArrowOutlined: "Play",
|
|
PlayCircleOutlineRounded: "PlayCircle",
|
|
RadioButtonChecked: "Circle",
|
|
ReorderRounded: "GripVertical",
|
|
SettingsOutlined: "Settings",
|
|
Share: "Share2",
|
|
Visibility: "Eye",
|
|
VisibilityOff: "EyeOff",
|
|
WarningAmberOutlined: "AlertTriangle",
|
|
};
|