← 返回文档

SVG2Icon • 技术指南

版本 v1.1.0

svg2icon-技术-v1.1.0

技术概览

手册：svg2icon-tech-v1.1.0（中文）

本概览基于已完成的 v1.1.0 应用与当前目录结构，涵盖进程模型、IPC、存储、图标生成、打包、主题与构建/分发。

IPC 表面（通过 preload）

  • 项目：getAll、create、update、delete、generateIcons
  • 文件：selectSvg、selectOutputFolder、downloadProject
  • 设置：get、set、setTheme
  • 窗口：minimize、maximize、close
  • 应用：getVersion、checkForUpdates、openExternal
  • 菜单事件：新建项目、设置、更新、手册、关于

存储

  • JSON 文件位于 userData/svg2icon.json，结构 { projects: [], settings: {} }
  • 开发 vs 生产的 userData
    • 开发模式使用 --dev 时在默认路径后追加 -dev
    • 示例：
      • Windows: %APPDATA%\SVG2Icon-dev\svg2icon.json
      • Linux: ~/.config/SVG2Icon-dev/svg2icon.json

图标生成

  • IconGenerationService 基于 svgData 渲染各平台集
  • 输出位于 userData/svg2icon/projects/<id>/
    • web-icons/、desktop-icons/、ios-icons/、android-icons/
  • Web 不包含 original.svg；All‑In‑One 会添加 svg/<project>_original.svg

打包（下载）

  • 按选择（web/mobile/desktop/all/original）构建暂存目录，然后压缩为 zip
  • ZIP 命名：<项目名> - <选择> - svg2icon.zip，如重名自动追加 (n)

主题与体验

  • 在窗口展示前依据已存主题设置背景，避免闪烁
  • 渲染进程通过 ?theme= 初始参数应用主题
  • 原生应用菜单连接常见操作（新建、设置、更新、手册、关于）

源码结构

src
├─ assets/        # 资源（图标、清单）
├─ components/    # UI 积木（布局、弹窗、表格）
├─ constants/     # 共享常量（标签、尺寸、键）
├─ electron/      # 主进程、IPC 处理、preload 桥
├─ renderer/      # HTML 容器与启动代码
├─ services/      # 领域逻辑（IconGenerationService 等）
├─ styles/        # 全局 + 主题样式（默认暗色）
├─ types/         # TypeScript 类型/接口
├─ utils/         # 工具（格式化、事件、文件）
└─ main.ts        # 应用入口（创建 BrowserWindow，挂载 IPC）

构建与分发

  • TypeScript 编译至 dist/
  • electron-builder 目标：Linux（DEB/RPM）、Windows（NSIS）、macOS（在适用时）
  • 感知宿主的打包脚本会依据宿主环境选择可用目标

开发流程

  • 安装依赖：npm install
  • 运行开发（隔离的 userData）：npm run dev（追加 -dev 后缀）
  • 打包：npm run dist 或 package.json 中的特定平台脚本
Skip to main content