feat: Add react package (#4)

* chore: Organise * feat: Add `react` package * refactor: Remove unneeded char
2025-12-16 15:37:41 +01:00 · 2020-06-13 12:52:10 +01:00
parent 6a3378ce5a
commit d652e795d6
338 changed files with 10986 additions and 15748 deletions
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -1,3 +0,0 @@
-{
-  "*.js": "eslint"
-}
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,19 +0,0 @@
-language: node_js
-cache:
-  directories:
-    - node_modules
-notifications:
-  email: false
-node_js: 8
-before_script:
-  - npm prune
-script:
-  - npm run all
-after_success:
-  - npx codecov
-  - npx babel-node ./bin/sync-algolia.js
-deploy:
-  provider: script
-  skip_cleanup: true
-  script:
-    - npx semantic-release
--- a/bin/.eslintrc.json
+++ b/bin/.eslintrc.json
@@ -1,6 +0,0 @@
-{
-  "rules": {
-    "import/no-extraneous-dependencies": "off",
-    "no-console": "off"
-  }
-}
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,8 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-conventional'],
-  rules: {
-    'scope-case': [0],
-    'subject-case': [2, 'always', 'sentence-case'],
-    'header-max-length': [0],
-  },
-};
--- a/examples/index.html
+++ b/examples/index.html
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Feather</title>
-</head>
-<body>
-  <i data-feather="eye"></i>
-  <i data-feather="heart"></i>
-  <i data-feather="feather"></i>
-
-  <script src="https://unpkg.com/feather-icons"></script>
-  <script>
-    feather.replace()
-  </script>
-</body>
-</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,67 +1,9 @@
 {
-  "name": "feather-icons",
-  "version": "0.0.0-development",
-  "description": "Simply beautiful open source icons",
-  "main": "dist/feather.js",
-  "unpkg": "dist/feather.min.js",
-  "files": [
-    "dist"
-  ],
+  "private": true,
  "scripts": {
-    "all": "npm-run-all --sequential build lint test:coverage",
-    "build": "./bin/build.sh",
-    "lint": "eslint .",
-    "test": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "cm": "git-cz",
-    "precommit": "lint-staged",
-    "commitmsg": "commitlint --edit"
+    "react:compile": "yarn workspace react compile"
  },
-  "config": {
-    "commitizen": {
-      "path": "cz-conventional-changelog"
-    }
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.js"
-    ]
-  },
-  "dependencies": {
-    "classnames": "^2.2.5",
-    "core-js": "^3.1.3"
-  },
-  "devDependencies": {
-    "@commitlint/cli": "^5.2.5",
-    "@commitlint/config-conventional": "^6.1.3",
-    "algoliasearch": "^3.27.1",
-    "babel-cli": "^6.24.1",
-    "babel-loader": "^7.1.1",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-stage-2": "^6.24.1",
-    "cheerio": "^1.0.0-rc.2",
-    "commitizen": "^2.9.6",
-    "cz-conventional-changelog": "^2.1.0",
-    "eslint": "^4.19.1",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-config-prettier": "^2.9.0",
-    "eslint-plugin-import": "^2.5.0",
-    "eslint-plugin-prettier": "^2.5.0",
-    "html-minifier": "^3.5.8",
-    "husky": "^0.14.3",
-    "jest": "^22.4.4",
-    "lint-staged": "^6.0.0",
-    "npm-run-all": "^4.1.2",
-    "prettier": "^1.8.2",
-    "semantic-release": "^12.2.2",
-    "svgo": "^0.7.2",
-    "webpack": "^4.8.3",
-    "webpack-cli": "^2.1.3"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/feathericons/feather.git"
-  },
-  "author": "Cole Bemis <cole@colebemis.com> (http://colebemis.com)",
-  "license": "MIT"
+  "workspaces": [
+    "packages/react"
+  ]
 }
