@antv/infographic 0.0.1-beta.1

package/lib/renderer/stylize/patterns/hex.d.ts

@@ -0,0 +1,2 @@
+import { PatternGenerator } from '../../types';
+export declare const hex: PatternGenerator;

package/lib/renderer/stylize/patterns/hex.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hex = void 0;
+const utils_1 = require("../../../utils");
+const hex = ({ scale = 0.3, backgroundColor, foregroundColor, }) => {
+    const pattern = (0, utils_1.createElement)('pattern', {
+        id: 'pattern-hex',
+        width: '20',
+        height: '20',
+        patternTransform: `scale(${scale})`,
+        patternUnits: 'userSpaceOnUse',
+    });
+    const rect = (0, utils_1.createElement)('rect', {
+        width: '100%',
+        height: '100%',
+        fill: backgroundColor,
+    });
+    const path = (0, utils_1.createElement)('path', {
+        d: 'M10,0 L20,5 L20,15 L10,20 L0,15 L0,5 Z',
+        fill: foregroundColor,
+    });
+    pattern.appendChild(rect);
+    pattern.appendChild(path);
+    return pattern;
+};
+exports.hex = hex;

package/lib/renderer/stylize/patterns/index.d.ts

@@ -0,0 +1,6 @@
+export { diamond } from './diamond';
+export { dot } from './dot';
+export { hex } from './hex';
+export { line } from './line';
+export { mosaic } from './mosaic';
+export { square } from './square';

package/lib/renderer/stylize/patterns/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.square = exports.mosaic = exports.line = exports.hex = exports.dot = exports.diamond = void 0;
+var diamond_1 = require("./diamond");
+Object.defineProperty(exports, "diamond", { enumerable: true, get: function () { return diamond_1.diamond; } });
+var dot_1 = require("./dot");
+Object.defineProperty(exports, "dot", { enumerable: true, get: function () { return dot_1.dot; } });
+var hex_1 = require("./hex");
+Object.defineProperty(exports, "hex", { enumerable: true, get: function () { return hex_1.hex; } });
+var line_1 = require("./line");
+Object.defineProperty(exports, "line", { enumerable: true, get: function () { return line_1.line; } });
+var mosaic_1 = require("./mosaic");
+Object.defineProperty(exports, "mosaic", { enumerable: true, get: function () { return mosaic_1.mosaic; } });
+var square_1 = require("./square");
+Object.defineProperty(exports, "square", { enumerable: true, get: function () { return square_1.square; } });

package/lib/renderer/stylize/patterns/line.d.ts

@@ -0,0 +1,2 @@
+import { PatternGenerator } from '../../types';
+export declare const line: PatternGenerator;

package/lib/renderer/stylize/patterns/line.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.line = void 0;
+const utils_1 = require("../../../utils");
+const line = ({ scale = 1, backgroundColor, foregroundColor, }) => {
+    const strokeWidth = 6;
+    const hSW = strokeWidth / 2;
+    const pattern = (0, utils_1.createElement)('pattern', {
+        id: 'pattern-line',
+        width: '20',
+        height: '20',
+        patternTransform: `scale(${scale})`,
+        patternUnits: 'userSpaceOnUse',
+    });
+    const rect = (0, utils_1.createElement)('rect', {
+        width: '100%',
+        height: '100%',
+        fill: backgroundColor,
+    });
+    const line1 = (0, utils_1.createElement)('line', {
+        x1: `${10 - hSW}`,
+        y1: `${0 - hSW}`,
+        x2: `${20 + hSW}`,
+        y2: `${10 + hSW}`,
+        stroke: foregroundColor,
+        'stroke-width': strokeWidth,
+        'stroke-opacity': '0.5',
+    });
+    const line2 = (0, utils_1.createElement)('line', {
+        x1: `${0 - hSW}`,
+        y1: `${10 - hSW}`,
+        x2: `${10 + hSW}`,
+        y2: `${20 + hSW}`,
+        stroke: foregroundColor,
+        'stroke-width': strokeWidth,
+        'stroke-opacity': '0.5',
+    });
+    pattern.appendChild(rect);
+    pattern.appendChild(line1);
+    pattern.appendChild(line2);
+    return pattern;
+};
+exports.line = line;

package/lib/renderer/stylize/patterns/mosaic.d.ts

@@ -0,0 +1,2 @@
+import { PatternGenerator } from '../../types';
+export declare const mosaic: PatternGenerator;

