chore: release v4.0.0

.gitignore

@@ -3,6 +3,7 @@ node_modules/
 solid/
 outline/
 mini/
+micro/
 src/
 build/
 heroicons/

README.md

@@ -32,17 +32,19 @@ Specific icons:
 ```tsx
 import React from "react";
 import { View } from "react-native";
-import { SparklesIcon } from "react-native-heroicons/solid";
-import { SparklesIcon as SparklesIconOutline } from "react-native-heroicons/outline";
+import { SparklesIcon as SparklesIconMicro } from "react-native-heroicons/micro";
 // Old solid style from heroicons v1
 import { SparklesIcon as SparklesIconMini } from "react-native-heroicons/mini";
+import { SparklesIcon } from "react-native-heroicons/solid";
+import { SparklesIcon as SparklesIconOutline } from "react-native-heroicons/outline";
 
 const App = () => {
   return (
     <View>
+      <SparklesIconMicro />
+      <SparklesIconMini />
       <SparklesIcon />
       <SparklesIconOutline />
-      <SparklesIconMini />
     </View>
   );
 };
@@ -65,7 +67,8 @@ export default App;
 
 ## Customization
 
-Icons can be adjusted with the `size` prop (default: 24):
+Icons can be adjusted with the `size` prop.
+Defaults are `16` for `micro`, `20` for `mini` and `24` for `solid`/`outline`: 24):
 
 ```tsx
 import { SparklesIcon as SparklesIconOutline } from "react-native-heroicons/outline";

bin/build.ts

@@ -1,10 +1,11 @@
 import { transform } from "@svgr/core";
 import { promises as fs } from "fs";
-/* import template from "./template"; */
+import { Template, template16, template20, template24 } from "./template";
 import junk from "junk";
 import camelcase from "camelcase";
 
