Implementation:Langgenius Dify Gen Icons
| Knowledge Sources | |
|---|---|
| Domains | Frontend, Build_Tools |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
Code generation script that converts SVG and PNG icon assets into React components with JSON data files and barrel exports.
Description
gen-icons.mjs is an asset pipeline script that walks the icon asset directories and generates ready-to-use React components. It processes three asset categories from the web/app/components/base/icons/assets/ directory:
- public -- SVG icons with original fill/stroke colors preserved
- vender -- SVG icons with fill and stroke colors replaced by
currentColorfor CSS color inheritance - image -- PNG image assets wrapped in CSS background components
For each SVG file, the script:
- Parses the SVG XML using @rgrove/parse-xml into a JSON structure
- Optionally replaces fill and stroke attributes with
currentColor(for the vender directory) - Filters out text nodes from the SVG children
- Writes a JSON data file containing the SVG structure and component name
- Writes a React TSX component that renders the SVG via the shared
IconBasecomponent - Appends a re-export to the directory's index.ts barrel file
For each PNG file, the script:
- Writes a CSS module with a wrapper class using the image as a background
- Writes a React TSX component rendering a
<span>with the CSS module class - Appends a re-export to the directory's index.ts barrel file
Component names are derived from filenames using camelCase conversion with the first letter capitalized. The entire src/ output directory is cleared and regenerated on each run.
Usage
Run this script whenever SVG or PNG icon assets are added, modified, or removed in the assets directory. The generated components should be committed to the repository.
Code Reference
Source Location
- Repository: Langgenius_Dify
- File: web/scripts/gen-icons.mjs
- Lines: 1-175
Signature
const generateDir = async (currentPath) => { ... }
const processSvgStructure = (svgStructure, replaceFillOrStrokeColor) => { ... }
const generateSvgComponent = async (fileHandle, entry, pathList, replaceFillOrStrokeColor) => { ... }
const generateImageComponent = async (entry, pathList) => { ... }
const walk = async (entry, pathList, replaceFillOrStrokeColor) => { ... }
Import
// CLI script - run directly
node web/scripts/gen-icons.mjs
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| assets/public/**/*.svg | SVG files | No | Public SVG icons with original colors preserved |
| assets/vender/**/*.svg | SVG files | No | Vendor SVG icons; fill and stroke are replaced with currentColor
|
| assets/image/**/*.png | PNG files | No | Image assets rendered as CSS background components |
Outputs
| Name | Type | Description |
|---|---|---|
| src/<path>/<Name>.json | JSON file | SVG structure data consumed by the IconBase component |
| src/<path>/<Name>.tsx | TSX file | React component wrapping IconBase (SVG) or a styled span (PNG) |
| src/<path>/<Name>.module.css | CSS module | Background-image styles for PNG image components |
| src/<path>/index.ts | TypeScript file | Barrel export aggregating all components in the directory |
All output files are written under web/app/components/base/icons/src/.
Usage Examples
Generate all icon components
node web/scripts/gen-icons.mjs
Typical workflow after adding a new SVG
# 1. Place the SVG in the appropriate assets directory
cp my-icon.svg web/app/components/base/icons/assets/public/
# 2. Regenerate components
node web/scripts/gen-icons.mjs
# 3. Import the generated component
# import { MyIcon } from '@/app/components/base/icons/src/public'