package/lib/renderer/stylize/patterns/mosaic.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mosaic = void 0;
+const utils_1 = require("../../../utils");
+const mosaic = ({ scale = 1, backgroundColor = '#ffffff', foregroundColor = '#000000', }) => {
+    const patternSize = 20;
+    const tileSize = 5;
+    const rows = patternSize / tileSize;
+    const cols = patternSize / tileSize;
+    const pattern = (0, utils_1.createElement)('pattern', {
+        id: 'pattern-mosaic',
+        width: patternSize,
+        height: patternSize,
+        patternUnits: 'userSpaceOnUse',
+        patternTransform: `scale(${scale})`,
+    });
+    // 背景填充
+    const background = (0, utils_1.createElement)('rect', {
+        width: '100%',
+        height: '100%',
+        fill: backgroundColor,
+    });
+    pattern.appendChild(background);
+    for (let y = 0; y < rows; y++) {
+        for (let x = 0; x < cols; x++) {
+            if ((x + y) % 2 === 0) {
+                const rect = (0, utils_1.createElement)('rect', {
+                    x: x * tileSize,
+                    y: y * tileSize,
+                    width: tileSize,
+                    height: tileSize,
+                    fill: foregroundColor,
+                });
+                pattern.appendChild(rect);
+            }
+        }
+    }
+    return pattern;
+};
+exports.mosaic = mosaic;

package/lib/renderer/stylize/patterns/square.d.ts

@@ -0,0 +1,2 @@
+import { PatternGenerator } from '../../types';
+export declare const square: PatternGenerator;

package/lib/renderer/stylize/patterns/square.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.square = void 0;
+const utils_1 = require("../../../utils");
+const square = ({ scale = 0.3, backgroundColor, foregroundColor, }) => {
+    const pattern = (0, utils_1.createElement)('pattern', {
+        id: 'pattern-square',
+        width: '20',
+        height: '20',
+        patternTransform: `scale(${scale})`,
+        patternUnits: 'userSpaceOnUse',
+    });
+    const rect = (0, utils_1.createElement)('rect', {
+        width: '100%',
+        height: '100%',
+        fill: backgroundColor,
+    });
+    const path = (0, utils_1.createElement)('path', {
+        d: 'M0,0 L20,0 L20,20 L0,20 Z',
+        fill: foregroundColor,
+    });
+    pattern.appendChild(rect);
+    pattern.appendChild(path);
+    return pattern;
+};
+exports.square = square;

package/lib/renderer/stylize/rough.d.ts

@@ -0,0 +1,2 @@
+import type { RoughConfig } from '../types';
+export declare function applyRoughStyle(node: SVGElement, svg: SVGSVGElement, config: RoughConfig): void;

