stash icons initial structure

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+**/dist

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "react-app",
+  "rules": {
+    "react/forbid-foreign-prop-types": 0
+  }
+}

.gitignore

@@ -0,0 +1,27 @@
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# production
+/build
+public/*
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# build
+dist/
+
+# work in progress
+packages/website
+packages/generate-from-figma

.prettierignore

@@ -0,0 +1,11 @@
+build
+node_modules
+package-lock.json
+package.json
+storybook-static
+public
+.cache
+dist
+.next
+out
+.mdx-data

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "semi": true,
+  "tabWidth": 2,
+  "overrides": [
+    {
+      "files": "*.mdx",
+      "options": {
+        "printWidth": 80
+      }
+    }
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Pingback LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

lerna.json

@@ -0,0 +1,7 @@
+{
+  "useNx": true,
+  "useWorkspaces": true,
+  "packages": ["packages/*"],
+  "version": "independent",
+  "npmClient": "yarn"
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "root",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^1.13.0",
+    "@typescript-eslint/parser": "^1.13.0",
+    "babel-eslint": "10.0.2",
+    "eslint": "5.16.0",
+    "eslint-config-react-app": "^4.0.1",
+    "eslint-plugin-flowtype": "3.11.1",
+    "eslint-plugin-import": "2.18.0",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.14.2",
+    "eslint-plugin-react-hooks": "1.6.1",
+    "husky": "^2.7.0",
+    "lerna": "6.0.1",
+    "lint-staged": "^9.0.0",
+    "prettier": "^2.0.5",
+    "rimraf": "^2.6.3",
+    "yarnhook": "^0.4.1"
+  }
+}

packages/duotone/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "@stash-ui/duotone-icons",
+    "private": false,
+    "version": "1.0.0",
+    "license": "MIT",
+    "description": "React Duotone Icons Set",
+    "authors": [
+      "Tiago Gerken <[email protected]>",
+      "Pedro Ladeira <[email protected]>"
+    ],
+    "module": "dist/duotone-icons.esm.js",
+    "main": "index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+      "index.js",
+      "manifest.json"
+    ],
+    "publishConfig": {
+      "access": "public"
+    },
+    "scripts": {
+      "generate-src": "generate-icons --file=X5DiJzGRQXCyEfBqocT235 --style=duotone",
+      "build": "rimraf dist && tsdx build --format es,cjs --entry src/index.tsx",
+      "watch": "rimraf dist && tsdx watch --format es,cjs --entry src/index.tsx",
+      "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+      "react": "^16.x || ^17.x || ^18.x"
+    },
+    "devDependencies": {
+      "tsdx": "0.14.0",
+      "@stash-ui/generate-from-figma": "*"
+    }
+  }

packages/duotone/readme.md

@@ -0,0 +1,54 @@
+<div align="center"><strong>@stash-ui/duotone-icons</strong></div>
+<div align="center">Solid icons variation.</div>
+<br />
+<div align="center">
+<a href="https://icons.stash-ui.com">Website</a> 
+<span> · </span>
+<a href="https://github.com/stash-ui/icons">GitHub</a> 
+<span> · </span>
+<a href="https://www.figma.com/file/X5DiJzGRQXCyEfBqocT235/%5BPb%5D-Icons-1.0-%E2%9C%85?node-id=0%3A1">Figma</a>
+<span> · </span>
+<a href="https://stash-ui.com/discord">Discord</a>
+</div>
+
+## Install
+
+Install the set of duotone icons from your command line.
+
+#### With yarn
+
+```sh
+yarn add @stash-ui/duotone-icons
+```
+
+#### With npm
+
+```sh
+npm install @stash-ui/duotone-icons
+```
+
+## Getting started
+
+Add the SVG icon to your application. Include color where needed.
+
+```jsx
+import { AngleDownIcon, AngleUpIcon } from '@stash-ui/duotone-icons';
+
+const App = () => {
+  return (
+    <AngleDownIcon />
+    <AngleUpIcon color="#000"  />
+  );
+};
+```
+
+## Authors
+
+- Tiago Gerken ([@tgerken](https://twitter.com/tgerken)) - [Pingback](https://pingback.com)
+- Pedro Ladeira ([@pedrooladeira](https://twitter.com/pedrooladeira)) - [Pingback](https://pingback.com)
+
+## License
+
+Licensed under the MIT License, Copyright © 2022-present Pingback LLC.
+
+See [LICENSE](./LICENSE) for more information.

packages/duotone/src/AngleDownIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const AngleDownIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M8.96362 10.1636C9.31509 9.81213 9.88494 9.81213 10.2364 10.1636L12 11.9272L13.7636 10.1636C14.1151 9.81213 14.6849 9.81213 15.0364 10.1636C15.3879 10.5151 15.3879 11.0849 15.0364 11.4364L12.6364 13.8364C12.2849 14.1879 11.7151 14.1879 11.3636 13.8364L8.96362 11.4364C8.61214 11.0849 8.61214 10.5151 8.96362 10.1636Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+export default AngleDownIcon;

packages/duotone/src/AngleLeftIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const AngleLeftIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M13.8364 8.9636C14.1879 9.31508 14.1879 9.88492 13.8364 10.2364L12.0728 12L13.8364 13.7636C14.1879 14.1151 14.1879 14.6849 13.8364 15.0364C13.4849 15.3879 12.9151 15.3879 12.5636 15.0364L10.1636 12.6364C9.81216 12.2849 9.81216 11.7151 10.1636 11.3636L12.5636 8.9636C12.9151 8.61213 13.4849 8.61213 13.8364 8.9636Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+export default AngleLeftIcon;

packages/duotone/src/AngleRightIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const AngleRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M10.1636 8.9636C10.5151 8.61213 11.0849 8.61213 11.4364 8.9636L13.8364 11.3636C14.1879 11.7151 14.1879 12.2849 13.8364 12.6364L11.4364 15.0364C11.0849 15.3879 10.5151 15.3879 10.1636 15.0364C9.81216 14.6849 9.81216 14.1151 10.1636 13.7636L11.9272 12L10.1636 10.2364C9.81216 9.88492 9.81216 9.31508 10.1636 8.9636Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+export default AngleRightIcon;

packages/duotone/src/AngleUpIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const AngleUpIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M11.3636 10.1636C11.7151 9.81213 12.2849 9.81213 12.6364 10.1636L15.0364 12.5636C15.3879 12.9151 15.3879 13.4849 15.0364 13.8364C14.6849 14.1879 14.1151 14.1879 13.7636 13.8364L12 12.0728L10.2364 13.8364C9.88494 14.1879 9.31509 14.1879 8.96362 13.8364C8.61214 13.4849 8.61214 12.9151 8.96362 12.5636L11.3636 10.1636Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+export default AngleUpIcon;

packages/duotone/src/ArrowDownIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const ArrowDownIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M12 5.25C12.4142 5.25 12.75 5.58579 12.75 6V16.1893L16.4697 12.4697C16.7626 12.1768 17.2374 12.1768 17.5303 12.4697C17.8232 12.7626 17.8232 13.2374 17.5303 13.5303L12.5303 18.5303C12.2374 18.8232 11.7626 18.8232 11.4697 18.5303L6.46967 13.5303C6.17678 13.2374 6.17678 12.7626 6.46967 12.4697C6.76256 12.1768 7.23744 12.1768 7.53033 12.4697L11.25 16.1893V6C11.25 5.58579 11.5858 5.25 12 5.25Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+export default ArrowDownIcon;

packages/duotone/src/ArrowDownLargeIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const ArrowDownLargeIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M12 1.25C12.4142 1.25 12.75 1.58579 12.75 2L12.75 20.25L18.4828 14.7902C18.7827 14.5046 19.2574 14.5161 19.5431 14.8161C19.8288 15.116 19.8172 15.5908 19.5172 15.8764L12.5172 22.5431C12.2276 22.819 11.7724 22.819 11.4828 22.5431L4.48276 15.8764C4.18281 15.5908 4.17123 15.116 4.4569 14.8161C4.74256 14.5161 5.2173 14.5046 5.51724 14.7902L11.25 20.25L11.25 2C11.25 1.58579 11.5858 1.25 12 1.25Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+export default ArrowDownLargeIcon;

packages/duotone/src/ArrowLeftIcon.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconProps } from './types';
+
+export const ArrowLeftIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M11.5303 6.46967C11.8232 6.76256 11.8232 7.23744 11.5303 7.53033L7.81066 11.25L18 11.25C18.4142 11.25 18.75 11.5858 18.75 12C18.75 12.4142 18.4142 12.75 18 12.75L7.81066 12.75L11.5303 16.4697C11.8232 16.7626 11.8232 17.2374 11.5303 17.5303C11.2374 17.8232 10.7626 17.8232 10.4697 17.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697L10.4697 6.46967C10.7626 6.17678 11.2374 6.17678 11.5303 6.46967Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+export default ArrowLeftIcon;