add support for multiple icon sets through subpath exports (#579)

* improve sync

* make multi-entry

* generate

* clean up

* u

* fix attrs replace

* Create sixty-chairs-sip.md

.changeset/sixty-chairs-sip.md

@@ -0,0 +1,7 @@
+---
+"@status-im/icons": major
+---
+
+Generated each icon group separately for better correctness
+Added separate export paths for the following icon sets: ./12, ./16, ./20, ./social, and ./reactions.
+Removed Tamagui runtime

packages/icons/.eslintrc

@@ -1,4 +1,5 @@
 {
   "root": true,
-  "extends": ["@status-im/eslint-config"]
+  "extends": ["@status-im/eslint-config"],
+  "ignorePatterns": ["dist", "index.js", "index.es.js"]
 }

packages/icons/index.es.js

@@ -0,0 +1,15 @@
+// @see https://github.com/tailwindlabs/heroicons/blob/master/react/index.esm.js
+export default new Proxy(
+  {},
+  {
+    get: (_, property) => {
+      if (property === '__esModule') {
+        return {}
+      }
+
+      throw new Error(
+        `Importing from \`@status-im/icons\` directly is not supported. Please import from either \`@status-im/icons/12\`, \`@status-im/icons/16\`, \`@status-im/icons/20\`, \`@status-im/icons/reactions\` or \`@status-im/icons/social\` instead.`
+      )
+    },
+  }
+)

packages/icons/index.js

@@ -0,0 +1,15 @@
+// @see https://github.com/tailwindlabs/heroicons/blob/master/react/index.esm.js
+module.exports = new Proxy(
+  {},
+  {
+    get: (_, property) => {
+      if (property === '__esModule') {
+        return {}
+      }
+
+      throw new Error(
+        `Importing from \`@status-im/icons\` directly is not supported. Please import from either \`@status-im/icons/12\`, \`@status-im/icons/16\`, \`@status-im/icons/20\`, \`@status-im/icons/reactions\`, or \`@status-im/icons/social\` instead.`
+      )
+    },
+  }
+)

packages/icons/package.json

@@ -5,27 +5,60 @@
     "dist",
     "svg"
   ],
-  "main": "dist/icons.js",
-  "module": "dist/icons.mjs",
-  "types": "dist/types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/icons.mjs",
-      "require": "./dist/icons.js"
+      "import": "./index.es.js",
+      "require": "./index.js"
     },
-    "./*.svg": {
-      "import": "./svg/*.svg"
+    "./12": {
+      "types": "./dist/12/index.d.ts",
+      "import": "./dist/12/index.es.js",
+      "require": "./dist/12/index.cjs.js"
+    },
+    "./16": {
+      "types": "./dist/16/index.d.ts",
+      "import": "./dist/16/index.es.js",
+      "require": "./dist/16/index.cjs.js"
+    },
+    "./20": {
+      "types": "./dist/20/index.d.ts",
+      "import": "./dist/20/index.es.js",
+      "require": "./dist/20/index.cjs.js"
+    },
+    "./social": {
+      "types": "./dist/social/index.d.ts",
+      "import": "./dist/social/index.es.js",
+      "require": "./dist/social/index.cjs.js"
+    },
+    "./reactions": {
+      "types": "./dist/reactions/index.d.ts",
+      "import": "./dist/reactions/index.es.js",
+      "require": "./dist/reactions/index.cjs.js"
+    },
+    "./12/*.svg": {
+      "import": "./svg/12/*.svg"
+    },
+    "./16/*.svg": {
+      "import": "./svg/16/*.svg"
+    },
+    "./20/*.svg": {
+      "import": "./svg/20/*.svg"
+    },
+    "./social/*.svg": {
+      "import": "./svg/social/*.svg"
+    },
+    "./reactions/*.svg": {
+      "import": "./svg/reactions/*.svg"
     }
   },
   "scripts": {
-    "sync": "vite-node scripts/sync.ts && yarn generate",
-    "generate": "rimraf src && svgr svg --out-dir src",
+    "sync": "vite-node scripts/sync.ts && prettier --parser=html --write 'svg/**/*.svg'",
+    "generate": "rimraf src && svgr svg --out-dir src && yarn lint:fix && yarn format",
     "dev": "vite build --watch --mode development",
     "build": "vite build",
     "postbuild": "yarn build:types",
-    "build:types": "tsc --noEmit false --emitDeclarationOnly",
+    "build:types": "tsc src/**/index.ts --emitDeclarationOnly --declaration --jsx react-jsx --skipLibCheck --declarationDir ./dist",
     "#test": "vitest",
     "typecheck": "tsc",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
@@ -34,27 +67,22 @@
     "clean": "rimraf dist node_modules .turbo",
     "prepack": "yarn build"
   },
-  "dependencies": {
-    "@tamagui/core": "1.74.21",
-    "@tamagui/web": "1.74.21",
-    "tamagui": "1.74.21"
-  },
   "peerDependencies": {
     "react": "^16.x || ^17.x || ^18.x",
-    "react-dom": "*",
-    "react-native-svg": ">=12"
+    "react-dom": "*"
   },
   "devDependencies": {
-    "@clack/prompts": "^0.6.3",
-    "@svgr/cli": "^6.5.1",
-    "@svgr/core": "^7.0.0",
-    "@svgr/plugin-prettier": "^7.0.0",
-    "@svgr/plugin-svgo": "^7.0.0",
-    "@types/fs-extra": "^11.0.1",
+    "@clack/prompts": "^0.7.0",
     "@status-im/eslint-config": "*",
+    "@svgr/cli": "^8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/fs-extra": "^11.0.1",
     "figma-api": "^1.11.0",
     "fs-extra": "^11.1.1",
     "svgo": "^3.0.2",
+    "p-map": "^7.0.2",
     "vite": "^4.1.4",
     "vite-node": "^0.29.7"
   },