@generation/icons 1.0.0

package/packages/demo/src/components/Gallery/index.js

@@ -0,0 +1 @@
+export { default as Gallery } from './Gallery';

package/packages/demo/src/components/Gallery/styles.css

@@ -0,0 +1,39 @@
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(90px,1fr));
+  grid-auto-rows: auto;
+  text-align: center;
+  row-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.gallery-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  color: green;
+}
+
+.gallery-item > span {
+  font-size: 9px;
+}
+
+.gallery-item > span::selection {
+  color: red;
+  background: yellow;
+}
+
+.gallery-svg {
+  min-height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ffffff;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
+  border: 2px solid transparent;
+  width: 100%;
+  font-size: 1.6rem;
+}

package/packages/demo/src/index.css

@@ -0,0 +1,11 @@
+:root {
+  color-scheme: light dark;
+  color: #303135;
+  background-color: #ffffff;
+  font-family: 'azo-sans-web', sans-serif;
+  font-size: 16px;
+}
+
+body {
+  margin: 0;
+}

package/packages/demo/src/main.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './index.css';
+
+// eslint-disable-next-line no-undef
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/packages/demo/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    include: ['@generation/icons'],
+  },
+  build: {
+    commonjsOptions: {
+      include: [/@generation/, /node_modules/],
+    },
+  },
+});

package/release.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  branch: 'master',
+  plugins: [
+    '@semantic-release/commit-analyzer',
+    '@semantic-release/release-notes-generator',
+    ['@semantic-release/npm', {
+      npmPublish: true,
+      tarballDir: 'dist',
+    }],
+    ['@semantic-release/git', {
+      assets: ['dist/**/*.{js,css,svg}', 'package.json'],
+      message: 'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
+    }],
+  ],
+};

package/scripts/create.mjs

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Function to list all SVG files in a directory
+const listSvgFiles = (dirPath) => {
+  return new Promise((resolve, reject) => {
+      fs.readdir(dirPath, (err, files) => {
+          if (err) {
+              return reject('Unable to scan directory: ' + err);
+          }
+          resolve(files.filter(file => {
+            return file !== 'index.js';
+          }));
+      });
+          
+  });
+};
+
+const main = async () => {
+  const assetsDir = path.join(__dirname, '..', 'src/Icons');
+  console.log('🚀 ~ main ~ assetsDir:', assetsDir);
+  const outputDir = path.join(__dirname, '..', 'src/Icons');
+  console.log('🚀 ~ main ~ outputDir:', outputDir);
+
+  if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir);
+  }
+
+  try {
+      const iconFiles = await listSvgFiles(assetsDir);
+      iconFiles.sort();
+      let content = '';
+      iconFiles.forEach(icon => {
+        const finalName = path.parse(icon).name; 
+        content += `export { default as ${finalName} } from './${finalName}';\n`;
+      });
+
+      fs.writeFile(`${outputDir}/index.js`, content, 'utf8', (err) => {
+        if (err) {
+          console.error('Error writing to index.js:', err);
+        } else {
+          console.log('index.js has been generated successfully.');
+        }
+      });
+  } catch (error) {
+      console.error(error);
+  }
+};
+
+main();

package/scripts/list.mjs