-type IconStyle = "solid" | "outline" | "mini";
+const ICON_STYLES = ["micro", "mini", "solid", "outline"] as const;
+type IconStyle = (typeof ICON_STYLES)[number];
 
 const resetSrcDir = async () => {
   try {
@@ -14,37 +15,25 @@ const resetSrcDir = async () => {
   }
   try {
     await fs.mkdir(`./src`);
-    await fs.mkdir(`./src/solid`);
-    await fs.mkdir(`./src/outline`);
-    await fs.mkdir(`./src/mini`);
+    ICON_STYLES.forEach(async (style) => {
+      await fs.mkdir(`./src/${style}`);
+    });
   } catch (error) {
     throw new Error("Failed wiping src folders");
   }
 };
 
-const template = (variables: any, { tpl }: any) => {
-  return tpl`
-import * as React from "react";
-import Svg, { Path, SvgProps, NumberProp } from "react-native-svg";
-
-interface Props extends SvgProps {
-  size?: NumberProp;
-}
-
-const ${variables.componentName} = ({ size = 24, ...props }: Props) => {
-  return (
-    ${variables.jsx}
-  )
-};
- 
-${variables.exports};
-`;
-};
-
 const genComponentFromBuffer = async (
   componentName: string,
-  svgBuffer: Buffer
+  svgBuffer: Buffer,
+  templateIconSize: 16 | 20 | 24
 ): Promise<string> => {
+  const template = {
+    16: template16,
+    20: template20,
+    24: template24,
+  }[templateIconSize];
+
   try {
     return await transform(
       svgBuffer,
@@ -88,6 +77,7 @@ const getIcons = async (style: IconStyle) => {
   const iconDir = "./heroicons/optimized";
 
   const stylePath = {
+    micro: "16/solid",
     mini: "20/solid",
     outline: "24/outline",
     solid: "24/solid",
@@ -105,9 +95,20 @@ const getIcons = async (style: IconStyle) => {
 };
 
 const exportIcons = async (style: IconStyle) => {
+  const sizeMap: Record<IconStyle, 16 | 20 | 24> = {
+    micro: 16,
+    mini: 20,
+    outline: 24,
+    solid: 24,
+  };
+
   const icons = await getIcons(style);
   for (let { componentName, svg } of icons) {
-    const jsx = await genComponentFromBuffer(componentName, svg);
+    const jsx = await genComponentFromBuffer(
+      componentName,
+      svg,
+      sizeMap[style]
+    );
     await fs.writeFile(`./src/${style}/${componentName}.tsx`, jsx);
     const exportStr = `export { default as ${componentName} } from './${componentName}';\n`;
     await fs.writeFile(`./src/${style}/index.ts`, exportStr, { flag: "a" });
@@ -116,9 +117,7 @@ const exportIcons = async (style: IconStyle) => {
 
 (async () => {
   await resetSrcDir();
-  const styles: IconStyle[] = ["solid", "outline", "mini"];
-
-  styles.forEach(async (s) => {
+  ICON_STYLES.forEach(async (s) => {
     await exportIcons(s);
   });
 })();

bin/template.ts

@@ -1,26 +1,61 @@
-export const template = (
-  { template }: any,
-  _opts: any,
-  { imports: _imports, componentName, props: _props, jsx, exports }: any
-) => {
-  const tsTemplate = template.smart({ plugins: ["typescript"] });
-
-  return tsTemplate.ast`
-      import * as React from "react";
-      import Svg, { Path, SvgProps, NumberProp } from "react-native-svg";
-
-      interface Props extends SvgProps {
-        size?: NumberProp;
-      }
-
-      const ${componentName} = ({ size = 24, ...props }: Props) => {
-        return (
-          ${jsx}
-        )
-      };
-
-      ${exports}
-    `;
+import type { Options as TransformOptions } from "@svgr/babel-preset";
+export type Template = TransformOptions["template"];
+
+const template16: Template = (variables, { tpl }) => {
+  return tpl`
+    import * as React from "react";
+    import Svg, { Path, SvgProps, NumberProp } from "react-native-svg";
+
+    interface Props extends SvgProps {
+      size?: NumberProp;
+    }
+
+    const ${variables.componentName} = ({ size = 16, ...props }: Props) => {
+      return (
+        ${variables.jsx}
+      )
+    };
+     
+    ${variables.exports};
+  `;
+};
+
+const template20: Template = (variables, { tpl }) => {
+  return tpl`
+    import * as React from "react";
+    import Svg, { Path, SvgProps, NumberProp } from "react-native-svg";
+
+    interface Props extends SvgProps {
+      size?: NumberProp;
+    }
+
+    const ${variables.componentName} = ({ size = 20, ...props }: Props) => {
+      return (
+        ${variables.jsx}
+      )
+    };
+     
+    ${variables.exports};
+  `;
+};
+
+const template24: Template = (variables, { tpl }) => {
+  return tpl`
+    import * as React from "react";
+    import Svg, { Path, SvgProps, NumberProp } from "react-native-svg";
+
+    interface Props extends SvgProps {
+      size?: NumberProp;
+    }
+
+    const ${variables.componentName} = ({ size = 24, ...props }: Props) => {
+      return (
+        ${variables.jsx}
+      )
+    };
+     
+    ${variables.exports};
+  `;
 };
 
-export default template;
+export { template16, template20, template24 };

compile.js

@@ -3,7 +3,7 @@ const glob = require("tiny-glob");
 const fs = require("fs/promises");
 
 (async () => {
-  const entryPoints = ["solid", "outline", "mini"];
+  const entryPoints = ["solid", "outline", "mini", "micro"];
 
   entryPoints.forEach(async (ep) => {
     const entryPoints = await glob(`./src/${ep}/*.{ts,tsx}`);

package.json

@@ -1,19 +1,20 @@
 {
   "name": "react-native-heroicons",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "description": "React Native components for heroicons",
   "files": [
     "solid",
     "outline",
-    "mini"
+    "mini",
+    "micro"
   ],
   "sideEffects": false,
   "scripts": {
     "fetch": "rimraf heroicons/ && git clone https://github.com/tailwindlabs/heroicons/",
     "gen": "npm run fetch && ts-node --project bin/tsconfig.json --files bin/build.ts",
     "gen:no": "ts-node --project bin/tsconfig.json --files bin/build.ts",
     "cleanup": "./cleanup.sh",
-    "compile": "rimraf solid && rimraf outline && rimraf mini && node compile.js && tsc --emitDeclarationOnly --outDir . && cp solid/*.d.ts solid/esm && cp outline/*.d.ts outline/esm && cp mini/*.d.ts mini/esm",
+    "compile": "rimraf solid && rimraf outline && rimraf mini && rimraf micro && node compile.js && tsc --emitDeclarationOnly --outDir . && cp solid/*.d.ts solid/esm && cp outline/*.d.ts outline/esm && cp mini/*.d.ts mini/esm && cp micro/*.d.ts micro/esm",
     "build:fetch": "npm run gen && npm run compile && npm run cleanup",
     "build": "npm run compile && npm run cleanup",
     "release": "npm run build:fetch && release-it"
@@ -34,6 +35,7 @@
   "author": "ecklf",
   "license": "MIT",
   "devDependencies": {
+    "@svgr/babel-preset": "^8.1.0",
     "@svgr/core": "^6.5.1",
     "@svgr/plugin-jsx": "^6.5.1",
     "@svgr/plugin-prettier": "^6.5.1",