package/lib/renderer/stylize/rough.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyRoughStyle = applyRoughStyle;
+const roughjs_1 = __importDefault(require("roughjs"));
+const utils_1 = require("../../utils");
+function applyRoughStyle(node, svg, config) {
+    if (!node || !svg) {
+        console.warn('Invalid node or svg element');
+        return;
+    }
+    const rc = roughjs_1.default.svg(svg, {
+        options: {
+            seed: 1000,
+        },
+    });
+    const g = (0, utils_1.createElement)('g');
+    const volume = node.cloneNode();
+    (0, utils_1.setAttributes)(volume, {
+        fill: '#fff',
+        stroke: 'transparent',
+    });
+    volume.classList.add('rough-volume');
+    g.appendChild(volume);
+    const element = createRoughShape(rc, node, config);
+    if (element) {
+        element.classList.add('rough-element');
+        element.style.pointerEvents = 'none';
+        g.appendChild(element);
+    }
+    if (node.id) {
+        g.id = node.id;
+        volume.setAttribute('id', `${node.id}-volume`);
+        if (element)
+            element.setAttribute('id', `${node.id}-rough`);
+    }
+    if (g.childElementCount > 0)
+        node.replaceWith(g);
+    else
+        node.remove();
+}
+function createRoughShape(rc, node, config) {
+    const shapeType = node.nodeName;
+    const getAttrs = (node, attrs) => {
+        const { fill, stroke = fill || 'currentColor', ...restAttrs } = (0, utils_1.getAttributes)(node, [
+            ...attrs,
+            'fill',
+            'fill-opacity',
+            'stroke',
+            'stroke-opacity',
+            'stroke-width',
+            'opacity',
+        ], true);
+        return { fill, stroke, ...restAttrs, ...config };
+    };
+    if (shapeType === 'circle') {
+        const { cx = '0', cy = '0', r = '0', ...attrs } = getAttrs(node, ['cx', 'cy', 'r']);
+        return rc.circle(+cx, +cy, +r * 2, attrs);
+    }
+    else if (shapeType === 'ellipse') {
+        const { cx = '0', cy = '0', rx = '0', ry = '0', ...attrs } = getAttrs(node, ['cx', 'cy', 'rx', 'ry']);
+        return rc.ellipse(+cx, +cy, +rx * 2, +ry * 2, attrs);
+    }
+    else if (shapeType === 'line') {
+        const { x1 = '0', y1 = '0', x2 = '0', y2 = '0', ...attrs } = getAttrs(node, ['x1', 'y1', 'x2', 'y2']);
+        return rc.line(+x1, +y1, +x2, +y2, attrs);
+    }
+    else if (shapeType === 'rect') {
+        const { x = '0', y = '0', width = '0', height = '0', ...attrs } = getAttrs(node, ['x', 'y', 'width', 'height']);
+        return rc.rectangle(+x, +y, +width, +height, attrs);
+    }
+    else if (shapeType === 'path') {
+        const { d = '', ...attrs } = getAttrs(node, ['d']);
+        return rc.path(d, attrs);
+    }
+    else if (shapeType === 'polygon') {
+        const { points, ...attrs } = getAttrs(node, ['points']);
+        return rc.polygon(parsePolygonPoints(points), attrs);
+    }
+    else if (shapeType === 'polyline') {
+        const { points, ...attrs } = getAttrs(node, ['points']);
+        const parsedPoints = parsePolygonPoints(points);
+        if (parsedPoints.length > 1) {
+            return rc.linearPath(parsedPoints, attrs);
+        }
+    }
+}
+function parsePolygonPoints(points) {
+    if (!points)
+        return [];
+    try {
+        return points
+            .trim()
+            .replace(/,/g, ' ') // 处理逗号分隔的坐标
+            .split(/\s+/) // 按空白字符分割
+            .filter(Boolean) // 过滤空字符串
+            .reduce((acc, curr, index, arr) => {
+            if (index % 2 === 0 && index + 1 < arr.length) {
+                const x = parseFloat(curr);
+                const y = parseFloat(arr[index + 1]);
+                if (!isNaN(x) && !isNaN(y)) {
+                    acc.push([x, y]);
+                }
+            }
+            return acc;
+        }, []);
+    }
+    catch {
+        console.warn('Failed to parse polygon points:', points);
+        return [];
+    }
+}

package/lib/renderer/types/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './renderer';
+export type * from './stylize';
+export type * from './text';

package/lib/renderer/types/index.js

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

package/lib/renderer/types/renderer.d.ts

@@ -0,0 +1,6 @@
+import type { ParsedInfographicOptions } from '../../options';
+export interface IRenderer {
+    getSVG(): SVGSVGElement;
+    getOptions(): ParsedInfographicOptions;
+    render(): SVGSVGElement;
+}

package/lib/renderer/types/renderer.js

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

package/lib/renderer/types/stylize.d.ts

@@ -0,0 +1,42 @@
+export type StylizeConfig = RoughConfig | PatternConfig | GradientConfig;
+export interface RoughConfig {
+    type: 'rough';
+    roughness?: number;
+    bowing?: number;
+    fillWeight?: number;
+    hachureGap?: number;
+}
+export interface PatternConfig extends PatternStyle {
+    type: 'pattern';
+    pattern: string;
+}
+export interface PatternStyle {
+    backgroundColor?: string | null;
+    foregroundColor?: string | null;
+    scale?: number | null;
+}
+export interface PatternGenerator {
+    (style: PatternStyle): SVGElement;
+}
+export type GradientConfig = LinearGradient | RadialGradient;
+export interface LinearGradient {
+    type: 'linear-gradient';
+    colors?: string[] | {
+        color: string;
+        offset: string;
+    }[];
+    /**
+     * 颜色角度
+     *          270
+     *   180 <-  ·  -> 0
+     *          90
+     */
+    angle?: number;
+}
+export interface RadialGradient {
+    type: 'radial-gradient';
+    colors?: string[] | {
+        color: string;
+        offset: string;
+    }[];
+}

package/lib/renderer/types/stylize.js

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

package/lib/renderer/types/text.d.ts

