Component Parser Configuration Guide

The component parser (componentParsers) is the core configuration for Design-to-Code, used to map component instances in designs to component tags and properties of the target framework. By writing JSON configurations, you can precisely control behaviors such as tag names, properties, texts, icons, child nodes, etc. in the output code.

Quick Start
Configuration Structure Overview
Global Configuration codeOptions
Import Declarations __imports__
Component Rules
Public Icon Configuration @icons
Public Text Configuration @text
Complete Configuration Example

Quick Start

Minimal Configuration

Render a component named Button in the design as <el-button>:

json

{
  "__imports__": {
    "el-button": { "from": "element-plus", "named": "ElButton" }
  },
  "Button": {
    "name": "el-button"
  }
}

Vue Output:

vue

<template>
  <el-button></el-button>
</template>
<script setup>
import { ElButton } from "element-plus";
</script>

React Output:

jsx

import { ElButton } from "element-plus";

export default function Page() {
  return <ElButton></ElButton>;
}

Component Matching Rules

The key in the configuration (e.g., "Button") will match the component name in the design. Normalization processing is done automatically during matching:

Convert to lowercase
Remove all spaces

Therefore, all of the following names can match the "Button" configuration: Button, button, BUTTON, But ton

It prioritizes using the design component's aliasName; if no alias is set, it uses componentNormName.

Configuration Structure Overview

componentParsers: {
  "__imports__": { ... },       // Global import declarations
  "@icons": { ... },            // Public icon configuration
  "@text": { ... },             // Public text configuration
  "ComponentA": { ... },        // Component rule A
  "ComponentB": { ... },        // Component rule B
  ...
}

Reserved Key	Type	Description
`__imports__`	`Record<string, ImportDeclaration>`	Global import declarations, indexed by tag name
`@icons`	`PublicIconsConfig`	Render config for icon-prefixed layers
`@text`	`PublicTextConfig`	Render config for TEXT nodes

All other keys are treated as component rules (ComponentParserRule).

Global Configuration codeOptions

The following configurations are set in codeOptions and are used in conjunction with componentParsers:

Option	Type	Default	Description
`slot_prefix`	`string`	`"#"`	Slot identifier prefix. Layers starting with this are rendered as slots.
`icon_prefix`	`string \| string[]`	`["@"]`	Icon identifier prefix. Layers starting with this are rendered as icon components.
`ignore_prefixes`	`string[]`	`["_"]`	Ignore prefixes. Layers starting with this are skipped during rendering.
`ignore_component`	`string[]`	—	Ignored component names list. Matching components won't generate files or render.

slot_prefix

When a child layer name starts with the slot_prefix, that layer and its child nodes will be rendered as a slot:

Design Layer Structure:

Dialog
├── _title
├── _body
└── #footer          ← Starts with #
    ├── Button 1
    └── Button 2

Vue Output:

vue

<el-dialog>
  <template #footer>
    <el-button>Cancel</el-button>
    <el-button>Confirm</el-button>
  </template>
</el-dialog>

React Output:

jsx

<ElDialog footer={<><ElButton>Cancel</ElButton><ElButton>Confirm</ElButton></>}>
</ElDialog>

icon_prefix

When a child layer name starts with the icon_prefix, the layer is rendered as an icon component. The prefix is removed and converted to PascalCase as the component name:

Design Layer: @arrow-down → Output Component: <ArrowDown />

Needs to be used in combination with @icons and __imports__ to take effect.

ignore_prefixes

Layers starting with the specified prefixes will be completely skipped and not rendered in the output code. Applicable to decorative layers, guide lines, etc. in designs.

json

{ "ignore_prefixes": ["_", "."] }

Layers like _background and .helper-line will not appear in the output.

ignore_component

Specifies a list of component names. Matching components will not generate independent .vue / .tsx files, and their instances will not be rendered on the page.

json

{ "ignore_component": ["Decorator", "Placeholder"] }

Import Declarations imports

Registers import statements for all used component tags. The key is the output tag name (corresponding to the name field value or icon component name).

json

{
  "__imports__": {
    "el-button": { "from": "element-plus", "named": "ElButton" },
    "el-input": { "from": "element-plus", "named": "ElInput" },
    "SearchIcon": { "from": "@element-plus/icons-vue", "named": "SearchIcon" }
  }
}

ImportDeclaration Fields

Field	Type	Required	Description
`from`	`string`	Yes	Package name, e.g., `"element-plus"`
`named`	`string`	No	Named import, e.g., `"ElButton"`
`default`	`boolean`	No	Whether it is a default import

Generation Examples:

Configuration	Output
`{ "from": "element-plus", "named": "ElButton" }`	`import { ElButton } from "element-plus"`
`{ "from": "antd", "default": true }`	`import antd from "antd"`
`{ "from": "style.css" }`	`import "style.css"`

Component Rules

Each component rule supports the following fields:

Field	Type	Description
`name`	`string`	Output tag name
`props`	`PropsConfig`	Property extraction configuration
`text`	`TextConfig \| TextConfig[]`	Text extraction configuration
`icon`	`IconConfig \| IconConfig[]`	Icon parsing configuration
`attr`	`AttrConfig \| AttrConfig[]`	Style → property mapping
`traverse`	`TraverseConfig`	Child node traversal control
`object`	`ObjectConfig`	Object parser (aggregates child instances into arrays)

name — Tag Renaming

Replaces the design component name with the target framework's component tag name.

json

{
  "Button": {
    "name": "el-button"
  }
}

The Button instance in the design will be output as <el-button> instead of the default <Button>.

Note: The value of name needs a corresponding declaration in __imports__ to generate the import statement.

props — Property Extraction

Extracts values from the design component's variant properties and outputs them as component properties.

typescript

interface PropsConfig {
  filter?: string[];                      // Property values to filter out
  showTrueValue?: boolean;                // Whether to explicitly output true
  customProps?: Record<string, string>;   // Custom property bindings
}

Basic Usage

json

{
  "Button": {
    "name": "el-button",
    "props": {}
  }
}

The Button in the design has variant properties size=large, type=primary:

Vue Output: <el-button size="large" type="primary">

filter — Filtering Default Values

Adds values that do not need to be output to the filter list. "md", "default", and "false" are filtered by default.

json

{
  "Button": {
    "name": "el-button",
    "props": {
      "filter": ["md", "default", "normal"]
    }
  }
}

The variant size=md will be filtered and will not appear in the output.

showTrueValue — Explicit Output for Booleans

By default, boolean properties with a value of true use the shorthand form. Once set to true, the value is explicitly output:

showTrueValue	Vue Output	React Output
`false` (Default)	`<el-checkbox disabled>`	`<ElCheckbox disabled>`
`true`	`<el-checkbox :disabled="true">`	`<ElCheckbox disabled={true}>`

json

{
  "Checkbox": {
    "name": "el-checkbox",
    "props": {
      "showTrueValue": true
    }
  }
}

customProps — Custom Property Bindings

Used in conjunction with the object parser. When the value is in the format of "{name}", it refers to an array aggregated by the child component's object:

json

{
  "Tabs": {
    "name": "el-tabs",
    "props": {
      "customProps": {
        "items": "{tabs}",
        "type": "card"
      }
    }
  }
}

items references the child component's object array named tabs → :items="[...]"
type is not in "{...}" format → Outputs directly as type="card"

text — Text Extraction

Extracts text content from child TEXT nodes of the design component.

typescript

interface TextConfig {
  nodeName?: string;    // Target text layer name
  textAttr?: string;    // Output as a property name (if not set, outputs as children)
}

Case 1: Text as Children

json

{
  "Button": {
    "name": "el-button",
    "text": { "nodeName": "_text" }
  }
}

Design:

Button
└── _text: "Submit"

Output: <el-button>Submit</el-button>

Case 2: Text as Property

json

{
  "Input": {
    "name": "el-input",
    "text": { "nodeName": "placeholder", "textAttr": "placeholder" }
  }
}

Design:

Input
└── placeholder: "Please enter username"

Output: <el-input placeholder="Please enter username" />

Case 3: Multiple Text Extractions

json

{
  "Dialog": {
    "name": "el-dialog",
    "text": [
      { "nodeName": "_title" },
      { "nodeName": "_body" }
    ]
  }
}

Design:

Dialog
├── _title: "Confirm deletion"
└── _body: "This action cannot be undone"

Output: <el-dialog>Confirm deletionThis action cannot be undone</el-dialog>

icon — Icon Parsing

Extracts icons from child layers of the design component, supporting multiple output modes.

typescript

interface IconConfig {
  nodeName: string | { name: string; deepFind?: boolean };
  attrName: string;
  getComponentName?: boolean | "string";
  childComponent?: boolean | {
    parentType?: "slot" | "frame";
    parentTag?: string;
  };
}

Field	Type	Description
`nodeName`	`string \| { name, deepFind }`	Target layer name or lookup rule
`attrName`	`string`	Output property name (e.g., `"icon"`)
`getComponentName`	`boolean \| "string"`	Output as component name (instead of string)
`childComponent`	`boolean \| object`	Output as a child component

Case 1: Icon as String Property (Default)

json

{
  "Button": {
    "name": "el-button",
    "icon": {
      "nodeName": "icon",
      "attrName": "icon"
    }
  }
}

The Button in the design has a child layer icon with the name el-icon-search:

Output: <el-button icon="el-icon-search">

Case 2: Deep Find

When an icon is wrapped in multiple layers of frames, use deepFind to search recursively:

json

{
  "icon": {
    "nodeName": { "name": "icon", "deepFind": true },
    "attrName": "icon"
  }
}

Design:

Button
└── icon-wrapper
    └── search-icon    ← deepFind will recursively find this

Output: <el-button icon="search-icon">

Case 3: getComponentName — Component Reference

getComponentName: true outputs as a bound expression:

json

{
  "icon": {
    "nodeName": "SearchIcon",
    "attrName": "icon",
    "getComponentName": true
  }
}

Framework	Output
Vue	`<el-button :icon="SearchIcon">`
React	`<ElButton icon={<SearchIcon />}>`

getComponentName: "string" outputs as a string (such as in Tag's closable scenario):

json

{
  "icon": {
    "nodeName": "close",
    "attrName": "closable",
    "getComponentName": "string"
  }
}

Output: <el-tag closable="close"> (Outputs attribute value if layer exists)

Case 4: childComponent — Icon as Child Component

4a. Direct Child Component

json

{
  "icon": {
    "nodeName": "Star",
    "attrName": "icon",
    "childComponent": true
  }
}

Output:

vue

<el-button>
  <Star />
</el-button>

4b. Wrapped in slot (Vue only)

json

{
  "icon": {
    "nodeName": "Close",
    "attrName": "icon",
    "childComponent": { "parentType": "slot", "parentTag": "template" }
  }
}

Vue Output:

vue

<el-button>
  <template #icon>
    <Close />
  </template>
</el-button>

4c. Wrapped in frame

json

{
  "icon": {
    "nodeName": "Search",
    "attrName": "icon",
    "childComponent": { "parentType": "frame", "parentTag": "div" }
  }
}

Output:

vue

<el-button>
  <div>
    <Search />
  </div>
</el-button>

Multiple Icon Extractions

Configuring as an array can extract multiple icon slots simultaneously:

json

{
  "Input": {
    "name": "el-input",
    "icon": [
      { "nodeName": "prefix-icon", "attrName": "prefix-icon" },
      { "nodeName": "suffix-icon", "attrName": "suffix-icon" }
    ]
  }
}

Output: <el-input prefix-icon="search" suffix-icon="clear" />

attr — Style Mapping Properties

Exracts values from the design component's visual styles and converts them to component properties via a mapping table.

typescript

interface AttrConfig {
  valueFrom: "background" | "borderColor" | "color" | "radius"
           | "borderStyle" | "opacity" | "gap" | "padding" | "boxShadow";
  attrName: string;
  mappings: Record<string, string>;
}

Supported Style Sources for valueFrom

valueFrom	Source	Common Scenarios
`"background"`	Fill color (hex value of the first fillPaint)	Button types, status colors
`"borderColor"`	Stroke color (hex value of the first strokePaint)	Input statuses, border styles
`"color"`	Text color or fill color	Text color mappings
`"radius"`	Corner radius value	Circular buttons, card shapes
`"borderStyle"`	Solid/dashed stroke (`"solid"` or `"dashed"`)	Tab types
`"opacity"`	Opacity (0~1)	Disabled states
`"gap"`	Auto layout gap	Compact/loose layouts
`"padding"`	Padding	Size mapping
`"boxShadow"`	Shadow type (`"shadow"`/`"inner"`/`""`/`"both"`)	Hover and inset effects

Case 1: Background Color → Button Type

json

{
  "Button": {
    "name": "el-button",
    "attr": {
      "valueFrom": "background",
      "attrName": "type",
      "mappings": {
        "#409EFF": "primary",
        "#67C23A": "success",
        "#E6A23C": "warning",
        "#F56C6C": "danger",
        "#909399": "info"
      }
    }
  }
}

Button in the design has background #409EFF → Output: <el-button type="primary">

Case 2: Radius → Round Button

json

{
  "attr": {
    "valueFrom": "radius",
    "attrName": "round",
    "mappings": {
      "20": "true",
      "50": "true"
    }
  }
}

When radius is 20 or 50 → Output: <el-button round="true">

Case 3: Stroke Color → Input Status

json

{
  "attr": {
    "valueFrom": "borderColor",
    "attrName": "status",
    "mappings": {
      "#F56C6C": "error",
      "#67C23A": "success"
    }
  }
}

Multiple attr Rules

Configuring as an array extracts properties from multiple style dimensions:

json

{
  "Button": {
    "name": "el-button",
    "attr": [
      {
        "valueFrom": "background",
        "attrName": "type",
        "mappings": { "#409EFF": "primary" }
      },
      {
        "valueFrom": "radius",
        "attrName": "round",
        "mappings": { "20": "true" }
      }
    ]
  }
}

Colors in mappings use uppercase hex format (e.g., #409EFF). The system automatically converts extracted colors to uppercase before matching.

traverse — Child Node Traversal

Controls whether child nodes of the component participate in code generation.

typescript

interface TraverseConfig {
  filter?: string;   // Name of child node to filter
}

Behavior Overview

Configuration	Behavior
No `traverse` defined	Do not traverse — Controlled completely by text/icon/attr
`traverse: {}`	Traverse all — Child instances recursively rendered
`traverse: { filter: "_arrow" }`	Traverse and filter — Skips nodes named `_arrow`

Case 1: No Traversal (Default)

json

{
  "Button": {
    "name": "el-button",
    "text": { "nodeName": "_text" }
  }
}

All child nodes of Button are not rendered as child elements, only pulling text from _text.

Case 2: Traverse Child Nodes

json

{
  "Badge": {
    "name": "el-badge",
    "text": { "nodeName": "_value" },
    "traverse": {}
  }
}

Child instances of Badge (e.g., a nested Button) will be rendered normally:

vue

<el-badge>
  <el-button>New Msg</el-button>
</el-badge>

Case 3: Traverse and Filter

json

{
  "Select": {
    "name": "el-select",
    "text": { "nodeName": "placeholder", "textAttr": "placeholder" },
    "traverse": { "filter": "_arrow" }
  }
}

The _arrow decoration layer inside Select is filtered, while Option child instances render normally:

vue

<el-select placeholder="Please select">
  <el-option>Option 1</el-option>
  <el-option>Option 2</el-option>
</el-select>

Note: traverse works together with slot_prefix and ignore_prefixes. Execution priority:
slot_prefix (#) → Rendered as slot
object aggregation → Aggregated as data object
ignore_prefixes (_) → Skipped
Normal children → Recursively rendered

object — Object Parser

Aggregates child component instances into array data, binding them to parent component properties. Best for list-type components like Tabs, Menus, Steps, etc.

typescript

interface ObjectConfig {
  name: string;
  mappings: Record<string, string | ObjectFieldMapping>;
}

interface ObjectFieldMapping {
  text?: TextConfig;    // Reuse text extraction
  icon?: IconConfig;    // Reuse icon extraction
  attr?: AttrConfig;    // Reuse style mapping
}

How it Works

Child rules configure object to define how to extract fields from each instance.
Parent rules configure customProps: { propName: "{name}" } referencing the aggregated array.
Runtime: Matching object child instances do not render tags but aggregate into array data.

mapping Value Types

Type	Value	Behavior
Empty string `""`	Auto-increment	Outputs `"1"`, `"2"`, `"3"`, etc.
Fixed string	e.g. `"default"`	Same fixed value for each item
`{ text: TextConfig }`	Text Extractor	Extracts TEXT node from child instance
`{ icon: IconConfig }`	Icon Extractor	Extracts icon from child instance
`{ attr: AttrConfig }`	Style Extractor	Extracts mapped value from style

Full Case: Tabs + TabItem

Config:

json

{
  "__imports__": {
    "el-tabs": { "from": "element-plus", "named": "ElTabs" }
  },
  "Tabs": {
    "name": "el-tabs",
    "props": {
      "customProps": {
        "items": "{tabs}"
      }
    },
    "traverse": {}
  },
  "TabItem": {
    "object": {
      "name": "tabs",
      "mappings": {
        "key": "",
        "label": {
          "text": { "nodeName": "_label" }
        }
      }
    }
  }
}

Design Structure:

Tabs
├── TabItem 1
│   └── _label: "Home"
├── TabItem 2
│   └── _label: "Settings"
└── TabItem 3
    └── _label: "About"

Vue Output:

vue

<el-tabs :items="[{ key: '1', label: 'Home' }, { key: '2', label: 'Settings' }, { key: '3', label: 'About' }]">
</el-tabs>

React Output:

jsx

<ElTabs items={[{ key: '1', label: 'Home' }, { key: '2', label: 'Settings' }, { key: '3', label: 'About' }]}>
</ElTabs>

Note: <TabItem> tags do not appear in the output, child instances are grouped into the items array.

Advanced Case: Using attr Extraction

json

{
  "StepItem": {
    "object": {
      "name": "steps",
      "mappings": {
        "key": "",
        "title": {
          "text": { "nodeName": "_title" }
        },
        "status": {
          "attr": {
            "valueFrom": "background",
            "attrName": "status",
            "mappings": {
              "#409EFF": "process",
              "#67C23A": "finish",
              "#C0C4CC": "wait"
            }
          }
        }
      }
    }
  }
}

Public Icon Configuration @icons

Configures how layers prefixed with icon_prefix (default @) render as icon components.

json

{
  "@icons": {
    "width": { "stylePrefix": "fontSize" },
    "background": { "stylePrefix": "color" }
  }
}

Key	Source	Description
`"width"`	Width → px	Often mapped to `fontSize`
`"height"`	Height → px	Often mapped to `height`
`"fontSize"`	Text size → px
`"background"`	Fill hex	Often mapped to `color`
`"color"`	Fill hex
`"opacity"`	Opacity

PublicIconRenderOption Fields

Field	Type	Description
`stylePrefix`	`string`	Output property name (e.g. `"fontSize"` → `fontSize="24px"`)
`filter`	`string \| string[]`	Filters specified values (does not output)
`classPrefix`	`string`	Outputs as class prefix
`getCssVar`	`boolean`	Outputs as CSS variable

Workflow

Layer @arrow-down matches icon_prefix.
Prefix removed, PascalCase applied → ArrowDown.
Locate component from __imports__.
Extract style props per @icons.

Design:

@arrow-down  (width: 24, fill: #333333)

Output:

vue

<ArrowDown fontSize="24px" color="#333333" />

Public Text Configuration @text

Configures all TEXT nodes to render as specified text components, extracting typography styles into properties.

json

{
  "@text": {
    "name": "Typography",
    "fontSize": {},
    "fontWeight": { "filter": ["400"] },
    "color": {}
  }
}

Field	Description
`name`	Component name (`"Typography"`), must be in `__imports__`
`fontSize`	Extract font size → `fontSize="14px"`
`fontWeight`	Extract font weight → `fontWeight="700"`
`color`	Extract text color → `color="#333333"`
`textAlign`	Extract text alignment → `textAlign="center"`
`lineHeight`	Extract line height → `lineHeight="20px"`
`letterSpacing`	Extract letter spacing → `letterSpacing="0.5px"`

Property filter skips defaults (e.g. fontWeight: 400).

Design:

TEXT: "Title" (fontSize: 16, fontWeight: 700, color: #333333)

Output:

vue

<Typography fontSize="16px" fontWeight="700" color="#333333">Title</Typography>

Complete Configuration Example

Below is a complete Element Plus parser setup covering major features:

json

{
  "__imports__": {
    "el-button": { "from": "element-plus", "named": "ElButton" },
    "el-input": { "from": "element-plus", "named": "ElInput" },
    "el-select": { "from": "element-plus", "named": "ElSelect" },
    "el-option": { "from": "element-plus", "named": "ElOption" },
    "el-checkbox": { "from": "element-plus", "named": "ElCheckbox" },
    "el-radio": { "from": "element-plus", "named": "ElRadio" },
    "el-switch": { "from": "element-plus", "named": "ElSwitch" },
    "el-tag": { "from": "element-plus", "named": "ElTag" },
    "el-dialog": { "from": "element-plus", "named": "ElDialog" },
    "el-tabs": { "from": "element-plus", "named": "ElTabs" }
  },

  "@icons": {
    "width": { "stylePrefix": "fontSize" },
    "background": { "stylePrefix": "color" }
  },

  "@text": {
    "name": "Typography",
    "fontSize": {},
    "fontWeight": { "filter": ["400"] },
    "color": {}
  },

  "Button": {
    "name": "el-button",
    "props": { "filter": ["md", "default"] },
    "text": { "nodeName": "_text" },
    "icon": {
      "nodeName": { "name": "icon", "deepFind": true },
      "attrName": "icon"
    },
    "attr": [
      {
        "valueFrom": "background",
        "attrName": "type",
        "mappings": {
          "#409EFF": "primary",
          "#67C23A": "success",
          "#E6A23C": "warning",
          "#F56C6C": "danger",
          "#909399": "info"
        }
      },
      {
        "valueFrom": "radius",
        "attrName": "round",
        "mappings": { "20": "true", "50": "true" }
      }
    ]
  },

  "Input": {
    "name": "el-input",
    "props": {},
    "text": { "nodeName": "placeholder", "textAttr": "placeholder" },
    "icon": [
      { "nodeName": { "name": "prefix-icon", "deepFind": true }, "attrName": "prefix-icon" },
      { "nodeName": { "name": "suffix-icon", "deepFind": true }, "attrName": "suffix-icon" }
    ],
    "attr": {
      "valueFrom": "borderColor",
      "attrName": "status",
      "mappings": {
        "#F56C6C": "error",
        "#67C23A": "success"
      }
    }
  },

  "Select": {
    "name": "el-select",
    "props": { "filter": ["md", "default"] },
    "text": { "nodeName": "placeholder", "textAttr": "placeholder" },
    "traverse": { "filter": "_arrow" }
  },

  "Option": {
    "name": "el-option",
    "props": {},
    "text": { "nodeName": "_text" }
  },

  "Checkbox": {
    "name": "el-checkbox",
    "props": { "filter": ["default"], "showTrueValue": true },
    "text": { "nodeName": "_label" },
    "attr": {
      "valueFrom": "background",
      "attrName": "checked",
      "mappings": { "#409EFF": "true" }
    }
  },

  "Switch": {
    "name": "el-switch",
    "props": {},
    "attr": {
      "valueFrom": "background",
      "attrName": "model-value",
      "mappings": {
        "#409EFF": "true",
        "#DCDFE6": "false"
      }
    }
  },

  "Tag": {
    "name": "el-tag",
    "props": { "filter": ["md", "default"] },
    "text": { "nodeName": "_text" },
    "attr": [
      {
        "valueFrom": "background",
        "attrName": "type",
        "mappings": {
          "#409EFF": "primary",
          "#67C23A": "success",
          "#E6A23C": "warning",
          "#F56C6C": "danger",
          "#909399": "info"
        }
      },
      {
        "valueFrom": "radius",
        "attrName": "round",
        "mappings": { "20": "true" }
      }
    ],
    "icon": {
      "nodeName": "close",
      "attrName": "closable",
      "getComponentName": "string"
    }
  },

  "Dialog": {
    "name": "el-dialog",
    "props": { "filter": ["default"] },
    "text": [
      { "nodeName": "_title" },
      { "nodeName": "_body" }
    ],
    "traverse": { "filter": "_mask" }
  },

  "Tabs": {
    "name": "el-tabs",
    "props": {
      "customProps": { "items": "{tabs}" }
    },
    "traverse": {}
  },

  "TabItem": {
    "object": {
      "name": "tabs",
      "mappings": {
        "key": "",
        "label": { "text": { "nodeName": "_label" } }
      }
    }
  }
}

Equivalent codeOptions:

json

{
  "slot_prefix": "#",
  "icon_prefix": ["@"],
  "ignore_prefixes": ["_"],
  "ignore_component": ["Decorator"],
  "componentParsers": { ... }
}

Field Reference Sheet

ComponentParserRule

Field	Type	Description	Example
`name`	`string`	Output tag name	`"el-button"`
`props`	`PropsConfig`	Variant prop extraction	`{ "filter": ["md"] }`
`props.filter`	`string[]`	Filters out prop values	`["md", "default"]`
`props.showTrueValue`	`boolean`	Explicitly outputs true	`true`
`props.customProps`	`Record<string, string>`	Custom property bindings	`{ "items": "{tabs}" }`
`text`	`TextConfig \| TextConfig[]`	Text extraction	`{ "nodeName": "_text" }`
`text.nodeName`	`string`	Target text layer name	`"_text"`
`text.textAttr`	`string`	Output as property name	`"placeholder"`
`icon`	`IconConfig \| IconConfig[]`	Icon parsing	`{ "nodeName": "icon", "attrName": "icon" }`
`icon.nodeName`	`string \| { name, deepFind }`	Icon layer lookup rule	`{ "name": "icon", "deepFind": true }`
`icon.attrName`	`string`	Output property name	`"icon"`
`icon.getComponentName`	`boolean \| "string"`	Output as component name	`true`
`icon.childComponent`	`boolean \| { parentType, parentTag }`	Output child component	`{ "parentType": "slot", "parentTag": "template" }`
`attr`	`AttrConfig \| AttrConfig[]`	Style mapping	`{ "valueFrom": "background", ... }`
`attr.valueFrom`	`string`	Style source	`"background"`
`attr.attrName`	`string`	Output property name	`"type"`
`attr.mappings`	`Record<string, string>`	Value mapping table	`{ "#409EFF": "primary" }`
`traverse`	`TraverseConfig`	Child traversal control	`{ "filter": "_arrow" }`
`traverse.filter`	`string`	Filtered child nodes	`"_mask"`
`object`	`ObjectConfig`	Object parser	`{ "name": "tabs", "mappings": {...} }`
`object.name`	`string`	Array reference name	`"tabs"`
`object.mappings`	`Record<string, string \| ObjectFieldMapping>`	Field mapping	`{ "key": "", "label": { "text": {...} } }`

codeOptions

Field	Type	Default	Description
`slot_prefix`	`string`	`"#"`	Slot prefix
`icon_prefix`	`string \| string[]`	`["@"]`	Icon prefix
`ignore_prefixes`	`string[]`	`["_"]`	Ignored prefixes
`ignore_component`	`string[]`	—	Ignored component list

Component Parser Configuration Guide ​

Table of Contents ​

Quick Start ​

Minimal Configuration ​

Component Matching Rules ​

Configuration Structure Overview ​

Global Configuration codeOptions ​

slot_prefix ​

icon_prefix ​

ignore_prefixes ​

ignore_component ​

Import Declarations __imports__ ​

ImportDeclaration Fields ​

Component Rules ​

name — Tag Renaming ​

props — Property Extraction ​

Basic Usage ​

filter — Filtering Default Values ​

showTrueValue — Explicit Output for Booleans ​

customProps — Custom Property Bindings ​

text — Text Extraction ​

Case 1: Text as Children ​

Case 2: Text as Property ​

Case 3: Multiple Text Extractions ​

icon — Icon Parsing ​

Case 1: Icon as String Property (Default) ​

Case 2: Deep Find ​

Case 3: getComponentName — Component Reference ​

Case 4: childComponent — Icon as Child Component ​

4a. Direct Child Component ​

4b. Wrapped in slot (Vue only) ​

4c. Wrapped in frame ​

Multiple Icon Extractions ​

attr — Style Mapping Properties ​

Supported Style Sources for valueFrom ​

Case 1: Background Color → Button Type ​

Case 2: Radius → Round Button ​

Case 3: Stroke Color → Input Status ​

Multiple attr Rules ​

traverse — Child Node Traversal ​

Behavior Overview ​

Case 1: No Traversal (Default) ​

Case 2: Traverse Child Nodes ​

Case 3: Traverse and Filter ​

object — Object Parser ​

How it Works ​

mapping Value Types ​

Full Case: Tabs + TabItem ​

Advanced Case: Using attr Extraction ​

Public Icon Configuration @icons ​

PublicIconRenderOption Fields ​

Workflow ​

Public Text Configuration @text ​

Complete Configuration Example ​

Field Reference Sheet ​

ComponentParserRule ​

codeOptions ​

Component Parser Configuration Guide

Table of Contents

Quick Start

Minimal Configuration

Component Matching Rules

Configuration Structure Overview

Global Configuration codeOptions

slot_prefix

icon_prefix

ignore_prefixes

ignore_component

Import Declarations imports

ImportDeclaration Fields

Component Rules

name — Tag Renaming

props — Property Extraction

Basic Usage

filter — Filtering Default Values

showTrueValue — Explicit Output for Booleans

customProps — Custom Property Bindings

text — Text Extraction

Case 1: Text as Children

Case 2: Text as Property

Case 3: Multiple Text Extractions

icon — Icon Parsing

Case 1: Icon as String Property (Default)

Case 2: Deep Find

Case 3: getComponentName — Component Reference

Case 4: childComponent — Icon as Child Component

4a. Direct Child Component

4b. Wrapped in slot (Vue only)

4c. Wrapped in frame

Multiple Icon Extractions

attr — Style Mapping Properties

Supported Style Sources for valueFrom

Case 1: Background Color → Button Type

Case 2: Radius → Round Button

Case 3: Stroke Color → Input Status

Multiple attr Rules

traverse — Child Node Traversal

Behavior Overview

Case 1: No Traversal (Default)

Case 2: Traverse Child Nodes

Case 3: Traverse and Filter

object — Object Parser

How it Works

mapping Value Types

Full Case: Tabs + TabItem

Advanced Case: Using attr Extraction

Public Icon Configuration @icons

PublicIconRenderOption Fields

Workflow

Public Text Configuration @text

Complete Configuration Example

Field Reference Sheet

ComponentParserRule

codeOptions