Split icons to separate files for ESM tree-shaking

package.json

@@ -26,6 +26,7 @@
     "eslint-plugin-n": "^16.3.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-security": "^2.1.1",
+    "glob": "^10.5.0",
     "postcss": "^8.4.38",
     "react": "^18.2.0",
     "rimraf": "^5.0.5",
@@ -40,5 +41,9 @@
     "build:icons": "rimraf ./src/icons && svgr ./src/svg && node post-build-icons.js",
     "build": "rimraf ./dist && yarn run build:icons && rollup -c --bundleConfigAsCjs",
     "lint": "eslint src/**/*.ts"
-  }
+  },
+  "sideEffects": [
+    "./dist/esm/style-*.js",
+    "./dist/cjs/index.js"
+  ]
 }

post-build-icons.js

@@ -10,10 +10,14 @@ const path = require('path');
   await Promise.all(
     icons.map(async (file) => {
       const iconPath = path.join(iconsPath, file);
-      const content = await fs.readFile(iconPath, {
+      let content = await fs.readFile(iconPath, {
         encoding: 'utf8'
       });
 
+      if (content.includes('strokeWidth:') || content.includes('strokeWidth=')) {
+        content = content.replace('...props', 'strokeWidth, ...props');
+      }
+
       await fs.writeFile(
         iconPath,
         content

rollup.config.js

@@ -5,10 +5,25 @@ import typescript from '@rollup/plugin-typescript';
 import dts from 'rollup-plugin-dts';
 import terser from '@rollup/plugin-terser';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import { globSync } from 'glob';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import postcss from 'rollup-plugin-postcss';
 
 const packageJson = require('./package.json');
 
+const common = {
+  plugins: [
+    peerDepsExternal(),
+    resolve(),
+    commonjs(),
+    typescript({ tsconfig: './tsconfig.json' }),
+    terser(),
+    postcss()
+  ],
+  external: ['react', 'react-dom', 'react/jsx-runtime']
+};
+
 export default [
   {
     input: 'src/index.ts',
@@ -17,22 +32,32 @@ export default [
         file: packageJson.main,
         format: 'cjs',
         sourcemap: false
-      },
+      }
+    ],
+    ...common
+  },
+  {
+    input: {
+      ...Object.fromEntries(
+        globSync('src/icons/*.tsx').map(file => [
+          // This removes `src/` as well as the file extension from each
+          // file, so e.g. src/nested/foo.tsx becomes nested/foo
+          path.relative('src', file.slice(0, file.length - path.extname(file).length)),
+          // This expands the relative paths to absolute paths, so e.g.
+          // src/nested/foo becomes /project/src/nested/foo.js
+          fileURLToPath(new URL(file, import.meta.url))
+        ])
+      ),
+      index: 'src/index.ts'
+    },
+    output: [
       {
-        file: packageJson.module,
+        dir: 'dist/esm',
         format: 'esm',
         sourcemap: false
       }
     ],
-    plugins: [
-      peerDepsExternal(),
-      resolve(),
-      commonjs(),
-      typescript({ tsconfig: './tsconfig.json' }),
-      terser(),
-      postcss()
-    ],
-    external: ['react', 'react-dom', 'react/jsx-runtime']
+    ...common
   },
   {
     input: 'src/index.ts',

templates/svg.js

@@ -8,7 +8,6 @@ import { IonIconProps } from '../types';
 ${interfaces}
 
 function ${componentName}({
-  strokeWidth,
   className,
   spin,
   beat,

tsconfig.json

@@ -17,7 +17,6 @@
     "declaration": false,
     "declarationMap": false,
     "noEmit": true,
-    "outDir": "./dist",
     "jsx": "react-jsx"
   },
   "include": ["src"]