9e214c2c3c
## 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
23 lines
974 B
Markdown
23 lines
974 B
Markdown
# 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
|