Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: add appsmith icon package (#32927)

Browse Source 
## Description

- Add `appsmith-icons` package. Icons are automatically imported from
Figma, optimized, and then React components are created based on them.
Please read the
[README](https://github.com/appsmithorg/appsmith/pull/32927/files#diff-163e187687a9784dfda13faf90276b1137ba6e85db21bd550c6a3ba486178e5e)
for more information.
- Replace Icons for Anvil widgets. 

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8847468194>
> Commit: a2036daedef0a08b7c973e04ac11a224fb40c9c1
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8847468194&attempt=2"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->








## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
This commit is contained in:
Valera Melnikov 2024-04-26 15:37:09 +03:00 committed by GitHub
parent dfead818cd
commit 9e214c2c3c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
214 changed files with 829 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/package.json
View File

@ -95,6 +95,7 @@
"@uppy/webcam": "^1.8.4",
"@welldone-software/why-did-you-render": "^4.2.5",
"algoliasearch": "^4.2.0",
"appsmith-icons": "workspace:^",
"assert-never": "^1.2.1",
"astring": "^1.7.5",
"axios": "^1.6.0",

1
app/client/packages/icons/.env.example Normal file
View File

@ -0,0 +1 @@
FIGMA_TOKEN=

4
app/client/packages/icons/.eslintrc.json Normal file
View File

@ -0,0 +1,4 @@
{
"extends": ["../../.eslintrc.base.json"],
"ignorePatterns": ["icons", "components", "stories"]
}

1
app/client/packages/icons/.gitignore vendored Executable file
View File

@ -0,0 +1 @@
.figmagic/*

2
app/client/packages/icons/.prettierignore Normal file
View File

@ -0,0 +1,2 @@
src/icons/*
src/components/*

22
app/client/packages/icons/README.md Normal file
View File

@ -0,0 +1,22 @@
# Appsmith Icons
We automatically import icons from Figma, optimise and prepare some of them for further use in the main app.
> **_NOTE:_** All files in folders are created automatically. Do not change them manually, after running generation scripts, the changes will be lost. To make changes, see the files in the `utils` folder.
## How to use?
To update the icons, you only need to run the **generate-icons** script — `yarn run build`.
To make everything work right, you just need to set [Figma token](https://www.figma.com/developers/api#authentication) (press **Get personal access token**) in the `.env` file. It's easy to create `.env` file, just copy `.env.example`.
```typescript
import { ButtonIcon } from "appsmith-icons";
<ButtonIcon />
```
## Used packages
- [Figmagic](https://github.com/mikaelvesavuori/figmagic?tab=readme-ov-file) — provides an interface for importing graphics from Figma.
- [SVGO](https://github.com/svg/svgo) — optimizes SVG

6
app/client/packages/icons/figmagic.json Normal file
View File

@ -0,0 +1,6 @@
{
"syncGraphics": true,
"syncTokens": false,
"outputFolderGraphics": "./src/icons",
"url": "ySwwPDgItFMS6FjSvvfpPG"
}

26
app/client/packages/icons/package.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "appsmith-icons",
"version": "1.0.0",
"author": "Valera Melnikov <valera@appsmith.com>, Pawan Kumar <pawan@appsmith.com>",
"license": "MIT",
"main": "src/index.ts",
"scripts": {
"build": "yarn cleanup && figmagic && yarn optimize-icons && yarn generate-components && yarn generate-index && yarn generate-stories && yarn prettier . --write --log-level=silent",
"cleanup": "ts-node ./src/utils/cleanup.ts",
"optimize-icons": "ts-node ./src/utils/optimizeIcons.ts",
"generate-components": "ts-node ./src/utils/generateComponents.ts",
"generate-index": "ts-node ./src/utils/generateIndex.ts",
"generate-stories": "ts-node ./src/utils/generateStories.ts",
"lint": "yarn g:lint",
"prettier": "yarn g:prettier"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
},
"devDependencies": {
"fast-glob": "^3.3.2",
"figmagic": "^4.5.13",
"fs-extra": "^11.2.0",
"svgo": "^3.2.0"
}
}

2
app/client/packages/icons/src/components/Icons/ButtonIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ButtonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.5 5.5v2m0 2v-2m3-2L9.793 7.207a1 1 0 0 1-.707.293H8.5M8.5 9.5v-4m3 4-2-2M3.5 8V7a1.5 1.5 0 1 1 3 0v1a1.5 1.5 0 1 1-3 0"/></svg>;

2
app/client/packages/icons/src/components/Icons/CheckboxGroupIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const CheckboxGroupIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M5 6.5H2A1.5 1.5 0 0 1 .5 5V2A1.5 1.5 0 0 1 2 .5h3A1.5 1.5 0 0 1 6.5 2v3A1.5 1.5 0 0 1 5 6.5"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m2.5 3.5 1 1 1-2M8.5 2.5h6M8.5 12.5h4M5 14.5H2A1.5 1.5 0 0 1 .5 13v-3A1.5 1.5 0 0 1 2 8.5h3A1.5 1.5 0 0 1 6.5 10v3A1.5 1.5 0 0 1 5 14.5M8.5 4.5h4M8.5 10.5h6"/></svg>;

2
app/client/packages/icons/src/components/Icons/CheckboxIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const CheckboxIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m4.5 7.5 2 2 4-4"/></svg>;

2
app/client/packages/icons/src/components/Icons/CurrencyInputIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const CurrencyInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.5 5.5h-3a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-3M5.5 10.5v-6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;

2
app/client/packages/icons/src/components/Icons/HeadingIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const HeadingIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M.5 1.5h2m2 0h-2m0 0v12m-2 0h4M10.5 1.5h2m2 0h-2m0 0v12m-2 0h4M2.5 7.5h10"/></svg>;

2
app/client/packages/icons/src/components/Icons/IconButtonIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const IconButtonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" d="M5.5 7.5h4M7.5 9.5v-4"/></svg>;

2
app/client/packages/icons/src/components/Icons/InlineButtonsIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const InlineButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="square" stroke-opacity=".25" d="M8.5 8.5v1a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-1M7.5 8.5v1a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-1"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 3.5h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2M2.5 3.5h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2"/></svg>;

2
app/client/packages/icons/src/components/Icons/InputIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const InputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;

2
app/client/packages/icons/src/components/Icons/KeyValueIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const KeyValueIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" stroke-width="2" d="M2 3h6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 11.5h1m1 0h-1m-1-3 1-1v4M8.5 11.5h-3v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-2M10.5 7.5h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-1M10.5 11.5h2a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-1"/></svg>;

2
app/client/packages/icons/src/components/Icons/MenuButtonIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const MenuButtonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" d="M5.5 7.5h4M5.5 9.5h4M5.5 5.5h4"/></svg>;

2
app/client/packages/icons/src/components/Icons/ModalIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ModalIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 2.5a1 1 0 0 1 1 1v7a3 3 0 0 1-3 3h-7a1 1 0 0 1-1-1v0"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2M7.5 5.5l2-2m0 2-2-2"/></svg>;

2
app/client/packages/icons/src/components/Icons/ParagraphIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ParagraphIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 1.5h1m0 0h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-2m0-2v2m1 2h-2 1v-2M7.5 1.5h6M7.5 3.5h6M7.5 5.5h6M1.5 7.5h12M1.5 9.5h12M1.5 11.5h12M1.5 13.5h7"/></svg>;

2
app/client/packages/icons/src/components/Icons/PhoneInputIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const PhoneInputIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.5 9.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" d="M3.5 7.5h2M4.5 8.5v-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>;

2
app/client/packages/icons/src/components/Icons/RadioGroupIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const RadioGroupIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.5 2.5h6M8.5 10.5h6M8.5 4.5h4M8.5 12.5h4"/><circle cx="3.5" cy="11.5" r="3" stroke="#000" stroke-linejoin="round" transform="rotate(-90 3.5 11.5)"/><path fill="#000" fill-opacity=".1" fill-rule="evenodd" d="M6.5 3.5a3 3 0 1 0-6 0 3 3 0 0 0 6 0M5 3.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0" clip-rule="evenodd"/><circle cx="3.5" cy="3.5" r="3" stroke="#000" stroke-linejoin="round" transform="rotate(-90 3.5 3.5)"/><circle cx="3.5" cy="3.5" r="1" stroke="#000" stroke-linejoin="round" transform="rotate(-90 3.5 3.5)"/></svg>;

2
app/client/packages/icons/src/components/Icons/SectionIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const SectionIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 6v3A1.5 1.5 0 0 0 3 10.5h9A1.5 1.5 0 0 0 13.5 9V6A1.5 1.5 0 0 0 12 4.5H3A1.5 1.5 0 0 0 1.5 6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M13.5.5V1A1.5 1.5 0 0 1 12 2.5H3A1.5 1.5 0 0 1 1.5 1V.5M13.5 14.5V14a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 14v.5"/></svg>;

2
app/client/packages/icons/src/components/Icons/StatsBoxIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const StatsBoxIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 1.5h-10a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M3.5 4.5h6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M3.5 10.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" d="M9.5 10.5V7"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 8.5 2-2 2 2"/></svg>;

2
app/client/packages/icons/src/components/Icons/SwitchGroupIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const SwitchGroupIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5 8.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6"/><path fill="#000" fill-opacity=".15" fill-rule="evenodd" d="M1.5 3.5a3 3 0 0 1 3-3h6a3 3 0 0 0 0 6h-6a3 3 0 0 1-3-3" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6"/><circle cx="10.5" cy="3.5" r="3" stroke="#000"/><circle cx="4.5" cy="11.5" r="3" stroke="#000"/></svg>;

2
app/client/packages/icons/src/components/Icons/SwitchIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const SwitchIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5 4.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6"/><path fill="#000" fill-opacity=".15" fill-rule="evenodd" d="M1.5 7.5a3 3 0 0 1 3-3h6a3 3 0 0 0 0 6h-6a3 3 0 0 1-3-3" clip-rule="evenodd"/><circle cx="10.5" cy="7.5" r="3" stroke="#000"/></svg>;

2
app/client/packages/icons/src/components/Icons/TableIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const TableIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2M7.5 5.5v8M1.5 5.5h12M1.5 9.5h12"/></svg>;

2
app/client/packages/icons/src/components/Icons/ToolbarButtonsIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ToolbarButtonsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m3.5 7.5 1 1 1-2M9.5 8.5l2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 3.5h-10a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>;

2
app/client/packages/icons/src/components/Icons/ZoneIcon.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ZoneIcon = () => <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M2.5 4v7A1.5 1.5 0 0 0 4 12.5h7a1.5 1.5 0 0 0 1.5-1.5V4A1.5 1.5 0 0 0 11 2.5H4A1.5 1.5 0 0 0 2.5 4"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M.5 4v-.5a3 3 0 0 1 3-3H4M.5 11v.5a3 3 0 0 0 3 3H4M14.5 4v-.5a3 3 0 0 0-3-3H11M14.5 11v.5a3 3 0 0 1-3 3H11M.5 6.5v2M14.5 6.5v2M6.5.5h2M6.5 14.5h2"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/ButtonThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ButtonThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#FFEEE5" stroke="#CC3D00" rx="5.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M37.5 33.5v4m0 4v-4m6-4-3.414 3.414a2 2 0 0 1-1.414.586H37.5M37.5 41.5v-8m6 8-4-4M28.5 38.5v-2a3 3 0 1 1 6 0v2a3 3 0 1 1-6 0"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/CheckboxGroupThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const CheckboxGroupThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><path fill="#fff" stroke="#CC3D00" stroke-linecap="square" d="M26.5 23.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path fill="#fff" stroke="#CDD5DF" stroke-linecap="square" d="M26.5 41.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m19 29 2 2 4-4"/><rect width="22" height="8" x="34" y="25" fill="#CDD5DF" rx="1"/><rect width="22" height="8" x="34" y="43" fill="#CDD5DF" rx="1"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/CheckboxThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const CheckboxThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><path fill="#fff" stroke="#CC3D00" stroke-linecap="square" d="M25.5 32.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18 38 2 2 4-4"/><rect width="24" height="8" x="33" y="34" fill="#CDD5DF" rx="1"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/CurrencyInputThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const CurrencyInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M17 38.5a2.5 2.5 0 0 1 0-5M22 43.5a2.5 2.5 0 0 0 0-5M23.5 35.5a2 2 0 0 0-2-2M14.5 41.5a2 2 0 0 0 2 2M19.5 31.5v14M17 33.5h4.5m-4.5 5h5m-5.5 5H22"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/HeadingThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const HeadingThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="44" x="8" y="16" fill="#fff" rx="3"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M40.5 50.5h9m-9-24h9M22.5 50.5h9m-9-24h9"/><path fill="#FFEEE5" stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M42.5 26.5h5v24h-5zM24.5 26.5h5v24h-5z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M29.5 37.5h13"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/IconButtonThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const IconButtonThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="31" height="23" x="20.5" y="26.5" fill="#FFEEE5" stroke="#CC3D00" rx="5.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M30.5 37.5h12M36.5 43.5v-12"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/InlineButtonsThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const InlineButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18.5 37.5 3 3 5-5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 35 6 6m0-6-6 6"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/InputThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const InputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m14.5 44.5 1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/KeyValueThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const KeyValueThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="44" height="39" x="14.5" y="19.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><rect width="16" height="6" x="22" y="27" fill="#CDD5DF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M35 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 35 43.146V42.5a2 2 0 0 0-2-2h-3M38 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M38 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/MenuButtonThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const MenuButtonThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="31" height="23" x="20.5" y="26.5" fill="#FFEEE5" stroke="#CC3D00" rx="5.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M30.5 33.5h12M30.5 37.5h12M30.5 41.5h12"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/ModalThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ModalThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="56" x="9" y="12" fill="#E3E8EF" rx="4"/><rect width="56" height="56" x="7" y="10" fill="#fff" rx="3"/><rect width="28" height="9" x="15" y="18" fill="#E3E8EF" rx="1"/><rect width="40" height="6" x="15" y="36" fill="#E3E8EF" rx="1"/><rect width="40" height="6" x="15" y="44" fill="#E3E8EF" rx="1"/><rect width="24" height="6" x="15" y="52" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-width="1.5" d="m48.5 19.5 6 6m0-6-6 6"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/ParagraphThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ParagraphThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="44" x="8" y="16" fill="#fff" rx="3"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M23.5 25.5h1m0 0H29a2.5 2.5 0 0 1 2.5 2.5v0a2.5 2.5 0 0 1-2.5 2.5h-4.5m0-5v5m0 3v-3m-1 3h2M35.5 25.5h12M35.5 29.5h12M35.5 33.5h12M23.5 37.5h24M23.5 41.5h24M23.5 45.5h24M23.5 49.5h14"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/PhoneInputThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const PhoneInputThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M15.5 38.5h8M19.5 42.5v-8"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M27 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/RadioGroupThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const RadioGroupThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><circle cx="22" cy="29" r="6.5" fill="#FFBFA1" stroke="#CC3D00"/><circle cx="22" cy="29" r="3.5" fill="#fff" stroke="#CC3D00"/><rect width="20" height="8" x="34" y="25" fill="#CDD5DF" rx="1"/><rect width="11" height="11" x="16.5" y="41.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="22" height="8" x="34" y="43" fill="#CDD5DF" rx="1"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/StatsBoxThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const StatsBoxThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="32" height="6" x="16" y="24" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M29 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 29 43.146V42.5a2 2 0 0 0-2-2h-3M32 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M32 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/><rect width="12" height="12" x="43.5" y="39.5" fill="#FFEEE5" stroke="#CC3D00" rx="1.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 48 4-4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M48.5 43.5h3v3"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/SwitchGroupThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const SwitchGroupThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="17" height="11" x="40.5" y="23.5" fill="#FFBFA1" stroke="#CC3D00" rx="5.5"/><rect width="17" height="11" x="40.5" y="41.5" fill="#CDD5DF" stroke="#CDD5DF" rx="5.5"/><circle cx="52" cy="29" r="5.5" fill="#fff" stroke="#CC3D00"/><circle cx="46" cy="47" r="5.5" fill="#fff" stroke="#CDD5DF"/><rect width="22" height="8" x="14" y="25" fill="#CDD5DF" rx="1"/><rect width="18" height="8" x="14" y="43" fill="#CDD5DF" rx="1"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/SwitchThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const SwitchThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="22" height="8" x="14" y="34" fill="#CDD5DF" rx="1"/><rect width="17" height="11" x="40.5" y="32.5" fill="#FFBFA1" stroke="#CC3D00" rx="5.5"/><circle cx="52" cy="38" r="5.5" fill="#fff" stroke="#CC3D00"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/TableThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const TableThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="43" x="7.5" y="16.5" fill="#fff" stroke="#6A7585" rx="1.5"/><path fill="#FFEEE5" d="M22.5 32.5v26a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-41a1 1 0 0 1 1-1h54a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-39a1 1 0 0 0-1 1"/><path stroke="#CC3D00" d="M22.5 59.5H9A1.5 1.5 0 0 1 7.5 58V18A1.5 1.5 0 0 1 9 16.5h53a1.5 1.5 0 0 1 1.5 1.5v13.5"/><path stroke="#6A7585" stroke-linecap="round" d="M22.5 45.5h41"/><path stroke="#CC3D00" stroke-linecap="round" d="M22.5 17v28.5m0 14v-14m0 0h-15m.5-14h55.5"/><path fill="#E3E8EF" fill-rule="evenodd" d="M27 35a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1zm0 14a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h31a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1z" clip-rule="evenodd"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/ToolbarButtonsThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ToolbarButtonsThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="19" height="16" x="5.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="18" height="16" x="27.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path fill="#CC3D00" d="M19.5 43.5v.5h.5v-.5zm-9 0H10v.5h.5zm4.5-10 .332-.374a.5.5 0 0 0-.664 0zm-1.5 10v.5h.5v-.5zm0-4V39H13v.5zm3 0h.5V39h-.5zm0 4H16v.5h.5zm2.664-6.298.332-.374zm-8.328 0-.332-.374zM11 43.5v-5.551h-1v5.55zm8-5.551v5.55h1v-5.55zm-7.832-.374 4.164-3.701-.664-.748-4.164 3.702zm3.5-3.701 4.164 3.701.665-.747-4.165-3.702zM13.5 43h-3v1h3zm.5.5v-4h-1v4zm-.5-3.5h3v-1h-3zm6 3h-3v1h3zM16 39.5v4h1v-4zm4-1.551a1.5 1.5 0 0 0-.503-1.121l-.665.747a.5.5 0 0 1 .168.374zm-9 0a.5.5 0 0 1 .168-.374l-.664-.747a1.5 1.5 0 0 0-.504 1.12z"/><circle cx="36.5" cy="38.5" r="5" stroke="#6A7585"/><path stroke="#6A7585" stroke-linecap="round" d="M34.5 38.5h4M36.5 40.5v-4"/><path stroke="#6A7585" stroke-linecap="round" stroke-width="2" d="M54 38h.01M58 38h.01M62 38h.01"/></svg>;

2
app/client/packages/icons/src/components/Thumbnails/ZoneThumbnail.tsx Normal file
View File

@ -0,0 +1,2 @@
import React from "react";
export const ZoneThumbnail = () => <svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="43" height="43" x="14.5" y="16.5" fill="#fff" stroke="#CC3D00" stroke-linecap="square" stroke-linejoin="round" rx=".5"/><path stroke="#CC3D00" d="M9.5 59v4a1.5 1.5 0 0 0 1.5 1.5h4M62.5 59v4a1.5 1.5 0 0 1-1.5 1.5h-4M15 11.5h-4A1.5 1.5 0 0 0 9.5 13v4M57 11.5h4a1.5 1.5 0 0 1 1.5 1.5v4M9.5 22v7m0 5.5V42m0 5v7M62.5 22v7m0 5.5V42m0 5v7M20 11.5h7M20 64.5h7M32 11.5h8M32 64.5h8M45 11.5h7M45 64.5h7"/></svg>;

1
app/client/packages/icons/src/icons/Icons/Button.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.5 5.5v2m0 2v-2m3-2L9.793 7.207a1 1 0 0 1-.707.293H8.5M8.5 9.5v-4m3 4-2-2M3.5 8V7a1.5 1.5 0 1 1 3 0v1a1.5 1.5 0 1 1-3 0"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 565 B

1
app/client/packages/icons/src/icons/Icons/Checkbox.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m4.5 7.5 2 2 4-4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 318 B

1
app/client/packages/icons/src/icons/Icons/CheckboxGroup.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M5 6.5H2A1.5 1.5 0 0 1 .5 5V2A1.5 1.5 0 0 1 2 .5h3A1.5 1.5 0 0 1 6.5 2v3A1.5 1.5 0 0 1 5 6.5"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m2.5 3.5 1 1 1-2M8.5 2.5h6M8.5 12.5h4M5 14.5H2A1.5 1.5 0 0 1 .5 13v-3A1.5 1.5 0 0 1 2 8.5h3A1.5 1.5 0 0 1 6.5 10v3A1.5 1.5 0 0 1 5 14.5M8.5 4.5h4M8.5 10.5h6"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 475 B

1
app/client/packages/icons/src/icons/Icons/CurrencyInput.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.5 5.5h-3a1 1 0 0 0-1 1v0a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-3M5.5 10.5v-6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 485 B

0
app/client/src/widgets/wds/WDSHeadingWidget/icon.svg → app/client/packages/icons/src/icons/Icons/Heading.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 B

After

Width:  |  Height:  |  Size: 227 B

1
app/client/packages/icons/src/icons/Icons/IconButton.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" d="M5.5 7.5h4M7.5 9.5v-4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 441 B

1
app/client/packages/icons/src/icons/Icons/InlineButtons.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="square" stroke-opacity=".25" d="M8.5 8.5v1a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-1M7.5 8.5v1a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-1"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M13.5 3.5h-3a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2M2.5 3.5h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 461 B

1
app/client/packages/icons/src/icons/Icons/Input.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 9.5-.5-1m-3.5 1 .5-1m0 0 1.5-3 1.5 3m-3 0h3"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 445 B

1
app/client/packages/icons/src/icons/Icons/KeyValue.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" stroke-width="2" d="M2 3h6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 11.5h1m1 0h-1m-1-3 1-1v4M8.5 11.5h-3v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-2M10.5 7.5h2a1 1 0 0 1 1 1v0a1 1 0 0 1-1 1h-1M10.5 11.5h2a1 1 0 0 0 1-1v0a1 1 0 0 0-1-1h-1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 453 B

1
app/client/packages/icons/src/icons/Icons/MenuButton.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 2.5h-10a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M14.5 8.5v3a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2v-3"/><path stroke="#000" stroke-linecap="round" d="M5.5 7.5h4M5.5 9.5h4M5.5 5.5h4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 450 B

1
app/client/packages/icons/src/icons/Icons/Modal.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 2.5a1 1 0 0 1 1 1v7a3 3 0 0 1-3 3h-7a1 1 0 0 1-1-1v0"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2M7.5 5.5l2-2m0 2-2-2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 399 B

0
app/client/src/widgets/wds/WDSParagraphWidget/icon.svg → app/client/packages/icons/src/icons/Icons/Paragraph.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 296 B

After

Width:  |  Height:  |  Size: 296 B

2
app/client/src/widgets/wds/WDSPhoneInputWidget/icon.svg → app/client/packages/icons/src/icons/Icons/PhoneInput.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.5 9.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" d="M3.5 7.5h2M4.5 8.5v-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2M14.5 2.5H.5v10h9"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M7.5 9.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" d="M3.5 7.5h2M4.5 8.5v-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M12.5 6.5h1m1 0h-1m0 0v8m-1 0h2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M14.5 2.5h-12a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h7"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 373 B

After

Width:  |  Height:  |  Size: 495 B

1
app/client/packages/icons/src/icons/Icons/RadioGroup.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M8.5 2.5h6M8.5 10.5h6M8.5 4.5h4M8.5 12.5h4"/><circle cx="3.5" cy="11.5" r="3" stroke="#000" stroke-linejoin="round" transform="rotate(-90 3.5 11.5)"/><path fill="#000" fill-opacity=".1" fill-rule="evenodd" d="M6.5 3.5a3 3 0 1 0-6 0 3 3 0 0 0 6 0M5 3.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0" clip-rule="evenodd"/><circle cx="3.5" cy="3.5" r="3" stroke="#000" stroke-linejoin="round" transform="rotate(-90 3.5 3.5)"/><circle cx="3.5" cy="3.5" r="1" stroke="#000" stroke-linejoin="round" transform="rotate(-90 3.5 3.5)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 667 B

1
app/client/packages/icons/src/icons/Icons/Section.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M1.5 6v3A1.5 1.5 0 0 0 3 10.5h9A1.5 1.5 0 0 0 13.5 9V6A1.5 1.5 0 0 0 12 4.5H3A1.5 1.5 0 0 0 1.5 6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M13.5.5V1A1.5 1.5 0 0 1 12 2.5H3A1.5 1.5 0 0 1 1.5 1V.5M13.5 14.5V14a1.5 1.5 0 0 0-1.5-1.5H3A1.5 1.5 0 0 0 1.5 14v.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 461 B

1
app/client/packages/icons/src/icons/Icons/StatsBox.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 1.5h-10a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M3.5 4.5h6"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M3.5 10.5h1m1 0h-1m-1-3 1-1v4"/><path stroke="#000" stroke-linecap="round" d="M9.5 10.5V7"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m7.5 8.5 2-2 2 2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 586 B

1
app/client/packages/icons/src/icons/Icons/Switch.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5 4.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6"/><path fill="#000" fill-opacity=".15" fill-rule="evenodd" d="M1.5 7.5a3 3 0 0 1 3-3h6a3 3 0 0 0 0 6h-6a3 3 0 0 1-3-3" clip-rule="evenodd"/><circle cx="10.5" cy="7.5" r="3" stroke="#000"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 382 B

1
app/client/packages/icons/src/icons/Icons/SwitchGroup.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5 8.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6"/><path fill="#000" fill-opacity=".15" fill-rule="evenodd" d="M1.5 3.5a3 3 0 0 1 3-3h6a3 3 0 0 0 0 6h-6a3 3 0 0 1-3-3" clip-rule="evenodd"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M10.5.5h-6a3 3 0 0 0 0 6h6a3 3 0 1 0 0-6"/><circle cx="10.5" cy="3.5" r="3" stroke="#000"/><circle cx="4.5" cy="11.5" r="3" stroke="#000"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 543 B

1
app/client/packages/icons/src/icons/Icons/Table.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M11.5 1.5h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2M7.5 5.5v8M1.5 5.5h12M1.5 9.5h12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 261 B

2
app/client/src/widgets/wds/WDSToolbarButtonsWidget/icon.svg → app/client/packages/icons/src/icons/Icons/ToolbarButtons.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m3.5 7.5 1 1 1-2M9.5 8.5l2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 3.5h-10a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="m3.5 7.5 1 1 1-2M9.5 8.5l2-2m0 2-2-2"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M12.5 3.5h-10a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 341 B

After

Width:  |  Height:  |  Size: 340 B

1
app/client/packages/icons/src/icons/Icons/Zone.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" d="M2.5 4v7A1.5 1.5 0 0 0 4 12.5h7a1.5 1.5 0 0 0 1.5-1.5V4A1.5 1.5 0 0 0 11 2.5H4A1.5 1.5 0 0 0 2.5 4"/><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".25" d="M.5 4v-.5a3 3 0 0 1 3-3H4M.5 11v.5a3 3 0 0 0 3 3H4M14.5 4v-.5a3 3 0 0 0-3-3H11M14.5 11v.5a3 3 0 0 1-3 3H11M.5 6.5v2M14.5 6.5v2M6.5.5h2M6.5 14.5h2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 491 B

1
app/client/packages/icons/src/icons/Thumbnails/Button.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#FFEEE5" stroke="#CC3D00" rx="5.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M37.5 33.5v4m0 4v-4m6-4-3.414 3.414a2 2 0 0 1-1.414.586H37.5M37.5 41.5v-8m6 8-4-4M28.5 38.5v-2a3 3 0 1 1 6 0v2a3 3 0 1 1-6 0"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 369 B

1
app/client/packages/icons/src/icons/Thumbnails/Checkbox.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><path fill="#fff" stroke="#CC3D00" stroke-linecap="square" d="M25.5 32.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18 38 2 2 4-4"/><rect width="24" height="8" x="33" y="34" fill="#CDD5DF" rx="1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 378 B

1
app/client/packages/icons/src/icons/Thumbnails/CheckboxGroup.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><path fill="#fff" stroke="#CC3D00" stroke-linecap="square" d="M26.5 23.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path fill="#fff" stroke="#CDD5DF" stroke-linecap="square" d="M26.5 41.5h-9a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1Z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m19 29 2 2 4-4"/><rect width="22" height="8" x="34" y="25" fill="#CDD5DF" rx="1"/><rect width="22" height="8" x="34" y="43" fill="#CDD5DF" rx="1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 585 B

1
app/client/packages/icons/src/icons/Thumbnails/CurrencyInput.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M17 38.5a2.5 2.5 0 0 1 0-5M22 43.5a2.5 2.5 0 0 0 0-5M23.5 35.5a2 2 0 0 0-2-2M14.5 41.5a2 2 0 0 0 2 2M19.5 31.5v14M17 33.5h4.5m-4.5 5h5m-5.5 5H22"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 495 B

2
app/client/src/widgets/wds/WDSHeadingWidget/thumbnail.svg → app/client/packages/icons/src/icons/Thumbnails/Heading.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="44" x="8" y="16" fill="#fff" rx="3"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M40.5 50.5h9m-9-24h9M22.5 50.5h9m-9-24h9"/><path fill="#fff" stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M42.5 26.5h5v24h-5v-24ZM24.5 26.5h5v24h-5v-24Z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M29.5 37.5h13"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="44" x="8" y="16" fill="#fff" rx="3"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M40.5 50.5h9m-9-24h9M22.5 50.5h9m-9-24h9"/><path fill="#FFEEE5" stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M42.5 26.5h5v24h-5zM24.5 26.5h5v24h-5z"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M29.5 37.5h13"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 482 B

After

Width:  |  Height:  |  Size: 477 B

1
app/client/packages/icons/src/icons/Thumbnails/IconButton.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="31" height="23" x="20.5" y="26.5" fill="#FFEEE5" stroke="#CC3D00" rx="5.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M30.5 37.5h12M36.5 43.5v-12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 249 B

1
app/client/packages/icons/src/icons/Thumbnails/InlineButtons.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="59" height="23" x="6.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="24" height="15" x="10.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="24" height="15" x="37.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m18.5 37.5 3 3 5-5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 35 6 6m0-6-6 6"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 508 B

1
app/client/packages/icons/src/icons/Thumbnails/Input.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="m14.5 44.5 1.833-4m9.167 4-1.833-4m-7.334 0 3.667-8 3.667 8m-7.334 0h7.334"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 425 B

1
app/client/packages/icons/src/icons/Thumbnails/KeyValue.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="44" height="39" x="14.5" y="19.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><rect width="16" height="6" x="22" y="27" fill="#CDD5DF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M22 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M35 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 35 43.146V42.5a2 2 0 0 0-2-2h-3M38 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M38 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

1
app/client/packages/icons/src/icons/Thumbnails/MenuButton.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="31" height="23" x="20.5" y="26.5" fill="#FFEEE5" stroke="#CC3D00" rx="5.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M30.5 33.5h12M30.5 37.5h12M30.5 41.5h12"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 261 B

1
app/client/packages/icons/src/icons/Thumbnails/Modal.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="56" x="9" y="12" fill="#E3E8EF" rx="4"/><rect width="56" height="56" x="7" y="10" fill="#fff" rx="3"/><rect width="28" height="9" x="15" y="18" fill="#E3E8EF" rx="1"/><rect width="40" height="6" x="15" y="36" fill="#E3E8EF" rx="1"/><rect width="40" height="6" x="15" y="44" fill="#E3E8EF" rx="1"/><rect width="24" height="6" x="15" y="52" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-width="1.5" d="m48.5 19.5 6 6m0-6-6 6"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 561 B

0
app/client/src/widgets/wds/WDSParagraphWidget/thumbnail.svg → app/client/packages/icons/src/icons/Thumbnails/Paragraph.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 400 B

After

Width:  |  Height:  |  Size: 400 B

1
app/client/packages/icons/src/icons/Thumbnails/PhoneInput.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="55" height="23" x="8.5" y="26.5" fill="#fff" stroke="#CDD5DF" rx="2.5"/><path stroke="#CC3D00" stroke-linecap="round" d="M15.5 38.5h8M19.5 42.5v-8"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M27 43.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10"/><path stroke="#6A7585" stroke-linecap="round" stroke-linejoin="round" d="M51.5 43.5h2m2 0h-2m0 0v12m-2 0h4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

1
app/client/packages/icons/src/icons/Thumbnails/RadioGroup.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><circle cx="22" cy="29" r="6.5" fill="#FFBFA1" stroke="#CC3D00"/><circle cx="22" cy="29" r="3.5" fill="#fff" stroke="#CC3D00"/><rect width="20" height="8" x="34" y="25" fill="#CDD5DF" rx="1"/><rect width="11" height="11" x="16.5" y="41.5" fill="#fff" stroke="#CDD5DF" rx="5.5"/><rect width="22" height="8" x="34" y="43" fill="#CDD5DF" rx="1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 424 B

1
app/client/packages/icons/src/icons/Thumbnails/StatsBox.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="32" height="6" x="16" y="24" fill="#E3E8EF" rx="1"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M16 50.5h2.5m2.5 0h-2.5m-2.5-8 2.5-2v10M29 50.5h-5v-2.646a2 2 0 0 1 1.257-1.857l2.486-.994A2 2 0 0 0 29 43.146V42.5a2 2 0 0 0-2-2h-3M32 40.5h3a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1.715M32 50.5h3a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2h-2"/><rect width="12" height="12" x="43.5" y="39.5" fill="#FFEEE5" stroke="#CC3D00" rx="1.5"/><path stroke="#CC3D00" stroke-linecap="round" d="m47 48 4-4"/><path stroke="#CC3D00" stroke-linecap="round" stroke-linejoin="round" d="M48.5 43.5h3v3"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 686 B

1
app/client/packages/icons/src/icons/Thumbnails/Switch.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="22" height="8" x="14" y="34" fill="#CDD5DF" rx="1"/><rect width="17" height="11" x="40.5" y="32.5" fill="#FFBFA1" stroke="#CC3D00" rx="5.5"/><circle cx="52" cy="38" r="5.5" fill="#fff" stroke="#CC3D00"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 297 B

1
app/client/packages/icons/src/icons/Thumbnails/SwitchGroup.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="17" height="11" x="40.5" y="23.5" fill="#FFBFA1" stroke="#CC3D00" rx="5.5"/><rect width="17" height="11" x="40.5" y="41.5" fill="#CDD5DF" stroke="#CDD5DF" rx="5.5"/><circle cx="52" cy="29" r="5.5" fill="#fff" stroke="#CC3D00"/><circle cx="46" cy="47" r="5.5" fill="#fff" stroke="#CDD5DF"/><rect width="22" height="8" x="14" y="25" fill="#CDD5DF" rx="1"/><rect width="18" height="8" x="14" y="43" fill="#CDD5DF" rx="1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 513 B

1
app/client/packages/icons/src/icons/Thumbnails/Table.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="56" height="43" x="7.5" y="16.5" fill="#fff" stroke="#6A7585" rx="1.5"/><path fill="#FFEEE5" d="M22.5 32.5v26a1 1 0 0 1-1 1h-13a1 1 0 0 1-1-1v-41a1 1 0 0 1 1-1h54a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-39a1 1 0 0 0-1 1"/><path stroke="#CC3D00" d="M22.5 59.5H9A1.5 1.5 0 0 1 7.5 58V18A1.5 1.5 0 0 1 9 16.5h53a1.5 1.5 0 0 1 1.5 1.5v13.5"/><path stroke="#6A7585" stroke-linecap="round" d="M22.5 45.5h41"/><path stroke="#CC3D00" stroke-linecap="round" d="M22.5 17v28.5m0 14v-14m0 0h-15m.5-14h55.5"/><path fill="#E3E8EF" fill-rule="evenodd" d="M27 35a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h22a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1zm0 14a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h31a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 790 B

1
app/client/packages/icons/src/icons/Thumbnails/ToolbarButtons.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="19" height="16" x="5.5" y="30.5" fill="#FFEEE5" stroke="#CC3D00" rx="2.5"/><rect width="18" height="16" x="27.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><rect width="19" height="16" x="48.5" y="30.5" fill="#E3E8EF" stroke="#6A7585" rx="2.5"/><path fill="#CC3D00" d="M19.5 43.5v.5h.5v-.5zm-9 0H10v.5h.5zm4.5-10 .332-.374a.5.5 0 0 0-.664 0zm-1.5 10v.5h.5v-.5zm0-4V39H13v.5zm3 0h.5V39h-.5zm0 4H16v.5h.5zm2.664-6.298.332-.374zm-8.328 0-.332-.374zM11 43.5v-5.551h-1v5.55zm8-5.551v5.55h1v-5.55zm-7.832-.374 4.164-3.701-.664-.748-4.164 3.702zm3.5-3.701 4.164 3.701.665-.747-4.165-3.702zM13.5 43h-3v1h3zm.5.5v-4h-1v4zm-.5-3.5h3v-1h-3zm6 3h-3v1h3zM16 39.5v4h1v-4zm4-1.551a1.5 1.5 0 0 0-.503-1.121l-.665.747a.5.5 0 0 1 .168.374zm-9 0a.5.5 0 0 1 .168-.374l-.664-.747a1.5 1.5 0 0 0-.504 1.12z"/><circle cx="36.5" cy="38.5" r="5" stroke="#6A7585"/><path stroke="#6A7585" stroke-linecap="round" d="M34.5 38.5h4M36.5 40.5v-4"/><path stroke="#6A7585" stroke-linecap="round" stroke-width="2" d="M54 38h.01M58 38h.01M62 38h.01"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
app/client/packages/icons/src/icons/Thumbnails/Zone.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72" height="76" fill="none"><rect width="43" height="43" x="14.5" y="16.5" fill="#fff" stroke="#CC3D00" stroke-linecap="square" stroke-linejoin="round" rx=".5"/><path stroke="#CC3D00" d="M9.5 59v4a1.5 1.5 0 0 0 1.5 1.5h4M62.5 59v4a1.5 1.5 0 0 1-1.5 1.5h-4M15 11.5h-4A1.5 1.5 0 0 0 9.5 13v4M57 11.5h4a1.5 1.5 0 0 1 1.5 1.5v4M9.5 22v7m0 5.5V42m0 5v7M62.5 22v7m0 5.5V42m0 5v7M20 11.5h7M20 64.5h7M32 11.5h8M32 64.5h8M45 11.5h7M45 64.5h7"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 488 B

41
app/client/packages/icons/src/index.ts Normal file
View File

@ -0,0 +1,41 @@
export { ButtonThumbnail } from "./components/Thumbnails/ButtonThumbnail";
export { CheckboxGroupThumbnail } from "./components/Thumbnails/CheckboxGroupThumbnail";
export { CheckboxThumbnail } from "./components/Thumbnails/CheckboxThumbnail";
export { CurrencyInputThumbnail } from "./components/Thumbnails/CurrencyInputThumbnail";
export { HeadingThumbnail } from "./components/Thumbnails/HeadingThumbnail";
export { IconButtonThumbnail } from "./components/Thumbnails/IconButtonThumbnail";
export { InlineButtonsThumbnail } from "./components/Thumbnails/InlineButtonsThumbnail";
export { InputThumbnail } from "./components/Thumbnails/InputThumbnail";
export { KeyValueThumbnail } from "./components/Thumbnails/KeyValueThumbnail";
export { MenuButtonThumbnail } from "./components/Thumbnails/MenuButtonThumbnail";
export { ModalThumbnail } from "./components/Thumbnails/ModalThumbnail";
export { ParagraphThumbnail } from "./components/Thumbnails/ParagraphThumbnail";
export { PhoneInputThumbnail } from "./components/Thumbnails/PhoneInputThumbnail";
export { RadioGroupThumbnail } from "./components/Thumbnails/RadioGroupThumbnail";
export { StatsBoxThumbnail } from "./components/Thumbnails/StatsBoxThumbnail";
export { SwitchGroupThumbnail } from "./components/Thumbnails/SwitchGroupThumbnail";
export { SwitchThumbnail } from "./components/Thumbnails/SwitchThumbnail";
export { TableThumbnail } from "./components/Thumbnails/TableThumbnail";
export { ToolbarButtonsThumbnail } from "./components/Thumbnails/ToolbarButtonsThumbnail";
export { ZoneThumbnail } from "./components/Thumbnails/ZoneThumbnail";
export { ButtonIcon } from "./components/Icons/ButtonIcon";
export { CheckboxGroupIcon } from "./components/Icons/CheckboxGroupIcon";
export { CheckboxIcon } from "./components/Icons/CheckboxIcon";
export { CurrencyInputIcon } from "./components/Icons/CurrencyInputIcon";
export { HeadingIcon } from "./components/Icons/HeadingIcon";
export { IconButtonIcon } from "./components/Icons/IconButtonIcon";
export { InlineButtonsIcon } from "./components/Icons/InlineButtonsIcon";
export { InputIcon } from "./components/Icons/InputIcon";
export { KeyValueIcon } from "./components/Icons/KeyValueIcon";
export { MenuButtonIcon } from "./components/Icons/MenuButtonIcon";
export { ModalIcon } from "./components/Icons/ModalIcon";
export { ParagraphIcon } from "./components/Icons/ParagraphIcon";
export { PhoneInputIcon } from "./components/Icons/PhoneInputIcon";
export { RadioGroupIcon } from "./components/Icons/RadioGroupIcon";
export { SectionIcon } from "./components/Icons/SectionIcon";
export { StatsBoxIcon } from "./components/Icons/StatsBoxIcon";
export { SwitchGroupIcon } from "./components/Icons/SwitchGroupIcon";
export { SwitchIcon } from "./components/Icons/SwitchIcon";
export { TableIcon } from "./components/Icons/TableIcon";
export { ToolbarButtonsIcon } from "./components/Icons/ToolbarButtonsIcon";
export { ZoneIcon } from "./components/Icons/ZoneIcon";

59
app/client/packages/icons/src/stories/Icons.mdx Normal file
View File

@ -0,0 +1,59 @@
import { Meta } from "@storybook/addon-docs";
import { Flex } from "@design-system/widgets";
import { ButtonIcon } from "../components/Icons/ButtonIcon";
import { CheckboxGroupIcon } from "../components/Icons/CheckboxGroupIcon";
import { CheckboxIcon } from "../components/Icons/CheckboxIcon";
import { CurrencyInputIcon } from "../components/Icons/CurrencyInputIcon";
import { HeadingIcon } from "../components/Icons/HeadingIcon";
import { IconButtonIcon } from "../components/Icons/IconButtonIcon";
import { InlineButtonsIcon } from "../components/Icons/InlineButtonsIcon";
import { InputIcon } from "../components/Icons/InputIcon";
import { KeyValueIcon } from "../components/Icons/KeyValueIcon";
import { MenuButtonIcon } from "../components/Icons/MenuButtonIcon";
import { ModalIcon } from "../components/Icons/ModalIcon";
import { ParagraphIcon } from "../components/Icons/ParagraphIcon";
import { PhoneInputIcon } from "../components/Icons/PhoneInputIcon";
import { RadioGroupIcon } from "../components/Icons/RadioGroupIcon";
import { SectionIcon } from "../components/Icons/SectionIcon";
import { StatsBoxIcon } from "../components/Icons/StatsBoxIcon";
import { SwitchGroupIcon } from "../components/Icons/SwitchGroupIcon";
import { SwitchIcon } from "../components/Icons/SwitchIcon";
import { TableIcon } from "../components/Icons/TableIcon";
import { ToolbarButtonsIcon } from "../components/Icons/ToolbarButtonsIcon";
import { ZoneIcon } from "../components/Icons/ZoneIcon";
<Meta title="Appsmith Icons/Icons" />
# Icons
Icon set for Entity Explorer Panel, which provides a visual representation of the widgets.
export const Icons = () => {
return (
<Flex gap="spacing-4" wrap="wrap">
<ButtonIcon />
<CheckboxGroupIcon />
<CheckboxIcon />
<CurrencyInputIcon />
<HeadingIcon />
<IconButtonIcon />
<InlineButtonsIcon />
<InputIcon />
<KeyValueIcon />
<MenuButtonIcon />
<ModalIcon />
<ParagraphIcon />
<PhoneInputIcon />
<RadioGroupIcon />
<SectionIcon />
<StatsBoxIcon />
<SwitchGroupIcon />
<SwitchIcon />
<TableIcon />
<ToolbarButtonsIcon />
<ZoneIcon />
</Flex>
);
};
<Icons />

57
app/client/packages/icons/src/stories/Thumbnails.mdx Normal file
View File

@ -0,0 +1,57 @@
import { Meta } from "@storybook/addon-docs";
import { Flex } from "@design-system/widgets";
import { ButtonThumbnail } from "../components/Thumbnails/ButtonThumbnail";
import { CheckboxGroupThumbnail } from "../components/Thumbnails/CheckboxGroupThumbnail";
import { CheckboxThumbnail } from "../components/Thumbnails/CheckboxThumbnail";
import { CurrencyInputThumbnail } from "../components/Thumbnails/CurrencyInputThumbnail";
import { HeadingThumbnail } from "../components/Thumbnails/HeadingThumbnail";
import { IconButtonThumbnail } from "../components/Thumbnails/IconButtonThumbnail";
import { InlineButtonsThumbnail } from "../components/Thumbnails/InlineButtonsThumbnail";
import { InputThumbnail } from "../components/Thumbnails/InputThumbnail";
import { KeyValueThumbnail } from "../components/Thumbnails/KeyValueThumbnail";
import { MenuButtonThumbnail } from "../components/Thumbnails/MenuButtonThumbnail";
import { ModalThumbnail } from "../components/Thumbnails/ModalThumbnail";
import { ParagraphThumbnail } from "../components/Thumbnails/ParagraphThumbnail";
import { PhoneInputThumbnail } from "../components/Thumbnails/PhoneInputThumbnail";
import { RadioGroupThumbnail } from "../components/Thumbnails/RadioGroupThumbnail";
import { StatsBoxThumbnail } from "../components/Thumbnails/StatsBoxThumbnail";
import { SwitchGroupThumbnail } from "../components/Thumbnails/SwitchGroupThumbnail";
import { SwitchThumbnail } from "../components/Thumbnails/SwitchThumbnail";
import { TableThumbnail } from "../components/Thumbnails/TableThumbnail";
import { ToolbarButtonsThumbnail } from "../components/Thumbnails/ToolbarButtonsThumbnail";
import { ZoneThumbnail } from "../components/Thumbnails/ZoneThumbnail";
<Meta title="Appsmith Icons/Thumbnails" />
# Thumbnails
Icon set for Widget Explorer Panel, which provides a visual representation of the widgets.
export const Icons = () => {
return (
<Flex gap="spacing-4" wrap="wrap">
<ButtonThumbnail />
<CheckboxGroupThumbnail />
<CheckboxThumbnail />
<CurrencyInputThumbnail />
<HeadingThumbnail />
<IconButtonThumbnail />
<InlineButtonsThumbnail />
<InputThumbnail />
<KeyValueThumbnail />
<MenuButtonThumbnail />
<ModalThumbnail />
<ParagraphThumbnail />
<PhoneInputThumbnail />
<RadioGroupThumbnail />
<StatsBoxThumbnail />
<SwitchGroupThumbnail />
<SwitchThumbnail />
<TableThumbnail />
<ToolbarButtonsThumbnail />
<ZoneThumbnail />
</Flex>
);
};
<Icons />

4
app/client/packages/icons/src/types/svg.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module "*.svg" {
const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
export default content;
}

12
app/client/packages/icons/src/utils/cleanup.ts Normal file
View File

@ -0,0 +1,12 @@
import fs from "fs-extra";
async function cleanup() {
await fs.emptyDirSync("./src/icons/Icons");
await fs.emptyDirSync("./src/icons/Thumbnails");
await fs.emptyDirSync("./src/components/Icons");
await fs.emptyDirSync("./src/components/Thumbnails");
await fs.emptyDirSync("./src/stories");
await fs.writeFile(`./src/index.ts`, "");
}
cleanup();

52
app/client/packages/icons/src/utils/generateComponents.ts Normal file
View File

@ -0,0 +1,52 @@
import fg from "fast-glob";
import type { PathLike } from "fs";
import fs from "fs-extra";
import path from "path";
const createReactComponent = (name: string, svg: string) => {
return `import React from "react";
export const ${name} = () => ${svg};
`;
};
async function generateComponents() {
const entries = await fg("./src/icons/**/*.svg");
entries.map(async (filepath: PathLike) => {
await fs.readFile(filepath, "utf-8", async (err, file) => {
if (err) {
// eslint-disable-next-line no-console
return console.error(err);
}
const dir = path.dirname(filepath as string).replace("./src/icons/", "");
let name = path.basename(filepath as string).replace(".svg", "");
switch (dir) {
case "Icons":
name += "Icon";
break;
case "Thumbnails":
name += "Thumbnail";
break;
}
await fs.writeFile(
`./src/components/${dir}/${name}.tsx`,
createReactComponent(name, file),
"utf8",
function (err) {
// eslint-disable-next-line no-console
if (err) return console.error(err);
},
);
});
});
// eslint-disable-next-line no-console
console.error(
"\x1b[32mReact components generation completed successfully!\x1b[0m",
);
}
generateComponents();

39
app/client/packages/icons/src/utils/generateIndex.ts Normal file
View File

@ -0,0 +1,39 @@
import fs from "fs-extra";
const createImportListString = (name: string, dir: string) => {
return `export { ${name} } from "./components/${dir}/${name}";
`;
};
async function generateIndex() {
await appendExports("Thumbnails");
await appendExports("Icons");
// eslint-disable-next-line no-console
console.error(
"\x1b[32mIndex.ts file generation completed successfully!\x1b[0m",
);
}
async function appendExports(dir: string) {
await fs.readdir(`./src/components/${dir}/`, async (err, files) => {
if (err) {
// eslint-disable-next-line no-console
return console.error(err);
}
let importList = ``;
files.forEach((file) => {
const name = file.replace(".tsx", "");
importList += createImportListString(name, dir);
});
await fs.appendFile(`./src/index.ts`, importList, "utf8", function (err) {
// eslint-disable-next-line no-console
if (err) return console.error(err);
});
});
}
generateIndex();

80
app/client/packages/icons/src/utils/generateStories.ts Normal file
View File

@ -0,0 +1,80 @@
import fs from "fs-extra";
const createImportListString = (name: string, dir: string) => {
return `import { ${name} } from "../components/${dir}/${name}";
`;
};
const createComponentListString = (name: string) => {
return `<${name} />`;
};
const createStory = (
title: string,
description: string,
importList: string,
componentList: string,
) => {
return `import { Meta } from "@storybook/addon-docs";
import { Flex } from "@design-system/widgets";
${importList}
<Meta title="Appsmith Icons/${title}" />
# ${title}
${description}
export const Icons = () => {
return (
<Flex gap="spacing-4" wrap="wrap">
${componentList}
</Flex>
);
};
<Icons />
`;
};
async function generateStories() {
await generateStory(
"Thumbnails",
"Icon set for Widget Explorer Panel, which provides a visual representation of the widgets.",
);
await generateStory(
"Icons",
"Icon set for Entity Explorer Panel, which provides a visual representation of the widgets.",
);
// eslint-disable-next-line no-console
console.error("\x1b[32mStories generation completed successfully!\x1b[0m");
}
async function generateStory(title: string, description: string) {
await fs.readdir(`./src/components/${title}/`, async (err, files) => {
if (err) {
// eslint-disable-next-line no-console
return console.error(err);
}
let importList = ``;
let componentList = ``;
files.forEach((file) => {
const name = file.replace(".tsx", "");
importList += createImportListString(name, title);
componentList += createComponentListString(name);
});
await fs.writeFile(
`./src/stories/${title}.mdx`,
createStory(title, description, importList, componentList),
"utf8",
function (err) {
// eslint-disable-next-line no-console
if (err) return console.error(err);
},
);
});
}
generateStories();

29
app/client/packages/icons/src/utils/optimizeIcons.ts Normal file
View File

@ -0,0 +1,29 @@
#!/usr/bin/env node
import type { PathLike } from "fs";
import fg from "fast-glob";
import fs from "fs-extra";
import { optimize } from "svgo";
async function optimizeIcons() {
const entries = await fg("./src/icons/**/*.svg");
entries.map(async (filepath: PathLike) => {
await fs.readFile(filepath, "utf-8", async (err, file) => {
if (err) {
// eslint-disable-next-line no-console
return console.error(err);
}
await fs.writeFile(filepath, optimize(file).data, "utf8", function (err) {
// eslint-disable-next-line no-console
if (err) return console.error(err);
});
});
});
// eslint-disable-next-line no-console
console.error("\x1b[32mIcon optimisation completed successfully!\x1b[0m");
}
optimizeIcons();

10
app/client/packages/icons/tsconfig.json Normal file
View File

@ -0,0 +1,10 @@
{
"extends": "../../tsconfig.json",
"include": ["./src/**/*"],
"ts-node": {
"compilerOptions": {
"module": "commonjs",
"types": ["node"]
}
}
}

Some files were not shown because too many files have changed in this diff Show More