Skip to content

Commit

Permalink
Updates to the styled-system and icons (#128)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexasselin008 authored Jan 16, 2024
1 parent 8f1039a commit f5729c5
Show file tree
Hide file tree
Showing 750 changed files with 1,517 additions and 1,394 deletions.
5 changes: 5 additions & 0 deletions .changeset/purple-doors-protect.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hopper-ui/styled-system": patch
---

Modified the isStyledSystemProps to returns true when the UNSAFE\_ props are passed
7 changes: 7 additions & 0 deletions .changeset/stupid-hairs-tap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@hopper-ui/icons-react16": patch
"@hopper-ui/icons": patch
"@hopper-ui/svg-icons": patch
---

remove fill currentColor values on every path. The value of fill is now driven by the svg, instead of by paths
4 changes: 2 additions & 2 deletions packages/icons-react16/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,13 @@ pnpm add @hopper-ui/icons-react16
**With yarn**

```shell
yarn add -D @hopper-ui/icons-react16
yarn add @hopper-ui/icons-react16
```

**With npm**

```shell
npm install -D @hopper-ui/icons-react16
npm install @hopper-ui/icons-react16
```

### Import Styles
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
import { createIcon } from "../create-icon.tsx";
import React, { forwardRef, type Ref, type SVGProps } from "react";

const AddCalendarIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} fill="none" viewBox="0 0 16 16" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M5.75 1a.75.75 0 0 1 .75.75V2h3v-.25a.75.75 0 1 1 1.5 0V2h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2v-.25A.75.75 0 0 1 5.75 1m3.793 2.5a.75.75 0 0 0 1.415 0H12.5v9h-9v-9h1.543a.75.75 0 0 0 1.414 0zM8 5.25a.75.75 0 0 1 .75.75v1.25H10a.75.75 0 0 1 0 1.5H8.75V10a.75.75 0 0 1-1.5 0V8.75H6a.75.75 0 0 1 0-1.5h1.25V6A.75.75 0 0 1 8 5.25" /></svg>);
const AddCalendarIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M7.753 2.5a.75.75 0 0 1 .75.75V4H15.5v-.75a.75.75 0 0 1 1.5 0V4h1.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-13A1.5 1.5 0 0 1 5.5 4h1.503v-.75a.75.75 0 0 1 .75-.75m7.747 3v.75a.75.75 0 0 0 1.5 0V5.5h1.5v13h-13v-13h1.503v.75a.75.75 0 0 0 1.5 0V5.5zM12 8a.75.75 0 0 1 .75.75v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5A.75.75 0 0 1 12 8" /></svg>);
const AddCalendarIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} fill="none" viewBox="0 0 32 32" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M11 4a1 1 0 0 1 1 1v1h8V5a1 1 0 1 1 2 0v1h2a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2V5a1 1 0 0 1 1-1m9 4v1a1 1 0 1 0 2 0V8h2v16H8V8h2v1a1 1 0 1 0 2 0V8zm-4.033 3a1 1 0 0 1 1 1v2.967H20a1 1 0 0 1 0 2h-3.033V20a1 1 0 1 1-2 0v-3.033H12a1 1 0 1 1 0-2h2.967V12a1 1 0 0 1 1-1" /></svg>);
const AddCalendarIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} viewBox="0 0 16 16" ref={ref} {...props}><path fillRule="evenodd" d="M5.75 1a.75.75 0 0 1 .75.75V2h3v-.25a.75.75 0 1 1 1.5 0V2h2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h2v-.25A.75.75 0 0 1 5.75 1m3.793 2.5a.75.75 0 0 0 1.415 0H12.5v9h-9v-9h1.543a.75.75 0 0 0 1.414 0zM8 5.25a.75.75 0 0 1 .75.75v1.25H10a.75.75 0 0 1 0 1.5H8.75V10a.75.75 0 0 1-1.5 0V8.75H6a.75.75 0 0 1 0-1.5h1.25V6A.75.75 0 0 1 8 5.25" /></svg>);
const AddCalendarIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fillRule="evenodd" d="M7.753 2.5a.75.75 0 0 1 .75.75V4H15.5v-.75a.75.75 0 0 1 1.5 0V4h1.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-13A1.5 1.5 0 0 1 5.5 4h1.503v-.75a.75.75 0 0 1 .75-.75m7.747 3v.75a.75.75 0 0 0 1.5 0V5.5h1.5v13h-13v-13h1.503v.75a.75.75 0 0 0 1.5 0V5.5zM12 8a.75.75 0 0 1 .75.75v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5A.75.75 0 0 1 12 8" /></svg>);
const AddCalendarIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fillRule="evenodd" d="M11 4a1 1 0 0 1 1 1v1h8V5a1 1 0 1 1 2 0v1h2a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2V5a1 1 0 0 1 1-1m9 4v1a1 1 0 1 0 2 0V8h2v16H8V8h2v1a1 1 0 1 0 2 0V8zm-4.033 3a1 1 0 0 1 1 1v2.967H20a1 1 0 0 1 0 2h-3.033V20a1 1 0 1 1-2 0v-3.033H12a1 1 0 1 1 0-2h2.967V12a1 1 0 0 1 1-1" /></svg>);

