Skip to content

Commit 2dd4d77

Browse files
geoffhousegeoffhouse
committed
fix dynamic icons
1 parent 4462c7d commit 2dd4d77

47 files changed

Lines changed: 1270 additions & 1001 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,47 @@
22
# NPM
33
node_modules
44

5-
#Logs
5+
# logs
66
/logs/*
77
!/logs/.gitkeep
88

9-
#Backup Data
9+
# backup data
1010
/src/server/data/*
1111
!/src/server/data/.gitkeep
1212

13-
# Panel Configs
13+
# panel configs
1414
/src/config/panels/*.json
1515
!/src/config/panels/.gitkeep
1616

17-
# Global Config
17+
# global config
1818
/src/config/global/*.json
1919
!/src/config/global/.gitkeep
2020

21-
# Module Dockerfiles
21+
# module dockerfiles
2222
Dockerfile*
2323
!/src/server/Dockerfile
2424
!/src/server/services/dockerfile-write.js
2525

26-
# Global Environment Files
26+
# global environment files
2727
.env.development
2828
.env.test
2929
.env.production
3030

31-
# Client
31+
# client
3232
src/client/.pnp
3333
src/client/dist/*
3434
.pnp.js
3535

36-
# Testing
36+
# testing
3737
src/client/coverage
3838
src/server/routes/logs
3939

40-
# Client Production Build
40+
# client production build
4141
/src/client/build/*
4242
/src/client/dist/*
4343
!/src/client/build/.gitkeep
4444

45-
# Storybook Static Files
45+
# storybook static files
4646
docs/assets/storybook
4747

4848
# misc
@@ -53,12 +53,14 @@ yarn-debug.log*
5353
yarn-error.log*
5454

5555
# docs
56-
5756
docs/_data/sidebar.yml
5857
docs/pages/modules
5958
docs/pages/modules/**
6059
docs/_data
6160
docs/_site
6261
docs/_site/**
6362
docs/.jekyll-cache
64-
docs/.jekyll-cache/**
63+
docs/.jekyll-cache/**
64+
65+
# script outputs
66+
/src/client/src/utils/muiIconMap.js

‎package-lock.json‎

Lines changed: 1052 additions & 782 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"src/modules/**/client"
1010
],
1111
"scripts": {
12+
"predev": "node src/client/scripts/generateMuiIcons.mjs",
1213
"dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
1314
"dev:server": "nodemon ./src/server/bin/bug-dev.js",
1415
"dev:client": "npm run dev -w src/client",
@@ -54,6 +55,8 @@
5455
"@fortawesome/fontawesome-svg-core": "^6.7.2",
5556
"@fortawesome/free-solid-svg-icons": "^6.7.2",
5657
"@fortawesome/react-fontawesome": "^3.1.1",
58+
"@iconify-icons/mdi": "^1.2.48",
59+
"@iconify/react": "^6.0.2",
5760
"@mdi/js": "^7.4.47",
5861
"@monaco-editor/react": "^4.7.0",
5962
"@mui/icons-material": "^7.3.6",

‎src/client/.storybook/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const config = {
99
"@storybook/addon-links",
1010
"@storybook/addon-essentials",
1111
"@storybook/addon-interactions",
12+
"@storybook/addon-highlight",
1213
],
1314

1415
framework: {

‎src/client/package.json‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
11
{
2-
"name": "bug-client",
3-
"version": "3.1.65",
4-
"private": true,
5-
"scripts": {
6-
"dev": "vite",
7-
"build": "vite build",
8-
"preview": "vite preview",
9-
"test": "jest",
10-
"storybook": "storybook dev -p 3303",
11-
"build-storybook": "storybook build --output-dir ../../docs/assets/storybook",
12-
"deploy-storybook": "storybook-to-ghpages --existing-output-dir ./../../docs/assets/storybook -out=./_site"
13-
},
14-
"browserslist": {
15-
"production": [
16-
">0.2%",
17-
"not dead",
18-
"not op_mini all"
19-
],
20-
"development": [
21-
"last 1 chrome version",
22-
"last 1 firefox version",
23-
"last 1 safari version"
24-
]
25-
},
26-
"devDependencies": {
27-
"@storybook/addon-essentials": "^8.6.15",
28-
"@storybook/addon-interactions": "^8.6.15",
29-
"@storybook/addon-links": "^8.6.15",
30-
"@storybook/addon-mdx-gfm": "^8.6.15",
31-
"@storybook/blocks": "^8.6.15",
32-
"@storybook/react": "^8.6.15",
33-
"@storybook/react-vite": "^8.6.15",
34-
"@storybook/test": "^8.6.15",
35-
"@storybook/theming": "^8.6.15",
36-
"storybook": "^8.6.15"
37-
}
2+
"name": "bug-client",
3+
"version": "3.1.65",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"prebuild": "node scripts/generateMuiIcons.mjs",
9+
"preview": "vite preview",
10+
"test": "jest",
11+
"storybook": "storybook dev -p 3303",
12+
"build-storybook": "storybook build --output-dir ../../docs/assets/storybook",
13+
"deploy-storybook": "storybook-to-ghpages --existing-output-dir ./../../docs/assets/storybook -out=./_site"
14+
},
15+
"browserslist": {
16+
"production": [
17+
">0.2%",
18+
"not dead",
19+
"not op_mini all"
20+
],
21+
"development": [
22+
"last 1 chrome version",
23+
"last 1 firefox version",
24+
"last 1 safari version"
25+
]
26+
},
27+
"devDependencies": {
28+
"@storybook/addon-essentials": "^8.6.15",
29+
"@storybook/addon-highlight": "^8.6.15",
30+
"@storybook/addon-interactions": "^8.6.15",
31+
"@storybook/addon-links": "^8.6.15",
32+
"@storybook/addon-mdx-gfm": "^8.6.15",
33+
"@storybook/blocks": "^8.6.15",
34+
"@storybook/react": "^8.6.15",
35+
"@storybook/react-vite": "^8.6.15",
36+
"@storybook/test": "^8.6.15",
37+
"@storybook/theming": "^8.6.15",
38+
"storybook": "^8.6.15"
39+
}
3840
}

‎src/client/scripts/generateMuiIcons.mjs‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// scripts/generateMuiIcons.js
2+
import fs from "fs";
3+
import path from "path";
4+
import { fileURLToPath } from "url";
5+
6+
const __filename = fileURLToPath(import.meta.url);
7+
const __dirname = path.dirname(__filename);
8+
9+
// ignore these icons
10+
const VARIANTS = ["Outlined", "Rounded", "Sharp", "TwoTone"];
11+
12+
// resolve the folder where @mui/icons-material lives
13+
const muiIconsFolder = path.dirname(
14+
// resolve any single JS file, here we pick "Home.js"
15+
fileURLToPath(new URL('../../../node_modules/@mui/icons-material/Home.js', import.meta.url))
16+
);
17+
18+
// output registry file
19+
const outFile = path.resolve(__dirname, "..", "..", "client", "src", "utils", "muiIconMap.js");
20+
21+
// read all .js files in package folder
22+
const files = fs
23+
.readdirSync(muiIconsFolder)
24+
.filter((f) => f.endsWith(".js") && f !== "index.js")
25+
.filter((f) => {
26+
const iconName = f.replace(".js", "");
27+
// exclude if ends with any variant
28+
return !VARIANTS.some((v) => iconName.endsWith(v));
29+
});
30+
31+
// generate imports and map
32+
const imports = files
33+
.map((f) => {
34+
const iconName = f.replace(".js", "");
35+
return `import ${iconName} from '@mui/icons-material/${iconName}';`;
36+
})
37+
.join("\n");
38+
39+
const mapEntries = files
40+
.map((f) => {
41+
const iconName = f.replace(".js", "");
42+
return ` "${iconName}": ${iconName}`;
43+
})
44+
.join(",\n");
45+
46+
const content = `
47+
${imports}
48+
49+
export const muiIcons = {
50+
${mapEntries}
51+
};
52+
`;
53+
54+
fs.writeFileSync(outFile, content);
55+
console.log(`Generated ${files.length} MUI icons at ${outFile}`);

‎src/client/src/core/BugDynamicIcon.jsx‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,35 @@
1-
import { Suspense } from "react";
2-
import { iconMap } from "../utils/iconMappings";
1+
import { Icon } from "@iconify/react";
2+
import HelpOutline from "@mui/icons-material/HelpOutline";
3+
import { muiIcons } from "../utils/muiIconMap";
34

4-
export default function DynamicIcon({ iconName, sx = {}, color }) {
5-
const IconComponent = iconMap[iconName];
5+
export default function BugDynamicIcon({ iconName, sx = {}, color, size = 24 }) {
6+
if (!iconName) return null;
67

7-
if (!IconComponent) {
8-
console.error(`Icon "${iconName}" not found in iconMap`);
9-
return null;
8+
// detect mdi (iconify) icons by prefix
9+
if (iconName.slice(0, 3) === "mdi") {
10+
return (
11+
<Icon
12+
icon={iconName}
13+
style={{
14+
width: size,
15+
height: size,
16+
color: color ?? undefined,
17+
}}
18+
/>
19+
);
1020
}
1121

12-
return (
13-
<Suspense fallback={null}>
14-
<IconComponent sx={sx} style={color ? { color } : {}} />
15-
</Suspense>
16-
);
22+
// lookup mui icons in generated registry
23+
const MuiIcon = muiIcons[iconName] ?? HelpOutline;
24+
25+
// override sx height and width with provided size
26+
if (size !== 24) {
27+
sx = {
28+
...sx,
29+
height: `${size}px`,
30+
width: `${size}px`,
31+
};
32+
}
33+
34+
return <MuiIcon sx={sx} style={color ? { color } : undefined} />;
1735
}

‎src/client/src/core/BugEditIconDialog.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ export default function BugEditIconDialog({ onCancel, onSubmit, color = "#ffffff
200200

201201
const memoizedIcons = useMemo(
202202
() =>
203-
icons.icons.map((icon) => (
203+
icons?.icons?.map((icon) => (
204204
<Box key={icon} sx={{ display: "inline-block" }}>
205205
<Tooltip title={icon}>
206206
<Button

‎src/client/src/core/BugNetworkIcon.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function BugNetworkIcon({ disabled = false, sx = {}, activeColor
1212
...sx,
1313
}}
1414
>
15-
<BugDynamicIcon iconName="mdiLan" />
15+
<BugDynamicIcon iconName="mdi-lan" />
1616
</Box>
1717
);
1818
}

‎src/client/src/stories/BugDynamicIcon.stories.jsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,25 @@ export default {
4646
defaultValue: { summary: "#ff3822" },
4747
},
4848
},
49+
size: {
50+
type: { name: "number" },
51+
description: "The size in pixels of the icon",
52+
defaultValue: 24,
53+
table: {
54+
type: { summary: "number" },
55+
defaultValue: { summary: 24 },
56+
},
57+
},
58+
sx: {
59+
type: { name: "data" },
60+
defaultValue: {},
61+
description:
62+
"An object containing style overrides - see MaterialUI docs for options: https://mui.com/system/getting-started/the-sx-prop/",
63+
table: {
64+
type: { summary: "data" },
65+
defaultValue: { summary: "{}" },
66+
},
67+
},
4968
},
5069
};
5170

0 commit comments

Comments
 (0)