Fix importing icons when using Next.js SSG/SSR, for real this time.

TeamWertarbyte · May 7, 2024 · e1d02a5 · e1d02a5
1 parent 60706c2
commit e1d02a5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/generate-module.js b/generate-module.js
@@ -48,9 +48,11 @@ function checkNameClashes (icons) {
   fse.mkdirpSync(path.join(__dirname, 'package', 'esm', 'light'))
 
   for (const { name, filename, svgPath } of icons) {
-    const code = `import createIcon from './util/createIcon'
-  export default createIcon('${svgPath}', '${name}')
-  `
+    const code = `
+      "use client";
+      import createIcon from './util/createIcon'
+      export default createIcon('${svgPath}', '${name}')
+    `
 
     // es module
     fse.writeFileSync(path.join(__dirname, 'package', 'esm', `${filename || name}.js`), babel.transform(code, {
@@ -70,9 +72,11 @@ function checkNameClashes (icons) {
   }
 
   for (const { name, filename, svgPath } of lightIcons) {
-    const code = `import createIcon from '../util/createIcon'
-  export default createIcon('${svgPath}', '${name}')
-  `
+    const code = `
+      "use client";
+      import createIcon from '../util/createIcon'
+      export default createIcon('${svgPath}', '${name}')
+    `
 
     // es module
     fse.writeFileSync(path.join(__dirname, 'package', 'esm', 'light', `${filename || name}.js`), babel.transform(code, {

diff --git a/src/util/createIcon.js b/src/util/createIcon.js
@@ -1,4 +1,3 @@
-"use client";
 import { createSvgIcon } from "@mui/material/utils";
 
 export default (path, name) => createSvgIcon(<path d={path} />, name);