@@ -0,0 +1,61 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+// Function to list all SVG files in a directory
+const listIconFiles = (dirPath) => {
+    return new Promise((resolve, reject) => {
+        fs.readdir(dirPath, (err, files) => {
+            if (err) {
+                return reject('Unable to scan directory: ' + err);
+            }
+            resolve(files.filter(file => {
+                return file !== 'index.js';
+            }));
+        });
+    });
+};
+
+// Main function to process all SVG files in the 'assets' directory
+const main = async () => {
+    const iconsDir = path.join(__dirname, '..', 'src/Icons');
+    const outputDir = path.join(__dirname, '..', 'dist');
+
+    try {
+        const iconFiles = await listIconFiles(iconsDir);
+        iconFiles.sort();
+        let content = '';
+        let contentGallery = '';
+        iconFiles.forEach(icon => {
+          const finalName = path.parse(icon).name; 
+          content += `${finalName},\n`;
+          // contentGallery += `<div className="gallery-item">\n  <${finalName} />\n  <span>${finalName}</span>\n</div>\n`;
+          contentGallery += `<div className="gallery-item">\n  <div className="gallery-svg">\n    <${finalName} />\n  </div>\n  <span>${finalName}</span>\n</div>\n`;
+
+          
+        });
+  
+        fs.writeFile(`${outputDir}/Icons.txt`, content, 'utf8', (err) => {
+          if (err) {
+            console.error('Error writing to Icons.txt:', err);
+          } else {
+            console.log('Icons.txt has been generated successfully.');
+          }
+        });
+        fs.writeFile(`${outputDir}/IconsGallery.txt`, contentGallery, 'utf8', (err) => {
+            if (err) {
+              console.error('Error writing to IconsGallery.txt:', err);
+            } else {
+              console.log('IconsGallery.txt has been generated successfully.');
+            }
+          });
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+main();

package/scripts/transform.mjs

@@ -0,0 +1,69 @@
+import fs from 'fs';
+import path from 'path';
+import { transform } from '@svgr/core';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const transformString = (input) => {
+    return input
+        .split('-') // Split the string by hyphens
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
+        .join(''); // Join them back together without any spaces
+};
+
+// Function to list all SVG files in a directory
+const listSvgFiles = (dirPath) => {
+    return new Promise((resolve, reject) => {
+        fs.readdir(dirPath, (err, files) => {
+            if (err) {
+                return reject('Unable to scan directory: ' + err);
+            }
+            resolve(files.filter(file => path.extname(file).toLowerCase() === '.svg'));
+        });
+    });
+};
+
+// Function to convert an SVG file to a React component
+const convertSvgToComponent =  async(filePath, outputDir) => {
+    const svgCode = fs.readFileSync(filePath, 'utf8');
+    const componentName = path.basename(filePath, '.svg');
+    const jsxCode = await transform(svgCode, {
+        plugins: [
+            '@svgr/plugin-svgo',
+            '@svgr/plugin-jsx',
+            '@svgr/plugin-prettier'
+        ],
+        icon: true,
+    },
+        { componentName: transformString(componentName) }
+    );
+
+    const outputFilePath = path.join(outputDir, `${transformString(componentName)}.jsx`);
+    fs.writeFileSync(outputFilePath, jsxCode);
+    console.log(`Converted ${filePath} to ${outputFilePath}`);
+};
+
+// Main function to process all SVG files in the 'assets' directory
+const main = async () => {
+    const assetsDir = path.join(__dirname, '..', 'assets');
+    const outputDir = path.join(__dirname, '..', 'src/Icons');
+
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir);
+    }
+
+    try {
+        const svgFiles = await listSvgFiles(assetsDir);
+        svgFiles.sort();
+        svgFiles.forEach(file => {
+            const filePath = path.join(assetsDir, file);
+            convertSvgToComponent(filePath, outputDir);
+        });
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+main();

package/src/Icons/Account.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+const Account = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 20 20"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0M5.07 16.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78A7.9 7.9 0 0 1 10 18c-1.86 0-3.57-.64-4.93-1.72m11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33A7.95 7.95 0 0 1 2 10c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83M10 4C8.06 4 6.5 5.56 6.5 7.5S8.06 11 10 11s3.5-1.56 3.5-3.5S11.94 4 10 4m0 5c-.83 0-1.5-.67-1.5-1.5S9.17 6 10 6s1.5.67 1.5 1.5S10.83 9 10 9"
+    />
+  </svg>
+);
+export default Account;

package/src/Icons/ActiveFill.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const ActiveFill = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 13.5v-7a.5.5 0 0 1 .8-.4l4.67 3.5c.27.2.27.6 0 .8l-4.67 3.5a.5.5 0 0 1-.8-.4" />
+  </svg>
+);
+export default ActiveFill;

package/src/Icons/ActiveFillOut.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const ActiveFillOut = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="m10.8 15.9 4.67-3.5c.27-.2.27-.6 0-.8L10.8 8.1a.5.5 0 0 0-.8.4v7c0 .41.47.65.8.4M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" />
+  </svg>
+);
+export default ActiveFillOut;