export const AddCalendarIcon = createIcon(AddCalendarIcon16, AddCalendarIcon24, AddCalendarIcon32, "AddCalendarIcon");
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
import { createIcon } from "../create-icon.tsx";
import React, { forwardRef, type Ref, type SVGProps } from "react";

const AddIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} fill="none" viewBox="0 0 16 16" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M4.333 8a.75.75 0 0 1 .75-.75H7.25V5.083a.75.75 0 1 1 1.5 0V7.25h2.167a.75.75 0 1 1 0 1.5H8.75v2.167a.75.75 0 0 1-1.5 0V8.75H5.083a.75.75 0 0 1-.75-.75" /></svg>);
const AddIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M12 19.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15m0 1.5a9 9 0 1 0 0-18 9 9 0 0 0 0 18m-5-9a.75.75 0 0 1 .75-.75h3.5v-3.5a.75.75 0 0 1 1.5 0v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5A.75.75 0 0 1 7 12" /></svg>);
const AddIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} fill="none" viewBox="0 0 32 32" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M16 26c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10m0 2c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12M9 16a1 1 0 0 1 1-1h5v-5a1 1 0 1 1 2 0v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5h-5a1 1 0 0 1-1-1" /></svg>);
const AddIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} viewBox="0 0 16 16" ref={ref} {...props}><path fillRule="evenodd" d="M8 13.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14M4.333 8a.75.75 0 0 1 .75-.75H7.25V5.083a.75.75 0 1 1 1.5 0V7.25h2.167a.75.75 0 1 1 0 1.5H8.75v2.167a.75.75 0 0 1-1.5 0V8.75H5.083a.75.75 0 0 1-.75-.75" /></svg>);
const AddIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fillRule="evenodd" d="M12 19.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15m0 1.5a9 9 0 1 0 0-18 9 9 0 0 0 0 18m-5-9a.75.75 0 0 1 .75-.75h3.5v-3.5a.75.75 0 0 1 1.5 0v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5A.75.75 0 0 1 7 12" /></svg>);
const AddIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fillRule="evenodd" d="M16 26c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10m0 2c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12M9 16a1 1 0 0 1 1-1h5v-5a1 1 0 1 1 2 0v5h5a1 1 0 1 1 0 2h-5v5a1 1 0 1 1-2 0v-5h-5a1 1 0 0 1-1-1" /></svg>);

export const AddIcon = createIcon(AddIcon16, AddIcon24, AddIcon32, "AddIcon");
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
import { createIcon } from "../create-icon.tsx";
import React, { forwardRef, type Ref, type SVGProps } from "react";

const AddUserIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} fill="none" viewBox="0 0 16 16" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M7.984 2.502a5.482 5.482 0 0 0-3.778 9.454c.429-.907 1.098-1.67 1.926-2.16a3.016 3.016 0 1 1 3.877-.13c.2.101.396.217.586.347a.75.75 0 1 1-.844 1.24c-.562-.383-1.116-.548-1.476-.548-1.202 0-2.315.834-2.822 2.143a5.458 5.458 0 0 0 2.531.618.75.75 0 0 1 0 1.5 6.982 6.982 0 1 1 6.982-6.982.75.75 0 0 1-1.5 0 5.482 5.482 0 0 0-5.482-5.482m4.717 7.553a.75.75 0 0 1 .75.75v1.125h1.125a.75.75 0 1 1 0 1.5h-1.125v1.125a.75.75 0 0 1-1.5 0V13.43h-1.125a.75.75 0 0 1 0-1.5h1.125v-1.125a.75.75 0 0 1 .75-.75M7.993 5.906a1.516 1.516 0 1 0 0 3.033 1.516 1.516 0 0 0 0-3.033" /></svg>);
const AddUserIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M12.01 4.51a7.507 7.507 0 0 0-5.35 12.772c.606-1.364 1.612-2.489 2.864-3.151a3.813 3.813 0 1 1 4.858-.04c.266.135.53.29.785.464a.75.75 0 0 1-.844 1.24c-.815-.555-1.64-.81-2.212-.81-1.855 0-3.526 1.311-4.238 3.297a7.473 7.473 0 0 0 4.138 1.242.75.75 0 0 1 0 1.5 9.007 9.007 0 1 1 9.007-9.007.75.75 0 1 1-1.5 0A7.507 7.507 0 0 0 12.01 4.51m-.081 4.349a2.313 2.313 0 1 0 0 4.626 2.313 2.313 0 0 0 0-4.626" /><path fill="currentColor" d="M18.248 14.5a.75.75 0 0 1 .75.75v2.25h2.25a.75.75 0 1 1 0 1.5h-2.25v2.25a.75.75 0 1 1-1.5 0V19h-2.25a.75.75 0 0 1 0-1.5h2.25v-2.25a.75.75 0 0 1 .75-.75" /></svg>);
const AddUserIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} fill="none" viewBox="0 0 32 32" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M16.01 6C10.47 6 5.98 10.49 5.98 16.029c0 2.74 1.1 5.225 2.883 7.035.81-1.823 2.155-3.327 3.828-4.212a5.091 5.091 0 1 1 6.483-.053c.356.18.709.389 1.05.621a1 1 0 0 1-1.125 1.654c-1.089-.742-2.191-1.083-2.956-1.083-2.478 0-4.712 1.753-5.663 4.406a9.982 9.982 0 0 0 5.53 1.66 1 1 0 1 1 0 2c-6.644 0-12.03-5.385-12.03-12.028C3.98 9.385 9.367 4 16.01 4s12.028 5.385 12.028 12.029a1 1 0 1 1-2 0C26.038 10.49 21.548 6 16.01 6m-.11 5.81a3.091 3.091 0 1 0 0 6.181 3.091 3.091 0 0 0 0-6.182" /><path fill="currentColor" d="M24 19a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3h-3a1 1 0 1 1 0-2h3v-3a1 1 0 0 1 1-1" /></svg>);
const AddUserIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} viewBox="0 0 16 16" ref={ref} {...props}><path fillRule="evenodd" d="M7.984 2.502a5.482 5.482 0 0 0-3.778 9.454c.429-.907 1.098-1.67 1.926-2.16a3.016 3.016 0 1 1 3.877-.13c.2.101.396.217.586.347a.75.75 0 1 1-.844 1.24c-.562-.383-1.116-.548-1.476-.548-1.202 0-2.315.834-2.822 2.143a5.458 5.458 0 0 0 2.531.618.75.75 0 0 1 0 1.5 6.982 6.982 0 1 1 6.982-6.982.75.75 0 0 1-1.5 0 5.482 5.482 0 0 0-5.482-5.482m4.717 7.553a.75.75 0 0 1 .75.75v1.125h1.125a.75.75 0 1 1 0 1.5h-1.125v1.125a.75.75 0 0 1-1.5 0V13.43h-1.125a.75.75 0 0 1 0-1.5h1.125v-1.125a.75.75 0 0 1 .75-.75M7.993 5.906a1.516 1.516 0 1 0 0 3.033 1.516 1.516 0 0 0 0-3.033" /></svg>);
const AddUserIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fillRule="evenodd" d="M12.01 4.51a7.507 7.507 0 0 0-5.35 12.772c.606-1.364 1.612-2.489 2.864-3.151a3.813 3.813 0 1 1 4.858-.04c.266.135.53.29.785.464a.75.75 0 0 1-.844 1.24c-.815-.555-1.64-.81-2.212-.81-1.855 0-3.526 1.311-4.238 3.297a7.473 7.473 0 0 0 4.138 1.242.75.75 0 0 1 0 1.5 9.007 9.007 0 1 1 9.007-9.007.75.75 0 1 1-1.5 0A7.507 7.507 0 0 0 12.01 4.51m-.081 4.349a2.313 2.313 0 1 0 0 4.626 2.313 2.313 0 0 0 0-4.626" /><path d="M18.248 14.5a.75.75 0 0 1 .75.75v2.25h2.25a.75.75 0 1 1 0 1.5h-2.25v2.25a.75.75 0 1 1-1.5 0V19h-2.25a.75.75 0 0 1 0-1.5h2.25v-2.25a.75.75 0 0 1 .75-.75" /></svg>);
const AddUserIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fillRule="evenodd" d="M16.01 6C10.47 6 5.98 10.49 5.98 16.029c0 2.74 1.1 5.225 2.883 7.035.81-1.823 2.155-3.327 3.828-4.212a5.091 5.091 0 1 1 6.483-.053c.356.18.709.389 1.05.621a1 1 0 0 1-1.125 1.654c-1.089-.742-2.191-1.083-2.956-1.083-2.478 0-4.712 1.753-5.663 4.406a9.982 9.982 0 0 0 5.53 1.66 1 1 0 1 1 0 2c-6.644 0-12.03-5.385-12.03-12.028C3.98 9.385 9.367 4 16.01 4s12.028 5.385 12.028 12.029a1 1 0 1 1-2 0C26.038 10.49 21.548 6 16.01 6m-.11 5.81a3.091 3.091 0 1 0 0 6.181 3.091 3.091 0 0 0 0-6.182" /><path d="M24 19a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3h-3a1 1 0 1 1 0-2h3v-3a1 1 0 0 1 1-1" /></svg>);

