[AI Development Lab] 【deepin插件开发活动】svgs2dci (适合转制任务栏插件DCI图标)
Tofloor
poster avatar
hotime
deepin
8 hours ago
Author

svgs2dci:一键将 SVG 打包为 deepin DCI 图标

svgs2dci 是一款 deepin DCI 图标包生成工具。你只需提供亮色与暗色两套 SVG格式的图标源文件,按图标状态(normal/disabled/hover/pressed)和色调(light/dark)进行绑定,工具会自动生成符合 DCI 规范的目录结构、导出相应分辨率的 PNG 图标,并调用libdtk6gui-bindci-icon-theme工具,最终输出一个可直接使用的.dci 文件。

功能亮点

🎨 亮/暗双色调 SVG 导入
分别导入 light 与 dark 主题的 SVG,支持四种图标状态自由组合绑定,一套素材覆盖完整交互场景。

📁 图标类型管理
内置“托盘图标”(16/22/24/32)与“应用图标”(16~512)两种预设类型,也支持自定义类型。自定义类型支持 长按进入删除模式双击内联重命名,操作直观自然。

📐 尺寸与缩放灵活配置
支持 10 种图标尺寸(16~512)多选 + 3 种缩放倍数(1x/2x/3x)勾选,生成目录结构实时预览。

↕️ 拖拽导入
从文件管理器直接拖拽 SVG 文件到槽位,自动绑定当前选中的状态/色调组合。

👁️ 实时目录树预览
左侧面板随绑定状态与配置项实时刷新 DCI 目录结构,生成前即可确认结果。

⚙️ 调用官方工具生成
SVG 导出为各分辨率 PNG 后,通过 QProcess 调用系统 dci-icon-theme 工具打包输出 .dci 文件,完全兼容 deepin 图标规范。

💾 自定义配置持久化
图标类型名称、尺寸勾选、缩放勾选通过 QSettings 持久化,重启后自动恢复。

技术实现

  • 界面框架:Qt6 + DTK6(DMainWindow + DTitlebar),标题栏内置「关于/主题/退出」菜单
  • SVG 渲染预览QSvgRenderer 渲染为 QPixmap,light 主题使用白底,dark 主题使用 DTK 标准深色调色板
  • 生成流程:绑定 SVG 复制到临时目录 → 构造 /.svg/dark/.svgQProcess 调用 dci-icon-theme 打包 → 输出 .dci 移动到用户目标目录
  • 配置持久化QSettings 保存自定义类型名、尺寸与缩放勾选
  • 交互细节:槽位悬停显示「-」清除按钮;长按 600ms 进入删除模式;双击内联重命名;编辑框失焦自动确认

构建与安装

依赖:CMake ≥ 3.16、Qt6(Widgets/Svg/DBus)、DTK6(Widget/Gui/Core)、libdtk6gui-bin(提供 dci-icon-theme 工具)

sudo apt build-dep .
dpkg-buildpackage -uc -us -b
sudo apt install ./top.hotime.svgs2dci_0.1.0_amd64.deb

截图

1.png

2.png

3.png

4.png

5.png

开发过程说明

本项目全程使用 deepin Skills(dtk-development 等)辅助开发,覆盖:

  • DTK 应用框架规范(DApplication/DMainWindow/DTitlebar 初始化、About 对话框元信息、loadTranslator 翻译加载)
  • DCI 图标规范与 dci-icon-theme 工具调用链路
  • deepin 配置与许可惯例(REUSE、GPL-3.0 合规、桌面文件与 hicolor 图标主题安装规则)
  • 关键排错记录:DAboutDialog 主页显示问题分析(setApplicationHomePage()setWebsiteLink() 独立路径,需手动设置 About 对话框的网站链接覆盖默认 www.deepin.org
  • DTK6 迁移适配(DTK_VERSION_CHECK 条件编译、头文件路径、Qt6 兼容性)

11.png

12.png

13.png

源码与协议

🧩 开发花絮:从需求到工具

这个工具的诞生,其实源于同时期开发的另一个任务栏插件——dde-dock-rebootto-plugin

在开发任务栏插件时,我需要为插件准备一个支持系统亮/暗主题自动切换的托盘图标。根据 deepin 的 DCI 图标规范,这需要将分别设计的 light 和 dark 两套 SVG 图标,按照 DCI 格式打包成一个 .dci 文件。

但在当时,我并没有找到一款能够直观导入两套 SVG、并一键生成 DCI 文件的图形化工具。为了不阻塞插件开发进度,遂用 AI 快速搭建了 svgs2dci 的 Demo 版本,临时解决了这个“最后一公里”的图标打包需求。

Reply Favorite View the author
All Replies
avatar
骑🐖追帅哥bot
Moderator
3 hours ago
#1

Reply View the author
avatar
𰻞𰻝面
deepin
31 minutes ago
#2

agree

太需要了,一直想改图标,搜索一圈不知道怎么弄,这简直是雪中送炭!

Reply View the author