@manohub/icon 1.0.0 → 1.0.2

package/dist/svg.js

@@ -0,0 +1,308 @@
+/**
+ * SVG 归一：把「完整 `.svg`」转成图标内容表要的**片段串**。
+ *
+ * 为什么需要它：表里存的是**片段**（不含 `<svg>` 壳、不含硬编码颜色），而项目手上多半是
+ * 设计工具 / 图标站导出的**完整文件**。手工剥壳有 7 件事要做，其中三件几乎必错
+ * （算多层 `transform` 的净矩阵、保住 `fill-rule`、查重），所以做成工具。
+ *
+ * 用法只有一条：**构建期** —— `icon-from-svg` 读一个目录，产出静态的 `.ts` 表（片段进 git，可 review、可 diff），
+ * 片段再交给 `<Icon>` 的默认插槽渲染。本包**不在运行期做归一** —— 那是每个消费方的包里都要背一遍的解析器。
+ *
+ * 本文件是**纯字符串处理**：不引 `vue`、不引 `node:*`、零依赖 —— 所以浏览器与 Node 都能用
+ * （读文件那半边在 `bin/icon-from-svg.mjs`）。
+ *
+ * 口径与「设计净稿规范」一致：只接收**单色**图形；渐变 / 滤镜 / 遮罩 / 多色一律**拒绝**
+ * （那类属于产品专属图形，应留在消费方 assets，不进字形表）。
+ */
+/** 可绘制的元素 */
+const DRAWABLE = new Set(['path', 'rect', 'circle', 'ellipse', 'polygon', 'polyline', 'line']);
+/** 片段里要保留的几何属性（其余属性一律丢弃：`id` / `class` / `xml-*` / `data-*` / 导出残留） */
+const GEOMETRY = [
+    'd', 'x', 'y', 'width', 'height', 'rx', 'ry', 'cx', 'cy', 'r', 'points', 'x1', 'y1', 'x2', 'y2'
+];
+/** 一出现就**拒绝**的元素：单色片段表达不了它们 */
+const REJECT_TAGS = {
+    lineargradient: '线性渐变',
+    radialgradient: '径向渐变',
+    filter: '滤镜',
+    mask: '蒙版',
+    clippath: '裁剪路径',
+    pattern: '填充图案',
+    defs: '定义块（渐变 / 蒙版 / 符号等）',
+    use: '引用（use）',
+    symbol: '符号',
+    marker: '标记',
+    image: '位图',
+    style: '内联样式表（片段里无法作用域隔离）'
+};
+const TAG = /<(\/?)([A-Za-z][\w:.-]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)(\/?)>/g;
+/* ============================ 小工具 ============================ */
+function parseAttrs(attrStr) {
+    const out = {};
+    const re = /([\w:.-]+)\s*=\s*"([^"]*)"/g;
+    let m;
+    while ((m = re.exec(attrStr)))
+        out[m[1].toLowerCase()] = m[2];
+    return out;
+}
+const IDENTITY = [1, 0, 0, 1, 0, 0];
+/** 先施加 `n`、再施加 `m` */
+function mul(m, n) {
+    return [
+        m[0] * n[0] + m[2] * n[1],
+        m[1] * n[0] + m[3] * n[1],
+        m[0] * n[2] + m[2] * n[3],
+        m[1] * n[2] + m[3] * n[3],
+        m[0] * n[4] + m[2] * n[5] + m[4],
+        m[1] * n[4] + m[3] * n[5] + m[5]
+    ];
+}
+function parseTransform(str, warnings) {
+    let m = IDENTITY;
+    const re = /(translate|scale|matrix|rotate|skewX|skewY)\s*\(([^)]*)\)/gi;
+    let t;
+    while ((t = re.exec(str))) {
+        const kind = t[1].toLowerCase();
+        const nums = t[2].split(/[\s,]+/).filter(Boolean).map(Number);
+        let n = null;
+        if (kind === 'translate')
+            n = [1, 0, 0, 1, nums[0] ?? 0, nums[1] ?? 0];
+        else if (kind === 'scale')
+            n = [nums[0] ?? 1, 0, 0, nums[1] ?? nums[0] ?? 1, 0, 0];
+        else if (kind === 'matrix')
+            n = nums;
+        else
+            warnings.push(`含 ${kind}() —— 该变换无法在不改写路径的前提下归一，已按原样保留`);
+        if (n)
+            m = mul(m, n);
+    }
+    return m;
+}
+/** 数字序列化：去掉浮点噪声，且不留 `1.50` 这种尾巴 */
+function num(n) {
+    return String(Math.round(n * 1e6) / 1e6);
+}
+const isIdentity = (m) => m.every((v, i) => v === IDENTITY[i]);
+const sameMatrix = (a, b) => a.every((v, i) => v === b[i]);
+/** 矩阵 → `transform` 串（无旋转 / 斜切时写成更易读的 `translate() scale()`） */
+function matrixToTransform(m) {
+    const [a, b, c, d, e, f] = m;
+    if (b === 0 && c === 0) {
+        const parts = [];
+        if (e !== 0 || f !== 0)
+            parts.push(`translate(${num(e)}, ${num(f)})`);
+        if (a !== 1)
+            parts.push(`scale(${num(a)})`);
+        return parts.join(' ');
+    }
+    return `matrix(${m.map(num).join(' ')})`;
+}
+/**
+ * 完整 SVG 串 → 片段串。**入参不合法就抛错**（构建期应当直接失败，别写出半成品表）。
+ *
+ * 会做的事：剥壳与导出残留、合并多层 `transform`、单色归一为 `currentColor`、
+ * 视口换算（包一层 `transform`，**不改写路径坐标**）、保住 `fill-rule`。
+ * 拒绝的事：渐变 / 滤镜 / 蒙版 / 裁剪 / 内联样式表 / 多色 —— 报错信息里会说清是哪一个。
+ */
+export function svgToFragment(svgText, options = {}) {
+    const target = options.size ?? 24;
+    const warnings = [];
+    const text = svgText.replace(/^\uFEFF/, '');
+    const openTag = text.match(/<svg\b[^>]*>/i);
+    if (!openTag)
+        throw new Error('不是一个 SVG 文件：找不到 <svg> 开标签');
+    const svgAttrs = parseAttrs(openTag[0]);
+    const viewBox = svgAttrs.viewbox ?? '';
+    const vbNums = viewBox.split(/[\s,]+/).filter(Boolean).map(Number);
+    const width = vbNums.length === 4 ? vbNums[2] : Number(svgAttrs.width) || 0;
+    const height = vbNums.length === 4 ? vbNums[3] : Number(svgAttrs.height) || 0;
+    if (!width || !height) {
+        throw new Error('画板尺寸不明：`viewBox` 与 `width` / `height` 都没有可用的数值');
+    }
+    const side = Math.max(width, height);
+    if (width !== height) {
+        warnings.push(`画板非正方形（${num(width)}×${num(height)}），按长边 ${num(side)} 换算，短边一侧会有留白`);
+    }
+    const scale = target / side;
+    // 只取 <svg> 标签之间的内容（外层壳与 <title> 一律不要）
+    const inner = text.slice(text.indexOf('>', text.indexOf(openTag[0])) + 1).replace(/<\/svg\s*>[\s\S]*$/i, '');
+    const items = [];
+    const colors = new Set();
+    const strokeWidths = new Set();
+    let dropped = 0;
+    let strokeBased = false;
+    const root = { matrix: IDENTITY, opacity: 1 };
+    const stack = [root];
+    let m;
+    TAG.lastIndex = 0;
+    while ((m = TAG.exec(inner))) {
+        const [, close, rawName, attrStr, selfClose] = m;
+        const name = rawName.toLowerCase();
+        if (name === 'svg')
+            throw new Error('内容里又出现一个 <svg>（嵌套 SVG 无法归一）');
+        const reject = REJECT_TAGS[name];
+        if (reject)
+            throw new Error(`含 ${reject} <${rawName}>：单色片段表达不了，属产品专属图形，请放应用侧 assets`);
+        if (close) {
+            if (stack.length > 1)
+                stack.pop();
+            continue;
+        }
+        const parent = stack[stack.length - 1];
+        const attrs = parseAttrs(attrStr);
+        const opacity = (attrs.opacity === undefined ? 1 : Number(attrs.opacity)) * parent.opacity;
+        const node = {
+            matrix: attrs.transform ? mul(parent.matrix, parseTransform(attrs.transform, warnings)) : parent.matrix,
+            fill: attrs.fill ?? parent.fill,
+            stroke: attrs.stroke ?? parent.stroke,
+            fillRule: attrs['fill-rule'] ?? parent.fillRule,
+            strokeWidth: attrs['stroke-width'] ?? parent.strokeWidth,
+            opacity
+        };
+        if (DRAWABLE.has(name)) {
+            const isPlaceholder = opacity === 0;
+            if (isPlaceholder) {
+                // 设计稿常见的「透明占位底」（16×16 空 rect）；若它带可见子元素则不是占位，直接拦下
+                if (!selfClose)
+                    dropped++;
+                else
+                    dropped++;
+            }
+            else {
+                items.push({ tag: name, attrs, matrix: node.matrix, fill: node.fill, stroke: node.stroke, fillRule: node.fillRule, opacity, strokeWidth: node.strokeWidth });
+                if (node.fill && node.fill !== 'none')
+                    colors.add(node.fill);
+                if (node.stroke && node.stroke !== 'none')
+                    colors.add(node.stroke);
+                if (node.strokeWidth)
+                    strokeWidths.add(node.strokeWidth);
+            }
+        }
+        if (!selfClose)
+            stack.push(node);
+    }
+    if (!items.length)
+        throw new Error('没扫到任何图形元素（可能全是透明占位或无内容）');
+    const filled = items.filter((it) => (it.fill ?? 'none') !== 'none');
+    strokeBased = filled.length === 0 && items.some((it) => (it.stroke ?? 'none') !== 'none');
+    // 颜色：只允许「零种（完全继承）」或「一种」；两种以上就是多色图形
+    const palette = [...colors].filter((c) => c !== 'currentColor');
+    if (palette.length > 1) {
+        throw new Error(`含 ${palette.length} 种颜色（${palette.join(' / ')}）：多色图形请放应用侧 assets`);
+    }
+    if (strokeWidths.size > 1) {
+        warnings.push(`各元素线重不一致（${[...strokeWidths].join(' / ')}），已按原值保留到片段上`);
+    }
+    // 填充规则：全部一致才提到包装层，不一致就逐个写
+    const rules = [...new Set(items.map((it) => it.fillRule ?? 'nonzero'))];
+    if (rules.length > 1)
+        warnings.push(`各元素 fill-rule 不一致（${rules.join(' / ')}），已逐个保留`);
+    // 矩阵：全部一致就提到包装层（设计稿多导出一层画板偏移，净矩阵常为单位阵）
+    const matrixes = items.map((it) => it.matrix);
+    const uniform = matrixes.every((mm) => sameMatrix(mm, matrixes[0]));
+    const body = items.map((it, i) => {
+        const keep = GEOMETRY.filter((k) => it.attrs[k] !== undefined).map((k) => `${k}="${it.attrs[k]}"`);
+        if (rules.length > 1)
+            keep.push(`fill-rule="${it.fillRule ?? 'nonzero'}"`);
+        if (it.opacity !== 1)
+            keep.push(`opacity="${num(it.opacity)}"`);
+        const geom = `<${it.tag} ${keep.join(' ')}/>`;
+        if (uniform)
+            return geom;
+        // 坐标系不一致时逐个套自己的矩阵（不做展平改写，保持路径数据原样）
+        const own = matrixToTransform(it.matrix);
+        return own ? `<g transform="${own}">${geom}</g>` : geom;
+    }).join('');
+    // 包装层：外层视口换算 × （一致时）元素矩阵
+    const viewport = [scale, 0, 0, scale, 0, 0];
+    const wrap = uniform ? mul(viewport, matrixes[0]) : viewport;
+    const transform = isIdentity(wrap) ? '' : ` transform="${matrixToTransform(wrap)}"`;
+    const paint = strokeBased
+        ? ' fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"'
+        : ' fill="currentColor" stroke="none"';
+    const ruleAttr = rules.length === 1 && rules[0] !== 'nonzero' ? ` fill-rule="${rules[0]}"` : '';
+    const fragment = `<g${transform}${paint}${ruleAttr}>${body}</g>`;
+    if (strokeBased) {
+        const sw = strokeWidths.size === 1 ? [...strokeWidths][0] : undefined;
+        warnings.push(`这是**描边型**图形${sw ? `（原线重 ${sw}，原画板 ${num(side)} 口径）` : ''}：` +
+            `渲染方的 <svg> 上写死 stroke-width="2"，` +
+            `${sw && Math.abs(Number(sw) * scale - 2) > 0.05 ? `此稿换算后约 ${num(Number(sw) * scale)}，如需保真请在片段里显式写 stroke-width` : '如需改线重请在片段里显式写 stroke-width'}`);
+    }
+    if (dropped)
+        warnings.push(`丢弃了 ${dropped} 个透明元素（opacity="0"，通常是设计稿的占位底）`);
+    return {
+        fragment,
+        warnings,
+        info: {
+            side,
+            viewBox,
+            scale,
+            elements: items.length,
+            fillRule: rules.length === 1 ? rules[0] : 'mixed',
+            strokeBased,
+            strokeWidth: strokeBased && strokeWidths.size === 1 ? Number([...strokeWidths][0]) : undefined
+        }
+    };
+}
+/**
+ * 生成静态内容表的 TS 源码（`icon-from-svg` 的产物）。
+ *
+ * 生成物是**可 review 的源码**，不是运行期拼的 —— 这是本工具走构建期的全部理由。
+ */
+export function buildTableSource(entries, options = {}) {
+    const constName = options.constName ?? 'PROJECT_GLYPHS';
+    const rows = entries.map((e) => {
+        const notes = e.notes?.length ? e.notes.map((n) => `  // ${n}\n`).join('') : '';
+        const source = e.source ? `  // 源文件：${e.source}\n` : '';
+        return `${notes}${source}  '${e.name}': '${e.fragment}',`;
+    }).join('\n');
+    return `/**
+ * ${options.title ?? '项目自带图标字形表'}。
+ *
+ * **由 \`icon-from-svg\` 从 SVG 生成，请勿手改** —— 设计稿改了重新生成一次即可。
+ * 片段口径：24 视口、单色 \`currentColor\`、坐标不重写（视口换算靠包装层 \`transform\`）。
+ *
+ * 消费方式 —— 片段直接放进 \`<Icon>\` 的插槽（见 \`@manohub/kit/CONTRACT.md\` L1.5-6 第 ③ 类）：
+ *
+ * \`\`\`tsx
+ * import { Icon } from '@manohub/icon'
+ * import { ${constName} } from './<本文件>'
+ *
+ * <Icon>{${constName}['aip-foo']}</Icon>
+ * \`\`\`
+ */
+export const ${constName} = {
+${rows}
+} as const
+`;
+}
+/* ============================ 查重 ============================ */
+/**
+ * 同一图形的两条条目（命令序列逐字相同 + 所有点位移一致 ⇒ 只是画板里挪了位置）。
+ *
+ * 设计稿常对多个菜单位复用同一图形（本仓 2026-10-09 就抓到过一处：`server` vs 已删的 `publish`），
+ * 所以生成时要顺带报出来 —— 同形只留一条，另一处直接复用同名字形。
+ */
+export function findDuplicatePairs(entries) {
+    // 只取路径 `d` 里的坐标：整串里的数字（如包装层的 `scale(1.5)`）会让点位错配，查重就失效了
+    const svgPaths = (s) => [...s.matchAll(/ d="([^"]+)"/g)].map((m) => m[1]);
+    const cmds = (s) => svgPaths(s).map((p) => (p.match(/[A-Za-z]/g) ?? []).join('')).join('|');
+    const nums = (s) => svgPaths(s).flatMap((p) => (p.match(/-?\d*\.?\d+/g) ?? []).map(Number));
+    const info = entries.map((e) => ({ name: e.name, c: cmds(e.fragment), v: nums(e.fragment) }));
+    const out = [];
+    for (let i = 0; i < info.length; i++) {
+        for (let j = i + 1; j < info.length; j++) {
+            const a = info[i];
+            const b = info[j];
+            if (a.c !== b.c || a.v.length !== b.v.length || !a.v.length)
+                continue;
+            const deltas = new Set();
+            for (let k = 0; k + 1 < a.v.length; k += 2) {
+                deltas.add(`(${num(b.v[k] - a.v[k])}, ${num(b.v[k + 1] - a.v[k + 1])})`);
+            }
+            if (deltas.size === 1)
+                out.push({ a: a.name, b: b.name, delta: [...deltas][0] });
+        }
+    }
+    return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/icon",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "type": "module",
   "description": "AIHub 图标包：内置 SVG 图标内容表 + 纯字符串渲染器 + <Icon> 组件。零运行时依赖（仅 peer vue），供任意 UI 栈消费",
@@ -17,8 +17,12 @@
   "sideEffects": false,
   "files": [
     "dist",
+    "bin",
     "README.md"
   ],
+  "bin": {
+    "icon-from-svg": "bin/icon-from-svg.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -27,6 +31,10 @@
     "./glyphs": {
       "types": "./dist/glyphs.d.ts",
       "import": "./dist/glyphs.js"
+    },
+    "./svg": {
+      "types": "./dist/svg.d.ts",
+      "import": "./dist/svg.js"
     }
   },
   "main": "./dist/index.js",