package/src/Icons/Add.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const Add = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="M18 13h-5v5c0 .55-.45 1-1 1s-1-.45-1-1v-5H6c-.55 0-1-.45-1-1s.45-1 1-1h5V6c0-.55.45-1 1-1s1 .45 1 1v5h5c.55 0 1 .45 1 1s-.45 1-1 1" />
+  </svg>
+);
+export default Add;

package/src/Icons/AddAlternativeFill.jsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+const AddAlternativeFill = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 25 24"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M2.31 12c0 5.52 4.48 10 10 10s10-4.48 10-10-4.48-10-10-10-10 4.48-10 10m11-5v4h4v2h-4v4h-2v-4h-4v-2h4V7z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default AddAlternativeFill;

package/src/Icons/AddCircle.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const AddCircle = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 25 24"
+    {...props}
+  >
+    <path d="M13.988 7h-2v4h-4v2h4v4h2v-4h4v-2h-4zm-1-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8" />
+  </svg>
+);
+export default AddCircle;

package/src/Icons/AddDocumentFill.jsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+const AddDocumentFill = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 18 20"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M.31 0h11.556l5.777 6.667V20H.31zm10.593 1.667v6.11h5.296zM9.81 14.833h2.5v-1.666h-2.5v-2.5H8.143v2.5h-2.5v1.666h2.5v2.5H9.81z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default AddDocumentFill;

package/src/Icons/AddDocumentFillOut.jsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+const AddDocumentFillOut = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 18 20"
+    {...props}
+  >
+    <path d="M12.31 13.5h-2.5V16H8.143v-2.5h-2.5v-1.667h2.5v-2.5H9.81v2.5h2.5z" />
+    <path d="M11.866 0h-9.63C1.176 0 .32 1 .32 2.222L.31 17.778C.31 19 1.167 20 2.226 20h13.491c1.06 0 1.926-1 1.926-2.222V6.667zm-9.63 17.778V2.222h8.667v5.556h4.814v10z" />
+    <path d="M10.71 0H.31v20h17.333V8h-1.56v10.2H1.87V1.8h8.84z" />
+  </svg>
+);
+export default AddDocumentFillOut;

package/src/Icons/AddEmailFill.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const AddEmailFill = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 19 15"
+    {...props}
+  >
+    <path d="M18.492 0H.31v14.546h18.182zm-1.818 3.636L9.4 8.182 2.128 3.636V1.818l7.273 4.546 7.273-4.546z" />
+  </svg>
+);
+export default AddEmailFill;

package/src/Icons/AddEmailFillOut.jsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+const AddEmailFillOut = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 21 17"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M13.788 11.74v.869h1.74v1.739h.869v-1.74h1.74v-.869h-1.74V10h-.87v1.74zm-2.174.434a4.35 4.35 0 0 0 4.348 4.348 4.35 4.35 0 0 0 4.348-4.348 4.35 4.35 0 0 0-4.348-4.348 4.35 4.35 0 0 0-4.348 4.348m7.826 0a3.483 3.483 0 0 1-3.478 3.478 3.483 3.483 0 0 1-3.478-3.478 3.483 3.483 0 0 1 3.478-3.478 3.483 3.483 0 0 1 3.478 3.478"
+      clipRule="evenodd"
+    />
+    <path
+      fillRule="evenodd"
+      d="M.31 0h17.391v8.188a4.3 4.3 0 0 0-1.739-.362V3.478L9.006 7.826 2.049 3.478v8.696h9.565c0 .618.13 1.207.362 1.739H.31zm1.74 1.74 6.956 4.347 6.956-4.348z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default AddEmailFillOut;

package/src/Icons/AddFile.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const AddFile = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="M13 11h-2v3H8v2h3v3h2v-3h3v-2h-3zm1-9H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z" />
+  </svg>
+);
+export default AddFile;

package/src/Icons/AddFileFill.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const AddFileFill = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="M14.59 2.59c-.38-.38-.89-.59-1.42-.59H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8.83c0-.53-.21-1.04-.59-1.41zM15 16h-2v2c0 .55-.45 1-1 1s-1-.45-1-1v-2H9c-.55 0-1-.45-1-1s.45-1 1-1h2v-2c0-.55.45-1 1-1s1 .45 1 1v2h2c.55 0 1 .45 1 1s-.45 1-1 1m-2-8V3.5L18.5 9H14c-.55 0-1-.45-1-1" />
+  </svg>
+);
+export default AddFileFill;

