为了在「Tide Studio 全景工作台」发布时为用户提供最丰富的手作装饰素材库我打通了一条全套 24 款包含春夏秋冬二十四节气、温润手绘植物与天气意象的矢量图标自动化打包分发流水线Botanical Icon Export Flow。在传统开发中管理 24 个独立的 SVG 文件往往需要手动一个个重命名并维护复杂的导入语句。通过Node.js 自动化脚本驱动 SVGO 压缩、自动提取currentColor描边、并批量生成带有完整 TypeScript 类型声明的 React 图标组件包tide-ui/icons我们实现了全自动的一键生成与打包发布。-------------------------------------------------------------------- | Tide Icons 矢量图标自动化构建与打包流水线 | -------------------------------------------------------------------- | [原始素材目录: raw-svgs/*.svg (24 款手绘节气与植物矢量素材)] | | | | | v (Node.js 构建脚本: pnpm run build:icons) | | [1. SVGO 深度优化: 剥离冗余元数据浮点坐标精度四舍五入到 2 位] | | [2. 属性动态化: 将 stroke/fill 替换为 currentColor 动态变量] | | [3. 模板代码生成: 批量输出 packages/icons/src/icons/*.tsx] | | [4. 单一出口打包: 自动生成 index.ts 与 index.d.ts 类型导出] | | | | | [用户工程体验: import { IconSpringSprout, IconAutumnLeaf } from ...] | --------------------------------------------------------------------1. 自动化批量生成 TSX 图标组件的 Node.js 脚本创建scripts/generate-icons.mjsimport fs from fs; import path from path; import { optimize } from svgo; const inputDir ./raw-svgs; const outputDir ./packages/icons/src; fs.mkdirSync(outputDir, { recursive: true }); const svgFiles fs.readdirSync(inputDir).filter((f) f.endsWith(.svg)); const exportStatements []; for (const file of svgFiles) { const rawSvg fs.readFileSync(path.join(inputDir, file), utf-8); const componentName Icon path.basename(file, .svg).replace(/(^|-)([a-z])/g, (_, __, c) c.toUpperCase()); // 1. SVGO 压缩 const optimized optimize(rawSvg, { plugins: [ preset-default, removeDimensions, { name: convertColors, params: { currentColor: true } }, ], }); // 2. 生成规范 React 组件代码 const componentCode import React from react; export const ${componentName}: React.FCReact.SVGPropsSVGSVGElement (props) ( ${optimized.data.replace(/svg /, svg classNamew-5 h-5 inline-block select-none fillnone strokecurrentColor )} ); ; fs.writeFileSync(path.join(outputDir, ${componentName}.tsx), componentCode); exportStatements.push(export { ${componentName} } from ./${componentName};); } // 3. 生成统一出口 index.ts fs.writeFileSync(path.join(outputDir, index.ts), exportStatements.join(\n) \n); console.log(成功全自动生成 ${svgFiles.length} 个规范 TSX 矢量图标组件);2. 在全景手账工作台中的优雅使用import React from react; import { IconAutumnLeaf, IconSpringSprout, IconMoonNight } from tide-ui/icons; export const SeasonToolbar () ( div classNameflex gap-2 p-2 bg-[#FAF7F0] border-2 border-[#2D2B2A] rounded-2xl shadow-[2px_2px_0px_#2D2B2A] button classNamep-2 text-[#88AA99] hover:bg-[#EDE4D3] rounded-xlIconSpringSprout //button button classNamep-2 text-[#E89874] hover:bg-[#EDE4D3] rounded-xlIconAutumnLeaf //button button classNamep-2 text-[#F4D06F] hover:bg-[#EDE4D3] rounded-xlIconMoonNight //button /div );自动化带来的工程从容原本需要耗费半天整理的 24 个图标资产在 2 秒钟内全自动转化为工业级标准的 TypeScript 组件。让工程基建为审美创作保驾护航。
