Draft: Change internal flow and fix issue #11

esbuild.config.js

@@ -0,0 +1,15 @@
+import esbuild from 'esbuild';
+import { nodeExternalsPlugin } from 'esbuild-node-externals';
+
+esbuild
+  .build({
+    entryPoints: ['src/Component.tsx'],
+    outfile: 'lib/IonIcon.js',
+    bundle: true,
+    minify: true,
+    platform: 'node',
+    sourcemap: true,
+    target: 'node14',
+    plugins: [nodeExternalsPlugin()],
+  })
+  .catch(() => process.exit(1));

package.json

@@ -1,9 +1,10 @@
 {
   "name": "@reacticons/ionicons",
-  "version": "6.1.1",
-  "ioniconsVersion": "v6.1.1",
+  "version": "7.0.0",
+  "ioniconsVersion": "v7.0.0",
   "license": "MIT",
   "private": false,
+  "type": "module",
   "author": "Alexander Schau <alexander@schau.email> (https://alexanderschau.com/)",
   "repository": {
     "type": "git",
@@ -15,28 +16,24 @@
     "icons",
     "typescript"
   ],
-  "main": "lib/components/IonIcon.js",
+  "main": "lib/IonIcon.js",
   "files": [
-    "lib/components/**/*"
+    "lib/**/*"
   ],
-  "types": "./lib/components/IonIcon.d.ts",
   "scripts": {
     "build": "bash run-build.sh",
-    "build-typescript": "tsc",
     "format": "prettier --write .",
     "lint": "eslint . --ext ts --ext js"
   },
   "devDependencies": {
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
-    "eslint": "^8.33.0",
+    "esbuild": "^0.17.12",
+    "esbuild-node-externals": "^1.6.0",
     "prettier": "^2.8.3",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^4.9.5"
+    "react-dom": "^18.2.0"
   },
   "dependencies": {}
 }

run-build.sh

@@ -1,6 +1,8 @@
 #!/bin/sh
 
-yarn build-typescript
+rm -rf lib
+mkdir lib
+cp src/IonIcon.js lib/IonIcon.js
 wget https://github.com/ionic-team/ionicons/archive/$npm_package_ioniconsVersion.zip -O ionicons.zip
 unzip -o ionicons.zip -d lib/
 rm ionicons.zip
@@ -9,5 +11,8 @@ cd lib
 commit_message=$(ls | grep -oP '(?<=ionicons-)(.+)')
 cd ..
 
-COMMIT_MESSAGE=$commit_message node lib/build.js
-rm -rf lib/ionicons-$commit_message
+COMMIT_MESSAGE=$commit_message node src/build.js
+rm -rf lib/ionicons-$commit_message
+
+node esbuild.config.js
+rm lib/iconList.json

src/Component.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const IonIcon: (
+  props: React.HTMLAttributes<HTMLDivElement> & {
+    name: 'all icon names';
+    size?: 'small' | 'large';
+  },
+) => JSX.Element;
+export default IonIcon;

src/components/IonIcon.tsx → src/Component.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import IconList from './iconList.json';
+
+// this file only exists during the build process
+// @ts-ignore
+import IconList from '../lib/iconList.json';
 
 const IonIcon = (
   props: React.HTMLAttributes<HTMLDivElement> & { name: keyof typeof IconList; size?: 'small' | 'large' },

src/build.ts → src/build.js

@@ -6,14 +6,18 @@ const version = process.env.COMMIT_MESSAGE;
   const iconsData = JSON.parse(fs.readFileSync(`lib/ionicons-${version}/src/data.json`, 'utf-8')).icons;
   if (!Array.isArray(iconsData)) return;
   const icons = iconsData.map((icon) => icon.name);
-  const res: { [key: string]: string } = {};
+  const res = {};
   for (const icon of icons) {
     res[icon] = fs
       .readFileSync(`lib/ionicons-${version}/src/svg/${icon}.svg`, 'utf-8')
-      .replace(/stroke=".+?" /g, '')
-      .replace(/(height|width)=".*?" /g, '')
-      .replace(/stroke:.*?;/g, '')
+      .replace(/(<svg[^>]+)width="[^"]+" /g, '$1')
+      .replace(/(<svg[^>]+)height="[^"]+" /g, '$1')
+      .replace(/(#000|#000000)/g, 'currentColor')
       .replace(/<title>.*?<\/title>/g, '');
   }
-  fs.writeFileSync('./lib/components/iconList.json', JSON.stringify(res));
+  fs.writeFileSync('./lib/iconList.json', JSON.stringify(res));
+
+  let data = fs.readFileSync('./src/Component.d.ts', 'utf-8');
+  data = data.replace('"all icon names"', icons.map((icon) => `'${icon}'`).join(' | '));
+  fs.writeFileSync('./lib/IonIcon.d.ts', data);
 })();