package/src/Icons/AddFileFillOut.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const AddFileFillOut = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="M13 11h-2v3H8v2h3v3h2v-3h3v-2h-3zm1-9H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z" />
+  </svg>
+);
+export default AddFileFillOut;

package/src/Icons/AlertCircle.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+const AlertCircle = (props) => (
+  <svg
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 42 42"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M20.979 0C9.387 0 0 9.408 0 21s9.387 21 20.979 21C32.592 42 42 32.592 42 21S32.592 0 20.979 0M23.1 23.1V10.5h-4.2v12.6zm0 8.4v-4.2h-4.2v4.2zM4.2 21c0 9.282 7.518 16.8 16.8 16.8S37.8 30.282 37.8 21 30.282 4.2 21 4.2 4.2 11.718 4.2 21"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default AlertCircle;

package/src/Icons/AlertFill.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+const AlertFill = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 14 12"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M13.33 10.54 7.592.558A.97.97 0 0 0 7.25.165 1 1 0 0 0 6.75 0c-.179.01-.351.067-.5.165a.97.97 0 0 0-.341.393L.169 10.54a1 1 0 0 0-.061 1.008 1 1 0 0 0 .387.347c.159.08.337.115.515.103h11.48a.983.983 0 0 0 .902-.45 1 1 0 0 0-.061-1.008zm-5.966-.504H6.136v-1.2h1.228zm0-2.076H6.136V4.361h1.228v3.6z"
+    />
+  </svg>
+);
+export default AlertFill;

package/src/Icons/AlertFillOut.jsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+const AlertFillOut = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#prefix__a)">
+      <path
+        fill="currentColor"
+        d="m12 6.627 6.846 11.828H5.155zM12 3 2 20.273h20zm.91 12.727h-1.82v1.819h1.82zm0-5.454h-1.82v3.636h1.82z"
+      />
+    </g>
+    <defs>
+      <clipPath id="prefix__a">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default AlertFillOut;

package/src/Icons/AlignCenter.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+const AlignCenter = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 18 12"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M8 12h2c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1M0 1c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H1C.45 0 0 .45 0 1m4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1"
+    />
+  </svg>
+);
+export default AlignCenter;

package/src/Icons/Amd.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const Amd = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M8 17c-.55 0-1-.45-1-1v-5c0-.55.45-1 1-1s1 .45 1 1v5c0 .55-.45 1-1 1m4 0c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v8c0 .55-.45 1-1 1m4 0c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1" />
+  </svg>
+);
+export default Amd;

package/src/Icons/AngleLeft.jsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+const AngleLeft = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 10.74 18.77"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M10.37.37a1.25 1.25 0 0 0-1.77 0L.29 8.68a.996.996 0 0 0 0 1.41L8.6 18.4c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L3.13 9.38l7.25-7.25c.48-.48.48-1.28-.01-1.76"
+    />
+  </svg>
+);
+export default AngleLeft;

package/src/Icons/AngleRight.jsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+const AngleRight = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 10.74 18.77"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <path
+      d="M.37 18.4c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L2.14.37C1.65-.12.86-.12.37.37s-.49 1.28 0 1.77l7.24 7.25-7.25 7.25c-.48.48-.48 1.28.01 1.76"
+      style={{
+        fill: "currentColor",
+        fillRule: "evenodd",
+      }}
+    />
+  </svg>
+);
+export default AngleRight;

package/src/Icons/AppMenu.jsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+const AppMenu = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    viewBox="0 0 21 20"
+    {...props}
+  >
+    <path d="M.31 0h4v4h-4zM.31 8h4v4h-4zM.31 16h4v4h-4zM8.31 0h4v4h-4zM8.31 8h4v4h-4zM8.31 16h4v4h-4zM16.31 0h4v4h-4zM16.31 8h4v4h-4zM16.31 16h4v4h-4z" />
+  </svg>
+);
+export default AppMenu;