@@ -0,0 +1,3 @@
+export type TextHorizontalAlign = 'LEFT' | 'CENTER' | 'RIGHT';
+export type TextVerticalAlign = 'TOP' | 'CENTER' | 'BOTTOM';
+export type TextAlignment = [TextHorizontalAlign, TextVerticalAlign];

package/lib/renderer/types/text.js

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

package/lib/renderer/utils/attrs.d.ts

@@ -0,0 +1,2 @@
+import type { DynamicAttributes, DynamicItemAttribute } from '../../themes';
+export declare function parseDynamicAttributes<T extends object>(node: SVGElement, attributes: DynamicAttributes<T> | DynamicItemAttribute<T>, primaryColor?: string): T;

package/lib/renderer/utils/attrs.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseDynamicAttributes = parseDynamicAttributes;
+const utils_1 = require("../../utils");
+function parseDynamicAttributes(node, attributes, primaryColor) {
+    const attrs = Object.entries(attributes).reduce((acc, [key, value]) => {
+        if (typeof value === 'function') {
+            const staticValue = value(node.getAttribute(key), primaryColor);
+            if (staticValue)
+                acc[key] = staticValue;
+        }
+        else {
+            Object.assign(acc, { [key]: value });
+        }
+        return acc;
+    }, {});
+    if (primaryColor) {
+        if (!('fill' in attrs) && (0, utils_1.hasColor)(node.getAttribute('fill')))
+            Object.assign(attrs, { fill: primaryColor });
+        if (!('stroke' in attrs) && (0, utils_1.hasColor)(node.getAttribute('stroke')))
+            Object.assign(attrs, { stroke: primaryColor });
+    }
+    return attrs;
+}

package/lib/renderer/utils/id.d.ts

@@ -0,0 +1 @@
+export declare function getSafetyId(id: string): string;

