15292ba527
Update active main nav icon positioning from the refreshed Figma assets, remove the transparent active border that caused nav item jitter, and route mobile common layout through the new MainNav instead of the legacy Header. Also align workspace plan actions with the new UI contract by showing Upgrade for sandbox workspaces and View Plan for paid workspaces, both opening the pricing modal. |
||
|---|---|---|
| .. | ||
| assets | ||
| custom-public | ||
| custom-vender | ||
| scripts | ||
| package.json | ||
| README.md | ||
@dify/iconify-collections
Pre-generated Iconify collections for Dify custom SVG icons. The web app imports these collections from this package so Tailwind does not need to scan and build custom SVG icon data from the old web/app/components/base/icons/src tree during dev startup.
Adding Custom SVG Icons
Add new SVG source files under one of these directories:
assets/public/...for multi-color or public brand-like icons.assets/vender/...for UI vendor icons that should render withcurrentColor.
After adding or changing SVG files, regenerate the packaged collections:
pnpm --filter @dify/iconify-collections generate
Then run the dimension guard:
pnpm --filter @dify/iconify-collections check:dimensions
This protects existing icon groups with layout-sensitive intrinsic sizes, such as the main-nav-* icons that must remain 20x20 after collection flattening.
Commit both the SVG source files and the generated package files under custom-public/ or custom-vender/.
Restart the web dev server after regenerating icons. Tailwind loads this plugin collection at startup, so an already-running dev server may not render newly-added i-custom-* classes until it restarts.
Use the generated icons through Tailwind icon classes in frontend code. For example:
assets/vender/integrations/mcp.svg
becomes:
<span aria-hidden className="i-custom-vender-integrations-mcp size-4" />
Do not add new generated React icon components or JSON files under web/app/components/base/icons/src/... for new custom SVG icons. That path is legacy; new custom icons should flow through this package and be consumed as i-custom-* classes.
When reviewing generated icons.json diffs, check that unrelated existing icon groups did not lose or change their intrinsic width and height. If a group is layout-sensitive, add it to scripts/check-icon-dimensions.ts.