Generate React component for each icon (#90)

* Generate React components for each SVG icon

* Regenerate icons

* Generate the cjs components

* Tweak the build script to also generate CJS variants of the components

* Mark the package as side-effect free

This should help with tree-shaking in downstream packages

* Fix types

assets/web/icons/admin.cjs

@@ -0,0 +1,19 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function AdminIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      d: "m12 4.236-6 3V12c0 5.156 4.239 7.254 6 7.898 1.761-.644 6-2.742 6-7.898V7.236l-6-3Zm-.894-1.789a2 2 0 0 1 1.788 0l6 3A2 2 0 0 1 20 7.236V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.742 4 12V7.236a2 2 0 0 1 1.106-1.789l6-3Z",
+      clipRule: "evenodd"
+    })
+  });
+}
+;
+AdminIcon.displayName = "AdminIcon";
+module.exports = AdminIcon;

assets/web/icons/admin.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * admin.svg
+ */
+declare const AdminIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default AdminIcon;

assets/web/icons/admin.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function AdminIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      d: "m12 4.236-6 3V12c0 5.156 4.239 7.254 6 7.898 1.761-.644 6-2.742 6-7.898V7.236l-6-3Zm-.894-1.789a2 2 0 0 1 1.788 0l6 3A2 2 0 0 1 20 7.236V12c0 6.742-5.773 9.246-7.51 9.846-.32.111-.66.111-.98 0C9.774 21.246 4 18.742 4 12V7.236a2 2 0 0 1 1.106-1.789l6-3Z",
+      clipRule: "evenodd"
+    })
+  });
+}
+;
+AdminIcon.displayName = "AdminIcon";
+export default AdminIcon;

assets/web/icons/arrow-down.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function ArrowDownIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M12 4.5a1 1 0 0 1 1 1v10.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 1 1 1.414-1.414L11 16.086V5.5a1 1 0 0 1 1-1Z"
+    })
+  });
+}
+;
+ArrowDownIcon.displayName = "ArrowDownIcon";
+module.exports = ArrowDownIcon;

assets/web/icons/arrow-down.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * arrow-down.svg
+ */
+declare const ArrowDownIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default ArrowDownIcon;

assets/web/icons/arrow-down.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function ArrowDownIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M12 4.5a1 1 0 0 1 1 1v10.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 1 1 1.414-1.414L11 16.086V5.5a1 1 0 0 1 1-1Z"
+    })
+  });
+}
+;
+ArrowDownIcon.displayName = "ArrowDownIcon";
+export default ArrowDownIcon;

assets/web/icons/arrow-left.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function ArrowLeftIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
+    })
+  });
+}
+;
+ArrowLeftIcon.displayName = "ArrowLeftIcon";
+module.exports = ArrowLeftIcon;

assets/web/icons/arrow-left.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * arrow-left.svg
+ */
+declare const ArrowLeftIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default ArrowLeftIcon;

assets/web/icons/arrow-left.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function ArrowLeftIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M12.207 5.293a1 1 0 0 1 0 1.414L7.914 11H18.5a1 1 0 1 1 0 2H7.914l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0Z"
+    })
+  });
+}
+;
+ArrowLeftIcon.displayName = "ArrowLeftIcon";
+export default ArrowLeftIcon;

assets/web/icons/arrow-right.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function ArrowRightIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M11.793 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.086 13H5.5a1 1 0 1 1 0-2h10.586l-4.293-4.293a1 1 0 0 1 0-1.414Z"
+    })
+  });
+}
+;
+ArrowRightIcon.displayName = "ArrowRightIcon";
+module.exports = ArrowRightIcon;

assets/web/icons/arrow-right.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * arrow-right.svg
+ */
+declare const ArrowRightIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default ArrowRightIcon;

assets/web/icons/arrow-right.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function ArrowRightIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M11.793 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.086 13H5.5a1 1 0 1 1 0-2h10.586l-4.293-4.293a1 1 0 0 1 0-1.414Z"
+    })
+  });
+}
+;
+ArrowRightIcon.displayName = "ArrowRightIcon";
+export default ArrowRightIcon;

assets/web/icons/arrow-up-right.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function ArrowUpRightIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M17.924 6.617a.996.996 0 0 1 .076.38V15a1 1 0 1 1-2 0V9.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L14.586 8H9a1 1 0 0 1 0-2h8a.997.997 0 0 1 .924.617Z"
+    })
+  });
+}
+;
+ArrowUpRightIcon.displayName = "ArrowUpRightIcon";
+module.exports = ArrowUpRightIcon;

assets/web/icons/arrow-up-right.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * arrow-up-right.svg
+ */
+declare const ArrowUpRightIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default ArrowUpRightIcon;

assets/web/icons/arrow-up-right.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function ArrowUpRightIcon(props) {
+  return /*#__PURE__*/_jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M17.924 6.617a.996.996 0 0 1 .076.38V15a1 1 0 1 1-2 0V9.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L14.586 8H9a1 1 0 0 1 0-2h8a.997.997 0 0 1 .924.617Z"
+    })
+  });
+}
+;
+ArrowUpRightIcon.displayName = "ArrowUpRightIcon";
+export default ArrowUpRightIcon;

assets/web/icons/arrow-up.cjs

@@ -0,0 +1,17 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+function ArrowUpIcon(props) {
+  return /*#__PURE__*/_reactJsxRuntime.jsx("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "currentColor",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: /*#__PURE__*/_reactJsxRuntime.jsx("path", {
+      d: "M12 19.5a1 1 0 0 0 1-1V7.914l4.293 4.293a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 1 0 1.414 1.414L11 7.914V18.5a1 1 0 0 0 1 1Z"
+    })
+  });
+}
+;
+ArrowUpIcon.displayName = "ArrowUpIcon";
+module.exports = ArrowUpIcon;

assets/web/icons/arrow-up.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+/**
+ * arrow-up.svg
+ */
+declare const ArrowUpIcon: React.FunctionComponent<
+    React.ComponentProps<"svg">
+>;
+
+export default ArrowUpIcon;