From d98c9c53fc9a94b9fbf61d15c1085029d7ca5153 Mon Sep 17 00:00:00 2001 From: Florent Mariotti Date: Fri, 10 Jan 2025 15:17:30 +0100 Subject: [PATCH] fix icon + add utilitary for MUI icons --- .../board-card/useResourceTypeDisplay.ts | 5 ++- frontend/src/hooks/useMUIIconPath.ts | 37 +++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 frontend/src/hooks/useMUIIconPath.ts diff --git a/frontend/src/components/board-card/useResourceTypeDisplay.ts b/frontend/src/components/board-card/useResourceTypeDisplay.ts index 242399b1..89df3e4e 100644 --- a/frontend/src/components/board-card/useResourceTypeDisplay.ts +++ b/frontend/src/components/board-card/useResourceTypeDisplay.ts @@ -11,8 +11,11 @@ import { import TableChartIcon from "@mui/icons-material/TableChart"; import { RESOURCE_TYPE } from "~/core/enums/resource-type.enum"; +import { getMuiIconPath } from "~/hooks/useMUIIconPath"; export const useResourceTypeDisplay = (resourceType: string) => { + const tableChartPath = getMuiIconPath(TableChartIcon); + return useMemo(() => { let icon: string = mdiFileMultiple; let type: string = "Fichier"; @@ -44,7 +47,7 @@ export const useResourceTypeDisplay = (resourceType: string) => { break; } case RESOURCE_TYPE.BOARD: { - icon = mdiFileMultiple; //TODO : change to MUI TableIcon + icon = tableChartPath; type = "Tableau"; break; } diff --git a/frontend/src/hooks/useMUIIconPath.ts b/frontend/src/hooks/useMUIIconPath.ts new file mode 100644 index 00000000..671cc848 --- /dev/null +++ b/frontend/src/hooks/useMUIIconPath.ts @@ -0,0 +1,37 @@ +import { createElement } from "react"; + +import { SvgIconTypeMap } from "@mui/material"; +import { OverridableComponent } from "@mui/material/OverridableComponent"; +import { renderToString } from "react-dom/server"; + +type MuiIconComponent = OverridableComponent> & { + muiName: string; +}; + +export const getMuiIconPath = (IconComponent: MuiIconComponent): string => { + try { + // Render the icon component to string + const svgString = renderToString(createElement(IconComponent, {})); + + // Create a temporary DOM element to parse the SVG + const div = document.createElement("div"); + div.innerHTML = svgString; + + // Get the path element + const pathElement = div.querySelector("path"); + if (!pathElement) { + throw new Error("No path element found in SVG"); + } + + // Get the d attribute which contains the path data + const pathData = pathElement.getAttribute("d"); + if (!pathData) { + throw new Error("No path data found"); + } + + return pathData; + } catch (error) { + console.error("Error extracting path from MUI icon:", error); + return ""; + } +};