--- a/packages/js/.babelrc
+++ b/packages/js/.babelrc
--- a/packages/js/.eslintignore
+++ b/packages/js/.eslintignore
--- a/packages/js/.eslintrc.json
+++ b/packages/js/.eslintrc.json
--- a/packages/js/bin/tests/snapshots/build-icons-object.test.js.snap
+++ b/packages/js/bin/tests/snapshots/build-icons-object.test.js.snap
--- a/packages/js/bin/tests/snapshots/build-sprite-string.test.js.snap
+++ b/packages/js/bin/tests/snapshots/build-sprite-string.test.js.snap
--- a/packages/js/bin/tests/snapshots/process-svg.test.js.snap
+++ b/packages/js/bin/tests/snapshots/process-svg.test.js.snap
--- a/packages/js/bin/tests/build-icons-object.test.js
+++ b/packages/js/bin/tests/build-icons-object.test.js
--- a/packages/js/bin/tests/build-sprite-string.test.js
+++ b/packages/js/bin/tests/build-sprite-string.test.js
--- a/packages/js/bin/tests/process-svg.test.js
+++ b/packages/js/bin/tests/process-svg.test.js
--- a/packages/js/bin/build-icons-json.js
+++ b/packages/js/bin/build-icons-json.js
--- a/packages/js/bin/build-icons-object.js
+++ b/packages/js/bin/build-icons-object.js
--- a/packages/js/bin/build-sprite-string.js
+++ b/packages/js/bin/build-sprite-string.js
--- a/packages/js/bin/build-sprite.js
+++ b/packages/js/bin/build-sprite.js
--- a/packages/js/bin/build-svgs.js
+++ b/packages/js/bin/build-svgs.js
--- a/packages/js/bin/build.sh
+++ b/packages/js/bin/build.sh
--- a/packages/js/bin/process-svg.js
+++ b/packages/js/bin/process-svg.js
--- a/packages/js/bin/process-svgs.js
+++ b/packages/js/bin/process-svgs.js
--- a/packages/js/bin/sync-algolia.js
+++ b/packages/js/bin/sync-algolia.js
--- a/packages/js/package.json
+++ b/packages/js/package.json
@@ -0,0 +1,67 @@
+{
+  "name": "feather-icons",
+  "version": "0.0.0-development",
+  "description": "Simply beautiful open source icons",
+  "main": "dist/feather.js",
+  "unpkg": "dist/feather.min.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "all": "npm-run-all --sequential build lint test:coverage",
+    "build": "./bin/build.sh",
+    "lint": "eslint .",
+    "test": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "cm": "git-cz",
+    "precommit": "lint-staged",
+    "commitmsg": "commitlint --edit"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.js"
+    ]
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "core-js": "^3.1.3"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^5.2.5",
+    "@commitlint/config-conventional": "^6.1.3",
+    "algoliasearch": "^3.27.1",
+    "babel-cli": "^6.24.1",
+    "babel-loader": "^7.1.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-2": "^6.24.1",
+    "cheerio": "^1.0.0-rc.2",
+    "commitizen": "^2.9.6",
+    "cz-conventional-changelog": "^2.1.0",
+    "eslint": "^4.19.1",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-import": "^2.5.0",
+    "eslint-plugin-prettier": "^2.5.0",
+    "html-minifier": "^3.5.8",
+    "husky": "^0.14.3",
+    "jest": "^22.4.4",
+    "lint-staged": "^6.0.0",
+    "npm-run-all": "^4.1.2",
+    "prettier": "^1.8.2",
+    "semantic-release": "^12.2.2",
+    "svgo": "^0.7.2",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/feathericons/feather.git"
+  },
+  "author": "Cole Bemis <cole@colebemis.com> (http://colebemis.com)",
+  "license": "MIT"
+}
--- a/packages/js/src/tests/snapshots/icon.test.js.snap
+++ b/packages/js/src/tests/snapshots/icon.test.js.snap
--- a/packages/js/src/tests/snapshots/icons.test.js.snap
+++ b/packages/js/src/tests/snapshots/icons.test.js.snap
--- a/packages/js/src/tests/snapshots/replace.node.test.js.snap
+++ b/packages/js/src/tests/snapshots/replace.node.test.js.snap
--- a/packages/js/src/tests/snapshots/replace.test.js.snap
+++ b/packages/js/src/tests/snapshots/replace.test.js.snap
--- a/packages/js/src/tests/snapshots/to-svg.test.js.snap
+++ b/packages/js/src/tests/snapshots/to-svg.test.js.snap
--- a/packages/js/src/tests/icon.test.js
+++ b/packages/js/src/tests/icon.test.js
--- a/packages/js/src/tests/icons.test.js
+++ b/packages/js/src/tests/icons.test.js
--- a/packages/js/src/tests/index.test.js
+++ b/packages/js/src/tests/index.test.js
--- a/packages/js/src/tests/replace.node.test.js
+++ b/packages/js/src/tests/replace.node.test.js
--- a/packages/js/src/tests/replace.test.js
+++ b/packages/js/src/tests/replace.test.js
--- a/packages/js/src/tests/to-svg.test.js
+++ b/packages/js/src/tests/to-svg.test.js
--- a/packages/js/src/default-attrs.json
+++ b/packages/js/src/default-attrs.json
--- a/packages/js/src/icon.js
+++ b/packages/js/src/icon.js
--- a/packages/js/src/icons.js
+++ b/packages/js/src/icons.js
--- a/packages/js/src/index.js
+++ b/packages/js/src/index.js
--- a/packages/js/src/replace.js
+++ b/packages/js/src/replace.js
--- a/packages/js/src/tags.json
+++ b/packages/js/src/tags.json
--- a/packages/js/src/to-svg.js
+++ b/packages/js/src/to-svg.js
--- a/packages/js/webpack.config.js
+++ b/packages/js/webpack.config.js
--- a/packages/react/bin/build.js
+++ b/packages/react/bin/build.js
@@ -0,0 +1,130 @@
+const cheerio = require("cheerio");
+const fs = require("fs");
+const path = require("path");
+const prettier = require("prettier");
+const upperCamelCase = require("uppercamelcase");
+
+const directory = path.join(process.cwd(), "../../icons");
+
+function getAllData() {
+  const fileNames = fs.readdirSync(directory);
+
+  return fileNames.map((fileName) => {
+    const name = fileName.replace(/\.svg$/, "");
+    const fullPath = path.join(directory, `${name}.svg`);
+    const fileContents = fs.readFileSync(fullPath, "utf8");
+
+    const $ = cheerio.load(fileContents);
+    const content = $("svg").html();
+
+    return {
+      name,
+      src: fileContents,
+      content,
+    };
+  });
+}
+
+const icons = getAllData();
+
+const dir = path.join(process.cwd(), "src/icons");
+
+if (!fs.existsSync(dir)) {
+  fs.mkdirSync(dir);
+}
+
+const initialTypeDefinitions = `/// <reference types="react" />
+import { FC, SVGAttributes } from "react";
+
+interface Props extends SVGAttributes<SVGElement> {
+  color?: string;
+  size?: string | number;
+}
+
+type Icon = FC<Props>;
+`;
+
+fs.writeFileSync(path.join(process.cwd(), "src", "index.js"), "", "utf-8");
+fs.writeFileSync(
+  path.join(process.cwd(), "src", "index.d.ts"),
+  initialTypeDefinitions,
+  "utf-8"
+);
+
+const attrsToString = (attrs) => {
+  return Object.keys(attrs)
+    .map((key) => {
+      if (key === "width" || key === "height" || key === "stroke") {
+        return key + "={" + attrs[key] + "}";
+      }
+      if (key === "rest") {
+        return "{...rest}";
+      }
+      return key + '="' + attrs[key] + '"';
+    })
+    .join(" ");
+};
+
+icons.forEach((i) => {
+  const location = path.join(process.cwd(), "src/icons", `${i.name}.js`);
+  const ComponentName = i.name === "github" ? "GitHub" : upperCamelCase(i.name);
+  const defaultAttrs = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "size",
+    height: "size",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "color",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    rest: "...rest",
+  };
+
+  const element = `
+    import React, { forwardRef } from "react";
+    import PropTypes from "prop-types";
+
+    const ${ComponentName} = forwardRef(({ color = "currentColor", size = 24, ...rest }, ref) => {
+      return (
+        <svg ref={ref} ${attrsToString(defaultAttrs)}>
+          ${i.content}
+        </svg>
+      )
+    });
+
+    ${ComponentName}.propTypes = {
+      color: PropTypes.string,
+      size: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+      ]),
+    }
+
+    ${ComponentName}.displayName = "${ComponentName}"
+
+    export default ${ComponentName}
+  `;
+
+  fs.writeFileSync(
+    location,
+    prettier.format(element, { parser: "babel" }),
+    "utf-8"
+  );
+
+  console.log("Successfully built", ComponentName);
+
+  const exportString = `export { default as ${ComponentName} } from "./icons/${i.name}";\n`;
+  fs.appendFileSync(
+    path.join(process.cwd(), "src", "index.js"),
+    exportString,
+    "utf-8"
+  );
+
+  const exportTypeString = `export const ${ComponentName}: Icon;\n`;
+  fs.appendFileSync(
+    path.join(process.cwd(), "src", "index.d.ts"),
+    exportTypeString,
+    "utf-8"
+  );
+});
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "name": "react",
+  "version": "1.0.0",
+  "author": "John Letey",
+  "scripts": {
+    "compile": "rm -rf src/icons && node bin/build.js"
+  },
+  "devDependencies": {
+    "cheerio": "^1.0.0-rc.3",
+    "prettier": "^2.0.5",
+    "uppercamelcase": "^3.0.0"
+  }
+}
--- a/packages/react/src/icons/activity.js
+++ b/packages/react/src/icons/activity.js
@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Activity = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+      </svg>
+    );
+  }
+);
+
+Activity.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Activity.displayName = "Activity";
+
+export default Activity;
--- a/packages/react/src/icons/airplay.js
+++ b/packages/react/src/icons/airplay.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Airplay = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path>
+        <polygon points="12 15 17 21 7 21 12 15"></polygon>
+      </svg>
+    );
+  }
+);
+
+Airplay.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Airplay.displayName = "Airplay";
+
+export default Airplay;
--- a/packages/react/src/icons/alert-circle.js
+++ b/packages/react/src/icons/alert-circle.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const AlertCircle = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="8" x2="12" y2="12"></line>
+        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+      </svg>
+    );
+  }
+);
+
+AlertCircle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+AlertCircle.displayName = "AlertCircle";
+
+export default AlertCircle;
--- a/packages/react/src/icons/alert-octagon.js
+++ b/packages/react/src/icons/alert-octagon.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const AlertOctagon = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
+        <line x1="12" y1="8" x2="12" y2="12"></line>
+        <line x1="12" y1="16" x2="12.01" y2="16"></line>
+      </svg>
+    );
+  }
+);
+
+AlertOctagon.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+AlertOctagon.displayName = "AlertOctagon";
+
+export default AlertOctagon;
--- a/packages/react/src/icons/alert-triangle.js
+++ b/packages/react/src/icons/alert-triangle.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const AlertTriangle = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
+        <line x1="12" y1="9" x2="12" y2="13"></line>
+        <line x1="12" y1="17" x2="12.01" y2="17"></line>
+      </svg>
+    );
+  }
+);
+
+AlertTriangle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+AlertTriangle.displayName = "AlertTriangle";
+
+export default AlertTriangle;
--- a/packages/react/src/icons/align-center.js
+++ b/packages/react/src/icons/align-center.js
@@ -0,0 +1,36 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const AlignCenter = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="18" y1="10" x2="6" y2="10"></line>
+        <line x1="21" y1="6" x2="3" y2="6"></line>
+        <line x1="21" y1="14" x2="3" y2="14"></line>
+        <line x1="18" y1="18" x2="6" y2="18"></line>
+      </svg>
+    );
+  }
+);
+
+AlignCenter.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+AlignCenter.displayName = "AlignCenter";
+
+export default AlignCenter;
--- a/packages/react/src/icons/align-justify.js
+++ b/packages/react/src/icons/align-justify.js
@@ -0,0 +1,36 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const AlignJustify = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="21" y1="10" x2="3" y2="10"></line>
+        <line x1="21" y1="6" x2="3" y2="6"></line>
+        <line x1="21" y1="14" x2="3" y2="14"></line>
+        <line x1="21" y1="18" x2="3" y2="18"></line>
+      </svg>
+    );
+  }
+);
+
+AlignJustify.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+AlignJustify.displayName = "AlignJustify";
+
+export default AlignJustify;
--- a/packages/react/src/icons/align-left.js
+++ b/packages/react/src/icons/align-left.js
@@ -0,0 +1,36 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const AlignLeft = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="17" y1="10" x2="3" y2="10"></line>
+        <line x1="21" y1="6" x2="3" y2="6"></line>
+        <line x1="21" y1="14" x2="3" y2="14"></line>
+        <line x1="17" y1="18" x2="3" y2="18"></line>
+      </svg>
+    );
+  }
+);
+
+AlignLeft.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+AlignLeft.displayName = "AlignLeft";
+
+export default AlignLeft;
--- a/packages/react/src/icons/align-right.js
+++ b/packages/react/src/icons/align-right.js
@@ -0,0 +1,36 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const AlignRight = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="21" y1="10" x2="7" y2="10"></line>
+        <line x1="21" y1="6" x2="3" y2="6"></line>
+        <line x1="21" y1="14" x2="3" y2="14"></line>
+        <line x1="21" y1="18" x2="7" y2="18"></line>
+      </svg>
+    );
+  }
+);
+
+AlignRight.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+AlignRight.displayName = "AlignRight";
+
+export default AlignRight;
--- a/packages/react/src/icons/anchor.js
+++ b/packages/react/src/icons/anchor.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Anchor = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="12" cy="5" r="3"></circle>
+        <line x1="12" y1="22" x2="12" y2="8"></line>
+        <path d="M5 12H2a10 10 0 0 0 20 0h-3"></path>
+      </svg>
+    );
+  }
+);
+
+Anchor.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Anchor.displayName = "Anchor";
+
+export default Anchor;
--- a/packages/react/src/icons/aperture.js
+++ b/packages/react/src/icons/aperture.js
@@ -0,0 +1,39 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Aperture = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="14.31" y1="8" x2="20.05" y2="17.94"></line>
+        <line x1="9.69" y1="8" x2="21.17" y2="8"></line>
+        <line x1="7.38" y1="12" x2="13.12" y2="2.06"></line>
+        <line x1="9.69" y1="16" x2="3.95" y2="6.06"></line>
+        <line x1="14.31" y1="16" x2="2.83" y2="16"></line>
+        <line x1="16.62" y1="12" x2="10.88" y2="21.94"></line>
+      </svg>
+    );
+  }
+);
+
+Aperture.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Aperture.displayName = "Aperture";
+
+export default Aperture;
--- a/packages/react/src/icons/archive.js
+++ b/packages/react/src/icons/archive.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Archive = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="21 8 21 21 3 21 3 8"></polyline>
+        <rect x="1" y="3" width="22" height="5"></rect>
+        <line x1="10" y1="12" x2="14" y2="12"></line>
+      </svg>
+    );
+  }
+);
+
+Archive.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Archive.displayName = "Archive";
+
+export default Archive;
--- a/packages/react/src/icons/arrow-down-circle.js
+++ b/packages/react/src/icons/arrow-down-circle.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowDownCircle = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <polyline points="8 12 12 16 16 12"></polyline>
+        <line x1="12" y1="8" x2="12" y2="16"></line>
+      </svg>
+    );
+  }
+);
+
+ArrowDownCircle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowDownCircle.displayName = "ArrowDownCircle";
+
+export default ArrowDownCircle;
--- a/packages/react/src/icons/arrow-down-left.js
+++ b/packages/react/src/icons/arrow-down-left.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowDownLeft = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="17" y1="7" x2="7" y2="17"></line>
+        <polyline points="17 17 7 17 7 7"></polyline>
+      </svg>
+    );
+  }
+);
+
+ArrowDownLeft.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowDownLeft.displayName = "ArrowDownLeft";
+
+export default ArrowDownLeft;
--- a/packages/react/src/icons/arrow-down-right.js
+++ b/packages/react/src/icons/arrow-down-right.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowDownRight = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="7" y1="7" x2="17" y2="17"></line>
+        <polyline points="17 7 17 17 7 17"></polyline>
+      </svg>
+    );
+  }
+);
+
+ArrowDownRight.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowDownRight.displayName = "ArrowDownRight";
+
+export default ArrowDownRight;
--- a/packages/react/src/icons/arrow-down.js
+++ b/packages/react/src/icons/arrow-down.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowDown = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="12" y1="5" x2="12" y2="19"></line>
+        <polyline points="19 12 12 19 5 12"></polyline>
+      </svg>
+    );
+  }
+);
+
+ArrowDown.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowDown.displayName = "ArrowDown";
+
+export default ArrowDown;
--- a/packages/react/src/icons/arrow-left-circle.js
+++ b/packages/react/src/icons/arrow-left-circle.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowLeftCircle = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <polyline points="12 8 8 12 12 16"></polyline>
+        <line x1="16" y1="12" x2="8" y2="12"></line>
+      </svg>
+    );
+  }
+);
+
+ArrowLeftCircle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowLeftCircle.displayName = "ArrowLeftCircle";
+
+export default ArrowLeftCircle;
--- a/packages/react/src/icons/arrow-left.js
+++ b/packages/react/src/icons/arrow-left.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowLeft = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="19" y1="12" x2="5" y2="12"></line>
+        <polyline points="12 19 5 12 12 5"></polyline>
+      </svg>
+    );
+  }
+);
+
+ArrowLeft.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowLeft.displayName = "ArrowLeft";
+
+export default ArrowLeft;
--- a/packages/react/src/icons/arrow-right-circle.js
+++ b/packages/react/src/icons/arrow-right-circle.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowRightCircle = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <polyline points="12 16 16 12 12 8"></polyline>
+        <line x1="8" y1="12" x2="16" y2="12"></line>
+      </svg>
+    );
+  }
+);
+
+ArrowRightCircle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowRightCircle.displayName = "ArrowRightCircle";
+
+export default ArrowRightCircle;
--- a/packages/react/src/icons/arrow-right.js
+++ b/packages/react/src/icons/arrow-right.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowRight = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="5" y1="12" x2="19" y2="12"></line>
+        <polyline points="12 5 19 12 12 19"></polyline>
+      </svg>
+    );
+  }
+);
+
+ArrowRight.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowRight.displayName = "ArrowRight";
+
+export default ArrowRight;
--- a/packages/react/src/icons/arrow-up-circle.js
+++ b/packages/react/src/icons/arrow-up-circle.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowUpCircle = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <polyline points="16 12 12 8 8 12"></polyline>
+        <line x1="12" y1="16" x2="12" y2="8"></line>
+      </svg>
+    );
+  }
+);
+
+ArrowUpCircle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowUpCircle.displayName = "ArrowUpCircle";
+
+export default ArrowUpCircle;
--- a/packages/react/src/icons/arrow-up-left.js
+++ b/packages/react/src/icons/arrow-up-left.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowUpLeft = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="17" y1="17" x2="7" y2="7"></line>
+        <polyline points="7 17 7 7 17 7"></polyline>
+      </svg>
+    );
+  }
+);
+
+ArrowUpLeft.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowUpLeft.displayName = "ArrowUpLeft";
+
+export default ArrowUpLeft;
--- a/packages/react/src/icons/arrow-up-right.js
+++ b/packages/react/src/icons/arrow-up-right.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowUpRight = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="7" y1="17" x2="17" y2="7"></line>
+        <polyline points="7 7 17 7 17 17"></polyline>
+      </svg>
+    );
+  }
+);
+
+ArrowUpRight.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowUpRight.displayName = "ArrowUpRight";
+
+export default ArrowUpRight;
--- a/packages/react/src/icons/arrow-up.js
+++ b/packages/react/src/icons/arrow-up.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ArrowUp = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="12" y1="19" x2="12" y2="5"></line>
+        <polyline points="5 12 12 5 19 12"></polyline>
+      </svg>
+    );
+  }
+);
+
+ArrowUp.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ArrowUp.displayName = "ArrowUp";
+
+export default ArrowUp;
--- a/packages/react/src/icons/at-sign.js
+++ b/packages/react/src/icons/at-sign.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const AtSign = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="12" cy="12" r="4"></circle>
+        <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
+      </svg>
+    );
+  }
+);
+
+AtSign.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+AtSign.displayName = "AtSign";
+
+export default AtSign;
--- a/packages/react/src/icons/award.js
+++ b/packages/react/src/icons/award.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Award = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <circle cx="12" cy="8" r="7"></circle>
+        <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline>
+      </svg>
+    );
+  }
+);
+
+Award.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Award.displayName = "Award";
+
+export default Award;
--- a/packages/react/src/icons/bar-chart-2.js
+++ b/packages/react/src/icons/bar-chart-2.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const BarChart2 = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="18" y1="20" x2="18" y2="10"></line>
+        <line x1="12" y1="20" x2="12" y2="4"></line>
+        <line x1="6" y1="20" x2="6" y2="14"></line>
+      </svg>
+    );
+  }
+);
+
+BarChart2.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+BarChart2.displayName = "BarChart2";
+
+export default BarChart2;
--- a/packages/react/src/icons/bar-chart.js
+++ b/packages/react/src/icons/bar-chart.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const BarChart = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="12" y1="20" x2="12" y2="10"></line>
+        <line x1="18" y1="20" x2="18" y2="4"></line>
+        <line x1="6" y1="20" x2="6" y2="16"></line>
+      </svg>
+    );
+  }
+);
+
+BarChart.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+BarChart.displayName = "BarChart";
+
+export default BarChart;
--- a/packages/react/src/icons/battery-charging.js
+++ b/packages/react/src/icons/battery-charging.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const BatteryCharging = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19"></path>
+        <line x1="23" y1="13" x2="23" y2="11"></line>
+        <polyline points="11 6 7 12 13 12 9 18"></polyline>
+      </svg>
+    );
+  }
+);
+
+BatteryCharging.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+BatteryCharging.displayName = "BatteryCharging";
+
+export default BatteryCharging;
--- a/packages/react/src/icons/battery.js
+++ b/packages/react/src/icons/battery.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Battery = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <rect x="1" y="6" width="18" height="12" rx="2" ry="2"></rect>
+        <line x1="23" y1="13" x2="23" y2="11"></line>
+      </svg>
+    );
+  }
+);
+
+Battery.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Battery.displayName = "Battery";
+
+export default Battery;
--- a/packages/react/src/icons/bell-off.js
+++ b/packages/react/src/icons/bell-off.js
@@ -0,0 +1,37 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const BellOff = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+        <path d="M18.63 13A17.89 17.89 0 0 1 18 8"></path>
+        <path d="M6.26 6.26A5.86 5.86 0 0 0 6 8c0 7-3 9-3 9h14"></path>
+        <path d="M18 8a6 6 0 0 0-9.33-5"></path>
+        <line x1="1" y1="1" x2="23" y2="23"></line>
+      </svg>
+    );
+  }
+);
+
+BellOff.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+BellOff.displayName = "BellOff";
+
+export default BellOff;
--- a/packages/react/src/icons/bell.js
+++ b/packages/react/src/icons/bell.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Bell = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
+        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+      </svg>
+    );
+  }
+);
+
+Bell.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Bell.displayName = "Bell";
+
+export default Bell;
--- a/packages/react/src/icons/bluetooth.js
+++ b/packages/react/src/icons/bluetooth.js
@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Bluetooth = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="6.5 6.5 17.5 17.5 12 23 12 1 17.5 6.5 6.5 17.5"></polyline>
+      </svg>
+    );
+  }
+);
+
+Bluetooth.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Bluetooth.displayName = "Bluetooth";
+
+export default Bluetooth;
--- a/packages/react/src/icons/bold.js
+++ b/packages/react/src/icons/bold.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Bold = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+        <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
+      </svg>
+    );
+  }
+);
+
+Bold.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Bold.displayName = "Bold";
+
+export default Bold;
--- a/packages/react/src/icons/book-open.js
+++ b/packages/react/src/icons/book-open.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const BookOpen = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+        <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+      </svg>
+    );
+  }
+);
+
+BookOpen.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+BookOpen.displayName = "BookOpen";
+
+export default BookOpen;
--- a/packages/react/src/icons/book.js
+++ b/packages/react/src/icons/book.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Book = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
+        <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
+      </svg>
+    );
+  }
+);
+
+Book.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Book.displayName = "Book";
+
+export default Book;
--- a/packages/react/src/icons/bookmark.js
+++ b/packages/react/src/icons/bookmark.js
@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Bookmark = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+      </svg>
+    );
+  }
+);
+
+Bookmark.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Bookmark.displayName = "Bookmark";
+
+export default Bookmark;
--- a/packages/react/src/icons/box.js
+++ b/packages/react/src/icons/box.js
@@ -0,0 +1,35 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Box = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+        <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+        <line x1="12" y1="22.08" x2="12" y2="12"></line>
+      </svg>
+    );
+  }
+);
+
+Box.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Box.displayName = "Box";
+
+export default Box;
--- a/packages/react/src/icons/briefcase.js
+++ b/packages/react/src/icons/briefcase.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Briefcase = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
+        <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
+      </svg>
+    );
+  }
+);
+
+Briefcase.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Briefcase.displayName = "Briefcase";
+
+export default Briefcase;
--- a/packages/react/src/icons/calendar.js
+++ b/packages/react/src/icons/calendar.js
@@ -0,0 +1,36 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Calendar = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+        <line x1="16" y1="2" x2="16" y2="6"></line>
+        <line x1="8" y1="2" x2="8" y2="6"></line>
+        <line x1="3" y1="10" x2="21" y2="10"></line>
+      </svg>
+    );
+  }
+);
+
+Calendar.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Calendar.displayName = "Calendar";
+
+export default Calendar;
--- a/packages/react/src/icons/camera-off.js
+++ b/packages/react/src/icons/camera-off.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const CameraOff = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <line x1="1" y1="1" x2="23" y2="23"></line>
+        <path d="M21 21H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3m3-3h6l2 3h4a2 2 0 0 1 2 2v9.34m-7.72-2.06a4 4 0 1 1-5.56-5.56"></path>
+      </svg>
+    );
+  }
+);
+
+CameraOff.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+CameraOff.displayName = "CameraOff";
+
+export default CameraOff;
--- a/packages/react/src/icons/camera.js
+++ b/packages/react/src/icons/camera.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Camera = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
+        <circle cx="12" cy="13" r="4"></circle>
+      </svg>
+    );
+  }
+);
+
+Camera.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Camera.displayName = "Camera";
+
+export default Camera;
--- a/packages/react/src/icons/cast.js
+++ b/packages/react/src/icons/cast.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Cast = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M2 16.1A5 5 0 0 1 5.9 20M2 12.05A9 9 0 0 1 9.95 20M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6"></path>
+        <line x1="2" y1="20" x2="2.01" y2="20"></line>
+      </svg>
+    );
+  }
+);
+
+Cast.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Cast.displayName = "Cast";
+
+export default Cast;
--- a/packages/react/src/icons/check-circle.js
+++ b/packages/react/src/icons/check-circle.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const CheckCircle = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
+        <polyline points="22 4 12 14.01 9 11.01"></polyline>
+      </svg>
+    );
+  }
+);
+
+CheckCircle.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+CheckCircle.displayName = "CheckCircle";
+
+export default CheckCircle;
--- a/packages/react/src/icons/check-square.js
+++ b/packages/react/src/icons/check-square.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const CheckSquare = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="9 11 12 14 22 4"></polyline>
+        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
+      </svg>
+    );
+  }
+);
+
+CheckSquare.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+CheckSquare.displayName = "CheckSquare";
+
+export default CheckSquare;
--- a/packages/react/src/icons/check.js
+++ b/packages/react/src/icons/check.js
@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const Check = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="20 6 9 17 4 12"></polyline>
+      </svg>
+    );
+  }
+);
+
+Check.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+Check.displayName = "Check";
+
+export default Check;
--- a/packages/react/src/icons/chevron-down.js
+++ b/packages/react/src/icons/chevron-down.js
@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ChevronDown = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    );
+  }
+);
+
+ChevronDown.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ChevronDown.displayName = "ChevronDown";
+
+export default ChevronDown;
--- a/packages/react/src/icons/chevron-left.js
+++ b/packages/react/src/icons/chevron-left.js
@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ChevronLeft = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="15 18 9 12 15 6"></polyline>
+      </svg>
+    );
+  }
+);
+
+ChevronLeft.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ChevronLeft.displayName = "ChevronLeft";
+
+export default ChevronLeft;
--- a/packages/react/src/icons/chevron-right.js
+++ b/packages/react/src/icons/chevron-right.js
@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ChevronRight = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </svg>
+    );
+  }
+);
+
+ChevronRight.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ChevronRight.displayName = "ChevronRight";
+
+export default ChevronRight;
--- a/packages/react/src/icons/chevron-up.js
+++ b/packages/react/src/icons/chevron-up.js
@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ChevronUp = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="18 15 12 9 6 15"></polyline>
+      </svg>
+    );
+  }
+);
+
+ChevronUp.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ChevronUp.displayName = "ChevronUp";
+
+export default ChevronUp;
--- a/packages/react/src/icons/chevrons-down.js
+++ b/packages/react/src/icons/chevrons-down.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ChevronsDown = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="7 13 12 18 17 13"></polyline>
+        <polyline points="7 6 12 11 17 6"></polyline>
+      </svg>
+    );
+  }
+);
+
+ChevronsDown.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ChevronsDown.displayName = "ChevronsDown";
+
+export default ChevronsDown;
--- a/packages/react/src/icons/chevrons-left.js
+++ b/packages/react/src/icons/chevrons-left.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ChevronsLeft = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="11 17 6 12 11 7"></polyline>
+        <polyline points="18 17 13 12 18 7"></polyline>
+      </svg>
+    );
+  }
+);
+
+ChevronsLeft.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ChevronsLeft.displayName = "ChevronsLeft";
+
+export default ChevronsLeft;
--- a/packages/react/src/icons/chevrons-right.js
+++ b/packages/react/src/icons/chevrons-right.js
@@ -0,0 +1,34 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const ChevronsRight = forwardRef(
+  ({ color = "currentColor", size = 24, ...rest }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke={color}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        {...rest}
+      >
+        <polyline points="13 17 18 12 13 7"></polyline>
+        <polyline points="6 17 11 12 6 7"></polyline>
+      </svg>
+    );
+  }
+);
+
+ChevronsRight.propTypes = {
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+ChevronsRight.displayName = "ChevronsRight";
+
+export default ChevronsRight;
--- a/Show More
+++ b/Show More