Implementation:Langgenius Dify Gen Icons

Knowledge Sources	Langgenius_Dify
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 currentColor for 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 IconBase component
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'

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment