@antv/infographic 0.0.1-beta.1

package/lib/designs/utils/hierarchy-color.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHierarchyColorIndexes = getHierarchyColorIndexes;
+exports.extractHierarchyNode = extractHierarchyNode;
+/**
+ * 根据层级着色模式获取节点的颜色索引
+ *
+ * @param node - 层级节点信息
+ * @param mode - 着色模式
+ * @returns 用于获取调色板颜色的索引数组
+ *
+ * @example
+ * ```typescript
+ * // 按层级着色
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2] }, 'level');
+ * // 返回 [2]，表示使用第3个层级的颜色
+ *
+ * // 按分支着色
+ * const indexes = getHierarchyColorIndexes({ depth: 3, originalIndexes: [0, 1, 2, 0] }, 'branch');
+ * // 返回 [2]，表示继承第2个二级分支的颜色
+ *
+ * // 按节点着色（层级路径）
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2] }, 'node');
+ * // 返回 [0, 1, 2]，使用完整路径
+ *
+ * // 按节点着色（扁平序号）
+ * const indexes = getHierarchyColorIndexes({ depth: 2, originalIndexes: [0, 1, 2], flatIndex: 5 }, 'node-flat');
+ * // 返回 [5]，使用扁平化的序号
+ * ```
+ */
+function getHierarchyColorIndexes(node, mode) {
+    const { depth, originalIndexes, flatIndex } = node;
+    switch (mode) {
+        case 'level':
+            // 按层级着色：同一层级使用相同颜色
+            // 层级 0 → 调色板[0]
+            // 层级 1 → 调色板[1]
+            // 层级 2 → 调色板[2]
+            // ...
+            return [depth];
+        case 'branch':
+            // 按分支着色：
+            // - 根节点（层级0）使用调色板[0]
+            // - 二级节点（层级1）及其子树按分支使用不同颜色
+            //   第1个二级分支 → 调色板[1]
+            //   第2个二级分支 → 调色板[2]
+            //   第3个二级分支 → 调色板[3]
+            //   ...
+            if (depth === 0) {
+                // 根节点固定使用颜色 0
+                return [0];
+            }
+            else if (depth === 1) {
+                // 二级节点使用其在根节点子节点中的索引 + 1
+                return [originalIndexes[1] + 1];
+            }
+            else {
+                // 更深层级的节点继承其二级祖先的颜色
+                // originalIndexes[1] 是二级祖先在根节点子节点中的索引
+                return [originalIndexes[1] + 1];
+            }
+        case 'node':
+            // 按节点着色：每个节点使用不同颜色
+            // 使用完整的节点索引路径作为颜色索引
+            // 这样可以确保每个节点获得独特的颜色
+            return originalIndexes;
+        case 'node-flat':
+            // 按节点扁平序号着色：使用树的遍历序号
+            // 如果提供了 flatIndex，直接使用
+            // 否则使用第一级索引作为后备方案
+            if (flatIndex !== undefined) {
+                return [flatIndex];
+            }
+            // 后备方案：如果没有提供 flatIndex，使用完整路径
+            console.warn('node-flat mode requires flatIndex in HierarchyNode, falling back to originalIndexes');
+            return originalIndexes;
+        default:
+            // 默认返回根节点颜色
+            return [0];
+    }
+}
+/**
+ * 从 d3 hierarchy 节点中提取层级节点信息
+ *
+ * @param d3Node - d3.hierarchy 生成的节点对象
+ * @returns 层级节点信息
+ *
+ * @example
+ * ```typescript
+ * const root = d3.hierarchy(data);
+ * const nodes = root.descendants();
+ *
+ * nodes.forEach(node => {
+ *   const hierarchyNode = extractHierarchyNode(node);
+ *   const colorIndexes = getHierarchyColorIndexes(hierarchyNode, 'branch');
+ *   const color = getPaletteColor(options, colorIndexes);
+ * });
+ * ```
+ */
+function extractHierarchyNode(d3Node) {
+    return {
+        depth: d3Node.depth,
+        originalIndexes: d3Node.data._originalIndex || [],
+    };
+}

package/lib/designs/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './color';
+export * from './hierarchy-color';
+export * from './item';

package/lib/designs/utils/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./color"), exports);
+__exportStar(require("./hierarchy-color"), exports);
+__exportStar(require("./item"), exports);

package/lib/designs/utils/item.d.ts

@@ -0,0 +1,14 @@
+import type { BaseItemProps } from '../items/types';
+import { BaseStructureProps } from '../structures';
+export declare function getItemId(indexes: number[], type: 'static' | 'shape' | 'def' | 'shapes-group', appendix?: string): string;
+/**
+ * 从属性中拆分出组件属性和容器属性
+ * @param props
+ * @param extKeys
+ * @returns
+ */
+export declare function getItemProps<T extends BaseItemProps>(props: T, extKeys?: string[]): readonly [T, Record<string, any>];
+/**
+ * 针对层级结构，获取当前层级对应的组件
+ */
+export declare function getItemComponent(Items: BaseStructureProps['Items'], level?: number): import("@antv/infographic-jsx").ComponentType<Omit<BaseItemProps, "themeColors">>;

package/lib/designs/utils/item.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getItemId = getItemId;
+exports.getItemProps = getItemProps;
+exports.getItemComponent = getItemComponent;
+const utils_1 = require("../../utils");
+function getItemId(indexes, type, appendix) {
+    return `item-${(0, utils_1.getItemKeyFromIndexes)(indexes)}-${type}` + appendix
+        ? `-${appendix}`
+        : '';
+}
+/**
+ * 从属性中拆分出组件属性和容器属性
+ * @param props
+ * @param extKeys
+ * @returns
+ */
+function getItemProps(props, extKeys = []) {
+    const restProps = { ...props };
+    const extProps = {};
+    const keys = [
+        'indexes',
+        'data',
+        'datum',
+        'positionH',
+        'positionV',
+        'themeColors',
+        'valueFormatter',
+        ...extKeys,
+    ];
+    keys.forEach((key) => {
+        if (key in restProps) {
+            extProps[key] = restProps[key];
+            delete restProps[key];
+        }
+    });
+    // keep x, y, width, height in rest
+    ['x', 'y', 'width', 'height'].forEach((key) => {
+        if (key in props) {
+            restProps[key] = props[key];
+        }
+    });
+    return [extProps, restProps];
+}
+/**
+ * 针对层级结构，获取当前层级对应的组件
+ */
+function getItemComponent(Items, level) {
+    if (Items.length === 0)
+        return () => null;
+    if (level === undefined)
+        return Items[0];
+    return Items[level] ?? Items[0];
+}

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export * from '@antv/infographic-jsx';
+export * from './designs';
+export { getItemId, getItemProps, getThemeColors } from './designs/utils';
+export type { InfographicOptions, ParsedInfographicOptions } from './options';
+export * from './renderer';
+export { loadSVGResource, registerResourceLoader } from './resource';
+export { Infographic } from './runtime';
+export { getTemplate, getTemplates, registerTemplate } from './templates';
+export type { ParsedTemplateOptions, TemplateOptions } from './templates';
+export { getTheme, getThemes, registerTheme } from './themes';
+export type { ThemeColors, ThemeConfig, ThemeSeed } from './themes';
+export type * from './types';
+export { parseSVG } from './utils';

package/lib/index.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseSVG = exports.registerTheme = exports.getThemes = exports.getTheme = exports.registerTemplate = exports.getTemplates = exports.getTemplate = exports.Infographic = exports.registerResourceLoader = exports.loadSVGResource = exports.getThemeColors = exports.getItemProps = exports.getItemId = void 0;
+__exportStar(require("@antv/infographic-jsx"), exports);
+__exportStar(require("./designs"), exports);
+var utils_1 = require("./designs/utils");
+Object.defineProperty(exports, "getItemId", { enumerable: true, get: function () { return utils_1.getItemId; } });
+Object.defineProperty(exports, "getItemProps", { enumerable: true, get: function () { return utils_1.getItemProps; } });
+Object.defineProperty(exports, "getThemeColors", { enumerable: true, get: function () { return utils_1.getThemeColors; } });
+__exportStar(require("./renderer"), exports);
+var resource_1 = require("./resource");
+Object.defineProperty(exports, "loadSVGResource", { enumerable: true, get: function () { return resource_1.loadSVGResource; } });
+Object.defineProperty(exports, "registerResourceLoader", { enumerable: true, get: function () { return resource_1.registerResourceLoader; } });
+var runtime_1 = require("./runtime");
+Object.defineProperty(exports, "Infographic", { enumerable: true, get: function () { return runtime_1.Infographic; } });
+var templates_1 = require("./templates");
+Object.defineProperty(exports, "getTemplate", { enumerable: true, get: function () { return templates_1.getTemplate; } });
+Object.defineProperty(exports, "getTemplates", { enumerable: true, get: function () { return templates_1.getTemplates; } });
+Object.defineProperty(exports, "registerTemplate", { enumerable: true, get: function () { return templates_1.registerTemplate; } });
+var themes_1 = require("./themes");
+Object.defineProperty(exports, "getTheme", { enumerable: true, get: function () { return themes_1.getTheme; } });
+Object.defineProperty(exports, "getThemes", { enumerable: true, get: function () { return themes_1.getThemes; } });
+Object.defineProperty(exports, "registerTheme", { enumerable: true, get: function () { return themes_1.registerTheme; } });
+var utils_2 = require("./utils");
+Object.defineProperty(exports, "parseSVG", { enumerable: true, get: function () { return utils_2.parseSVG; } });

package/lib/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export * from '@antv/infographic-jsx/jsx-runtime';

package/lib/jsx-runtime.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("@antv/infographic-jsx/jsx-runtime"), exports);

package/lib/options/index.d.ts

@@ -0,0 +1,2 @@
+export { parseOptions } from './parser';
+export type * from './types';

package/lib/options/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseOptions = void 0;
+var parser_1 = require("./parser");
+Object.defineProperty(exports, "parseOptions", { enumerable: true, get: function () { return parser_1.parseOptions; } });

package/lib/options/parser.d.ts

@@ -0,0 +1,2 @@
+import type { InfographicOptions, ParsedInfographicOptions } from './types';
+export declare function parseOptions(options: InfographicOptions): ParsedInfographicOptions;

package/lib/options/parser.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseOptions = parseOptions;
+const designs_1 = require("../designs");
+const renderer_1 = require("../renderer");
+const themes_1 = require("../themes");
+const utils_1 = require("../utils");
+function parseOptions(options) {
+    const { container = '#container', padding = 0, template, design, theme, themeConfig, ...restOptions } = options;
+    const parsedContainer = typeof container === 'string'
+        ? document.querySelector(container) || document.createElement('div')
+        : container;
+    const templateOptions = template
+        ? (0, designs_1.getTemplate)(template) || {}
+        : {};
+    const { design: templateDesign, ...restTemplateOptions } = templateOptions;
+    return {
+        ...restTemplateOptions,
+        ...restOptions,
+        container: parsedContainer,
+        padding: (0, utils_1.parsePadding)(padding),
+        template,
+        design: parseDesign({ ...templateDesign, ...design }, options),
+        theme,
+        themeConfig: parseTheme(theme, themeConfig),
+    };
+}
+function normalizeWithType(obj) {
+    if (typeof obj === 'string')
+        return { type: obj };
+    if (!('type' in obj))
+        throw new Error('Type is required');
+    return obj;
+}
+function parseDesign(config, options) {
+    const { structure, title, item, items } = config || {};
+    const defaultItem = parseDesignItem(item || items?.[0], options);
+    return {
+        structure: parseDesignStructure(structure),
+        title: parseDesignTitle(title, options),
+        item: defaultItem,
+        items: !items
+            ? [defaultItem]
+            : items.map((item) => parseDesignItem(item, options)),
+    };
+}
+function parseDesignStructure(config) {
+    if (!config)
+        throw new Error('Structure is required in design or template');
+    const { type, ...userProps } = normalizeWithType(config);
+    const structure = (0, designs_1.getStructure)(type);
+    if (!structure)
+        throw new Error(`Structure ${type} not found`);
+    const { component } = structure;
+    return {
+        ...structure,
+        component: (props) => component({ ...props, ...userProps }),
+    };
+}
+function parseDesignTitle(config, options) {
+    if (!config)
+        return { component: null };
+    const { type, ...userProps } = normalizeWithType(config);
+    const { themeConfig } = options;
+    const background = themeConfig?.colorBg || '#fff';
+    const themeColors = generateColors(background, background);
+    // use default title for now
+    return {
+        component: (props) => (0, designs_1.Title)({ ...props, themeColors, ...userProps }),
+    };
+}
+function parseDesignItem(config, options) {
+    if (!config)
+        throw new Error('Item is required in design or template');
+    const { type, ...userProps } = normalizeWithType(config);
+    const item = (0, designs_1.getItem)(type);
+    if (!item)
+        throw new Error(`Item ${type} not found`);
+    const { component, options: itemOptions } = item;
+    return {
+        ...item,
+        component: (props) => {
+            const { indexes } = props;
+            const { data, themeConfig } = options;
+            const background = themeConfig?.colorBg || '#fff';
+            const { themeColors = generateColors((0, renderer_1.getPaletteColor)(themeConfig?.palette, indexes, data?.items?.length) ||
+                themeConfig?.colorPrimary ||
+                '#1677FF', background), ...restProps } = props;
+            return component({
+                themeColors,
+                ...restProps,
+                ...userProps,
+                id: `item-${(0, utils_1.getItemKeyFromIndexes)(indexes)}`,
+            });
+        },
+        options: itemOptions,
+    };
+}
+function parseTheme(theme, themeConfig = {}) {
+    const base = theme ? (0, themes_1.getTheme)(theme) || {} : {};
+    const parsedThemeConfig = { ...base, ...themeConfig };
+    if (!parsedThemeConfig.colorPrimary) {
+        parsedThemeConfig.colorPrimary = '#1677FF';
+    }
+    if (!parsedThemeConfig.palette) {
+        parsedThemeConfig.palette = [parsedThemeConfig.colorPrimary];
+    }
+    return parsedThemeConfig;
+}
+function generateColors(colorPrimary, background = '#fff') {
+    return (0, themes_1.generateThemeColors)({
+        colorPrimary,
+        isDarkMode: (0, utils_1.isDarkColor)(background),
+        colorBg: background,
+    });
+}

package/lib/options/types.d.ts

@@ -0,0 +1,45 @@
+import { DesignOptions, ParsedDesignsOptions } from '../designs';
+import { ThemeConfig } from '../themes';
+import type { Data, Padding } from '../types';
+export interface InfographicOptions {
+    /** 容器，可以是选择器或者 HTMLElement */
+    container?: string | HTMLElement;
+    /** 宽度 */
+    width?: number;
+    /** 高度 */
+    height?: number;
+    /** 容器内边距 */
+    padding?: Padding;
+    /** 模板 */
+    template?: string;
+    /** 设计 */
+    design?: DesignOptions;
+    /** 数据 */
+    data: Data;
+    /** 主题 */
+    theme?: string;
+    /** 额外主题配置 */
+    themeConfig?: ThemeConfig;
+    /** svg 容器上的配置 */
+    svg?: SVGOptions;
+}
+export interface ParsedInfographicOptions {
+    container: HTMLElement;
+    width?: number;
+    height?: number;
+    padding?: Padding;
+    viewBox?: string;
+    template?: string;
+    design: ParsedDesignsOptions;
+    data: Data;
+    theme?: string;
+    themeConfig: ThemeConfig;
+    svg?: SVGOptions;
+}
+interface SVGOptions {
+    style?: Record<string, string | number>;
+    attributes?: Record<string, string | number | boolean>;
+    id?: string;
+    className?: string;
+}
+export {};

package/lib/options/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/renderer/composites/background.d.ts

@@ -0,0 +1 @@
+export declare function renderBackground(svg: SVGSVGElement, background?: string): void;

package/lib/renderer/composites/background.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderBackground = renderBackground;
+const utils_1 = require("../../utils");
+function renderBackground(svg, background) {
+    const container = svg.parentElement;
+    if (container)
+        container.style.backgroundColor = background || 'none';
+    const element = svg.querySelector('#background');
+    if (!background) {
+        return element?.remove();
+    }
+    svg.style.backgroundColor = background;
+    if (element) {
+        element.setAttribute('fill', background);
+    }
+    else if (svg.viewBox?.baseVal) {
+        const { x, y, width, height } = svg.viewBox.baseVal;
+        const rect = (0, utils_1.createElement)('rect', {
+            x,
+            y,
+            width,
+            height,
+            fill: background,
+            'data-element-type': "background" /* ElementTypeEnum.Background */,
+        });
+        svg.prepend(rect);
+    }
+}

package/lib/renderer/composites/button.d.ts

@@ -0,0 +1 @@
+export declare function renderButtonsGroup(svg: SVGSVGElement, group: SVGGElement): void;

package/lib/renderer/composites/button.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderButtonsGroup = renderButtonsGroup;
+const utils_1 = require("../../utils");
+const ADD_ICON_ID = 'btn-add-icon';
+const REMOVE_ICON_ID = 'btn-remove-icon';
+function renderButtonsGroup(svg, group) {
+    (0, utils_1.setAttributes)(group, { display: 'none' });
+    const addBtns = group.querySelectorAll('[id^="btn-add-"]');
+    const removeBtns = group.querySelectorAll('[id^="btn-remove-"]');
+    defineButtonIcon(svg);
+    addBtns.forEach(renderAddButton);
+    removeBtns.forEach(renderRemoveButton);
+}
+function defineButtonIcon(svg) {
+    const defs = (0, utils_1.createElement)('defs', { id: 'btn-icon-defs' });
+    const addIconSymbol = (0, utils_1.parseSVG)(`<symbol class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path
+    d="M512 1024C229.216 1024 0 794.784 0 512S229.216 0 512 0s512 229.216 512 512-229.216 512-512 512z m0-960C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z m192 480h-160v160a32 32 0 0 1-64 0v-160h-160a32 32 0 0 1 0-64h160v-160a32 32 0 0 1 64 0v160h160a32 32 0 0 1 0 64z"
+    fill="#339900"></path>
+</symbol>`);
+    if (addIconSymbol) {
+        addIconSymbol.setAttribute('id', ADD_ICON_ID);
+        defs.appendChild(addIconSymbol);
+    }
+    const removeIconSymbol = (0, utils_1.parseSVG)(`<symbol viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <path d="M874.971429 149.942857C776.228571 54.857143 648.228571 0 512.914286 0S245.942857 54.857143 150.857143 149.942857c-201.142857 201.142857-201.142857 522.971429 0 724.114286C245.942857 969.142857 377.6 1024 512.914286 1024s266.971429-54.857143 362.057143-149.942857c201.142857-201.142857 201.142857-522.971429 0-724.114286m-51.2 672.914286C739.657143 906.971429 629.942857 950.857143 512.914286 950.857143s-226.742857-43.885714-310.857143-128c-171.885714-171.885714-171.885714-449.828571 0-621.714286C286.171429 117.028571 395.885714 73.142857 512.914286 73.142857s226.742857 43.885714 310.857143 128c171.885714 171.885714 171.885714 449.828571 0 621.714286" fill="#E63C33"></path>
+  <path d="M772.571429 475.428571H253.257143c-21.942857 0-36.571429 14.628571-36.571429 36.571429 0 10.971429 3.657143 18.285714 10.971429 25.6s14.628571 10.971429 25.6 10.971429H768.914286c21.942857 0 36.571429-14.628571 36.571428-36.571429s-14.628571-36.571429-32.914285-36.571429" fill="#E63C33"></path>
+</symbol>`);
+    if (removeIconSymbol) {
+        removeIconSymbol.setAttribute('id', REMOVE_ICON_ID);
+        defs.appendChild(removeIconSymbol);
+    }
+    svg.prepend(defs);
+}
+function renderButtonIcon(node, name) {
+    const { id, x = 0, y = 0, width = 0, height = 0, } = (0, utils_1.getAttributes)(node, ['id', 'x', 'y', 'width', 'height']);
+    const group = (0, utils_1.createElement)('g', {
+        id,
+        class: 'btn-group',
+        transform: `translate(${x}, ${y})`,
+        'data-element-type': "button" /* ElementTypeEnum.Button */,
+    });
+    const dataItems = node.getAttribute('data-items');
+    if (dataItems) {
+        group.setAttribute('data-items', dataItems);
+    }
+    const r = Math.max(+width, +height) / 2;
+    const bkg = (0, utils_1.createElement)('circle', {
+        cx: r,
+        cy: r,
+        r,
+        fill: '#fff',
+        stroke: 'transparent',
+    });
+    group.appendChild(bkg);
+    const icon = (0, utils_1.createElement)('use', {
+        href: `#${name}`,
+        width,
+        height,
+    });
+    group.appendChild(icon);
+    group.style.cursor = 'pointer';
+    node.replaceWith(group);
+}
+function renderAddButton(node) {
+    renderButtonIcon(node, ADD_ICON_ID);
+}
+function renderRemoveButton(node) {
+    renderButtonIcon(node, REMOVE_ICON_ID);
+}

package/lib/renderer/composites/icon.d.ts

@@ -0,0 +1,6 @@
+import { ParsedInfographicOptions } from '../../options';
+import { ResourceConfig } from '../../resource';
+import type { DynamicAttributes } from '../../themes';
+import type { IconAttributes, IconElement } from '../../types';
+export declare function renderIcon(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, attrs?: DynamicAttributes<IconAttributes>): IconElement | null;
+export declare function renderItemIcon(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined, options: ParsedInfographicOptions, color?: string): SVGUseElement | null;

package/lib/renderer/composites/icon.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderIcon = renderIcon;
+exports.renderItemIcon = renderItemIcon;
+const resource_1 = require("../../resource");
+const utils_1 = require("../../utils");
+const utils_2 = require("../utils");
+function renderIcon(svg, node, value, attrs = {}) {
+    if (!value)
+        return null;
+    const parsedAttrs = (0, utils_2.parseDynamicAttributes)(node, attrs);
+    return createIcon(svg, node, value, parsedAttrs);
+}
+function renderItemIcon(svg, node, value, options, color) {
+    if (!value)
+        return null;
+    const { themeConfig } = options;
+    const attrs = {
+        ...themeConfig.item?.icon,
+    };
+    const coloredArea = options.design.item?.options?.coloredArea || [];
+    const primaryColor = coloredArea.includes('icon') ? color : undefined;
+    const parsedAttrs = (0, utils_2.parseDynamicAttributes)(node, attrs, primaryColor);
+    return createIcon(svg, node, value, parsedAttrs);
+}
+function createIcon(svg, node, value, attrs) {
+    // load async
+    (0, resource_1.loadResource)(svg, value);
+    return (0, utils_1.createIconElement)(value, {
+        ...(0, utils_1.getAttributes)(node, [
+            'id',
+            'x',
+            'y',
+            'width',
+            'height',
+            'fill',
+            'stroke',
+        ]),
+        ...attrs,
+    });
+}

package/lib/renderer/composites/illus.d.ts

@@ -0,0 +1,3 @@
+import { type ResourceConfig } from '../../resource';
+import type { IllusElement } from '../../types';
+export declare function renderIllus(svg: SVGSVGElement, node: SVGElement, value: string | ResourceConfig | undefined): IllusElement | null;