opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-13 08:57:28 +08:00
Code Issues Packages Projects Releases Wiki Activity
14be7dc9f1
dify/packages/iconify-collections/README.md
Jingyi-Dify 14be7dc9f1 feat: add integrations tools page with prebuilt icons 
- add the integrations page sidebar with collapsible icon-only navigation and Figma-aligned marketplace card
- move custom integration SVGs into the iconify collection and document the Tailwind i-custom workflow
- preserve source SVG collection dimensions when flattening generated icon data so existing main nav icons keep their 20x20 viewBox
- add an icon dimension guard for layout-sensitive generated icons
- update model provider routing, i18n, and focused frontend tests
2026-05-07 17:53:38 -07:00

1.9 KiB
Raw Blame History

@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 with currentColor.

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.