export const AddUserIcon = createIcon(AddUserIcon16, AddUserIcon24, AddUserIcon32, "AddUserIcon");
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
import { createIcon } from "../create-icon.tsx";
import React, { forwardRef, type Ref, type SVGProps } from "react";

const AngleDownIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} fill="none" viewBox="0 0 16 16" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M14.03 5.575a.75.75 0 0 0-1.06 0L8 10.544l-4.97-4.97a.75.75 0 1 0-1.06 1.061l5.323 5.323a1 1 0 0 0 1.414 0l5.323-5.323a.75.75 0 0 0 0-1.06" /></svg>);
const AngleDownIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M20.785 8.57a.75.75 0 0 0-1.06 0L12 16.296 4.276 8.571a.75.75 0 0 0-1.061 1.06l8.078 8.078a1 1 0 0 0 1.414 0l8.078-8.078a.75.75 0 0 0 0-1.06" /></svg>);
const AngleDownIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} fill="none" viewBox="0 0 32 32" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M27.707 11.397a1 1 0 0 0-1.414 0L16 21.69 5.707 11.397a1 1 0 0 0-1.414 1.414l10.823 10.823a1.25 1.25 0 0 0 1.768 0l10.823-10.823a1 1 0 0 0 0-1.414" /></svg>);
const AngleDownIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} viewBox="0 0 16 16" ref={ref} {...props}><path fillRule="evenodd" d="M14.03 5.575a.75.75 0 0 0-1.06 0L8 10.544l-4.97-4.97a.75.75 0 1 0-1.06 1.061l5.323 5.323a1 1 0 0 0 1.414 0l5.323-5.323a.75.75 0 0 0 0-1.06" /></svg>);
const AngleDownIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fillRule="evenodd" d="M20.785 8.57a.75.75 0 0 0-1.06 0L12 16.296 4.276 8.571a.75.75 0 0 0-1.061 1.06l8.078 8.078a1 1 0 0 0 1.414 0l8.078-8.078a.75.75 0 0 0 0-1.06" /></svg>);
const AngleDownIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fillRule="evenodd" d="M27.707 11.397a1 1 0 0 0-1.414 0L16 21.69 5.707 11.397a1 1 0 0 0-1.414 1.414l10.823 10.823a1.25 1.25 0 0 0 1.768 0l10.823-10.823a1 1 0 0 0 0-1.414" /></svg>);

export const AngleDownIcon = createIcon(AngleDownIcon16, AngleDownIcon24, AngleDownIcon32, "AngleDownIcon");
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
import { createIcon } from "../create-icon.tsx";
import React, { forwardRef, type Ref, type SVGProps } from "react";

const AngleLeftIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} fill="none" viewBox="0 0 16 16" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M10.53 13.775a.75.75 0 0 0 0-1.06l-4.97-4.97 4.97-4.969a.75.75 0 1 0-1.061-1.06L4.146 7.038a1 1 0 0 0 0 1.414l5.323 5.323a.75.75 0 0 0 1.06 0" /></svg>);
const AngleLeftIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M15.425 20.785a.75.75 0 0 0 0-1.06L7.701 12l7.724-7.725a.75.75 0 1 0-1.06-1.06l-8.079 8.078a1 1 0 0 0 0 1.414l8.078 8.078a.75.75 0 0 0 1.061 0" /></svg>);
const AngleLeftIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} fill="none" viewBox="0 0 32 32" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M20.597 27.707a1 1 0 0 0 0-1.414L10.304 16 20.597 5.707a1 1 0 0 0-1.414-1.414L8.36 15.116a1.25 1.25 0 0 0 0 1.768l10.823 10.823a1 1 0 0 0 1.414 0" /></svg>);
const AngleLeftIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} viewBox="0 0 16 16" ref={ref} {...props}><path fillRule="evenodd" d="M10.53 13.775a.75.75 0 0 0 0-1.06l-4.97-4.97 4.97-4.969a.75.75 0 1 0-1.061-1.06L4.146 7.038a1 1 0 0 0 0 1.414l5.323 5.323a.75.75 0 0 0 1.06 0" /></svg>);
const AngleLeftIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fillRule="evenodd" d="M15.425 20.785a.75.75 0 0 0 0-1.06L7.701 12l7.724-7.725a.75.75 0 1 0-1.06-1.06l-8.079 8.078a1 1 0 0 0 0 1.414l8.078 8.078a.75.75 0 0 0 1.061 0" /></svg>);
const AngleLeftIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fillRule="evenodd" d="M20.597 27.707a1 1 0 0 0 0-1.414L10.304 16 20.597 5.707a1 1 0 0 0-1.414-1.414L8.36 15.116a1.25 1.25 0 0 0 0 1.768l10.823 10.823a1 1 0 0 0 1.414 0" /></svg>);

export const AngleLeftIcon = createIcon(AngleLeftIcon16, AngleLeftIcon24, AngleLeftIcon32, "AngleLeftIcon");
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
import { createIcon } from "../create-icon.tsx";
import React, { forwardRef, type Ref, type SVGProps } from "react";

const AngleRightIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} fill="none" viewBox="0 0 16 16" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M5.47 1.716a.75.75 0 0 0 0 1.06l4.969 4.97-4.97 4.968a.75.75 0 0 0 1.061 1.061l5.323-5.323a1 1 0 0 0 0-1.414L6.53 1.716a.75.75 0 0 0-1.06 0" /></svg>);
const AngleRightIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} fill="none" viewBox="0 0 24 24" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M8.573 3.215a.75.75 0 0 0 0 1.06L16.297 12l-7.724 7.724a.75.75 0 0 0 1.06 1.061l8.078-8.078a1 1 0 0 0 0-1.414L9.633 3.215a.75.75 0 0 0-1.06 0" /></svg>);
const AngleRightIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} fill="none" viewBox="0 0 32 32" ref={ref} {...props}><path fill="currentColor" fillRule="evenodd" d="M11.398 4.293a1 1 0 0 0 0 1.414L21.691 16 11.398 26.293a1 1 0 0 0 1.414 1.414l10.824-10.823a1.25 1.25 0 0 0 0-1.768L12.812 4.293a1 1 0 0 0-1.414 0" /></svg>);
const AngleRightIcon16 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={16} height={16} viewBox="0 0 16 16" ref={ref} {...props}><path fillRule="evenodd" d="M5.47 1.716a.75.75 0 0 0 0 1.06l4.969 4.97-4.97 4.968a.75.75 0 0 0 1.061 1.061l5.323-5.323a1 1 0 0 0 0-1.414L6.53 1.716a.75.75 0 0 0-1.06 0" /></svg>);
const AngleRightIcon24 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={24} height={24} viewBox="0 0 24 24" ref={ref} {...props}><path fillRule="evenodd" d="M8.573 3.215a.75.75 0 0 0 0 1.06L16.297 12l-7.724 7.724a.75.75 0 0 0 1.06 1.061l8.078-8.078a1 1 0 0 0 0-1.414L9.633 3.215a.75.75 0 0 0-1.06 0" /></svg>);
const AngleRightIcon32 = forwardRef((props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg width={32} height={32} viewBox="0 0 32 32" ref={ref} {...props}><path fillRule="evenodd" d="M11.398 4.293a1 1 0 0 0 0 1.414L21.691 16 11.398 26.293a1 1 0 0 0 1.414 1.414l10.824-10.823a1.25 1.25 0 0 0 0-1.768L12.812 4.293a1 1 0 0 0-1.414 0" /></svg>);

export const AngleRightIcon = createIcon(AngleRightIcon16, AngleRightIcon24, AngleRightIcon32, "AngleRightIcon");
Loading

0 comments on commit f5729c5

Please sign in to comment.