package/lib/renderer/utils/id.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSafetyId = getSafetyId;
+function getSafetyId(id) {
+    return id.replace(/#|%|\.| |\/|\(|\)/g, '').replace(/,/g, '-');
+}

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

@@ -0,0 +1,2 @@
+export * from './attrs';
+export * from './id';

package/lib/renderer/utils/index.js

@@ -0,0 +1,18 @@
+"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("./attrs"), exports);
+__exportStar(require("./id"), exports);

package/lib/resource/index.d.ts

@@ -0,0 +1,5 @@
+export { loadResource } from './loader';
+export * from './loaders';
+export { registerResourceLoader } from './registry';
+export type * from './types';
+export { getResourceHref, getResourceId, parseResourceConfig } from './utils';

package/lib/resource/index.js

@@ -0,0 +1,26 @@
+"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.parseResourceConfig = exports.getResourceId = exports.getResourceHref = exports.registerResourceLoader = exports.loadResource = void 0;
+var loader_1 = require("./loader");
+Object.defineProperty(exports, "loadResource", { enumerable: true, get: function () { return loader_1.loadResource; } });
+__exportStar(require("./loaders"), exports);
+var registry_1 = require("./registry");
+Object.defineProperty(exports, "registerResourceLoader", { enumerable: true, get: function () { return registry_1.registerResourceLoader; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getResourceHref", { enumerable: true, get: function () { return utils_1.getResourceHref; } });
+Object.defineProperty(exports, "getResourceId", { enumerable: true, get: function () { return utils_1.getResourceId; } });
+Object.defineProperty(exports, "parseResourceConfig", { enumerable: true, get: function () { return utils_1.parseResourceConfig; } });

package/lib/resource/loader.d.ts

@@ -0,0 +1,6 @@
+import type { ResourceConfig } from './types';
+/**
+ * load resource into svg defs
+ * @returns resource ref id
+ */
+export declare function loadResource(svg: SVGSVGElement | null, config: string | ResourceConfig): Promise<string | null>;

package/lib/resource/loader.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadResource = loadResource;
+const utils_1 = require("../utils");
+const loaders_1 = require("./loaders");
+const registry_1 = require("./registry");
+const utils_2 = require("./utils");
+async function getResource(config) {
+    const cfg = (0, utils_2.parseResourceConfig)(config);
+    if (!cfg)
+        return null;
+    const { type, data } = cfg;
+    if (type === 'image') {
+        return await (0, loaders_1.loadImageBase64Resource)(data);
+    }
+    else if (type === 'svg') {
+        return (0, loaders_1.loadSVGResource)(data);
+    }
+    else if (type === 'remote') {
+        return await (0, loaders_1.loadRemoteResource)(data);
+    }
+    else {
+        const customLoader = (0, registry_1.getCustomResourceLoader)();
+        if (customLoader)
+            return await customLoader(cfg);
+    }
+    return null;
+}
+const RESOURCE_MAP = new Map();
+const RESOURCE_LOAD_MAP = new WeakMap();
+/**
+ * load resource into svg defs
+ * @returns resource ref id
+ */
+async function loadResource(svg, config) {
+    if (!svg)
+        return null;
+    const cfg = (0, utils_2.parseResourceConfig)(config);
+    if (!cfg)
+        return null;
+    const id = (0, utils_2.getResourceId)(cfg);
+    const resource = RESOURCE_MAP.has(id)
+        ? RESOURCE_MAP.get(id) || null
+        : await getResource(cfg);
+    if (!resource)
+        return null;
+    if (!RESOURCE_LOAD_MAP.has(svg))
+        RESOURCE_LOAD_MAP.set(svg, new Map());
+    const map = RESOURCE_LOAD_MAP.get(svg);
+    if (map.has(id))
+        return id;
+    const defs = (0, utils_1.getOrCreateDefs)(svg);
+    resource.id = id;
+    defs.appendChild(resource);
+    map.set(id, resource);
+    return id;
+}

package/lib/resource/loaders/image.d.ts

@@ -0,0 +1 @@
+export declare function loadImageBase64Resource(data: string): Promise<SVGSymbolElement | null>;

package/lib/resource/loaders/image.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadImageBase64Resource = loadImageBase64Resource;
+const utils_1 = require("../../utils");
+function isImageBase64Resource(resource) {
+    return resource.startsWith('data:');
+}
+async function loadImageBase64Resource(data) {
+    if (!data || !isImageBase64Resource(data))
+        return null;
+    const mimeType = data.match(/^data:([^;]+)/)?.[1];
+    if (!mimeType)
+        return null;
+    const analysis = () => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => {
+                const width = img.naturalWidth;
+                const height = img.naturalHeight;
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    return resolve({ width, height, hasAlpha: false });
+                }
+                // skip analysis for jpeg/jpg/webp/gif
+                if (['image/jpeg', 'image/jpg', 'image/webp', 'image/gif'].includes(mimeType)) {
+                    return resolve({ width, height, hasAlpha: false });
+                }
+                canvas.width = width;
+                canvas.height = height;
+                ctx.drawImage(img, 0, 0);
+                let hasAlpha = false;
+                const step = 10;
+                for (let x = 0; x < width; x += step) {
+                    if (hasAlpha)
+                        break;
+                    for (let y = 0; y < height; y += step) {
+                        const imageData = ctx.getImageData(x, y, 1, 1);
+                        if (imageData.data[3] < 255) {
+                            hasAlpha = true;
+                            break;
+                        }
+                    }
+                }
+                resolve({ width, height, hasAlpha });
+            };
+            img.onerror = () => reject(new Error('Failed to analysis image'));
+            img.src = data;
+        });
+    };
+    const { width, height, hasAlpha } = await analysis();
+    const getPreserveAspectRatio = () => {
+        if (hasAlpha)
+            return 'xMidYMid meet';
+        if (mimeType?.includes('image/gif') || mimeType?.includes('image/svg')) {
+            return 'xMidYMid meet';
+        }
+        const minDimension = Math.min(width, height);
+        if (minDimension <= 200)
+            return 'xMidYMid meet';
+        const aspectRatio = width / height;
+        if (aspectRatio >= 0.6 && aspectRatio <= 1.67)
+            return 'xMidYMid meet';
+        if (aspectRatio < 0.3 || aspectRatio > 3.33)
+            return 'xMidYMid meet';
+        return 'xMidYMid slice';
+    };
+    const preserveAspectRatio = getPreserveAspectRatio();
+    return (0, utils_1.parseSVG)(`
+<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="${preserveAspectRatio}">
+  <image href="${data}" width="${width}" height="${height}" />
+</symbol>`);
+}

package/lib/resource/loaders/index.d.ts

@@ -0,0 +1,3 @@
+export * from './image';
+export * from './remote';
+export * from './svg';

package/lib/resource/loaders/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("./image"), exports);
+__exportStar(require("./remote"), exports);
+__exportStar(require("./svg"), exports);

package/lib/resource/loaders/remote.d.ts

@@ -0,0 +1 @@
+export declare function loadRemoteResource(resource: string): Promise<SVGSymbolElement | null>;