Bitwarden clients 如何构建 BWI 图标字体并批量迁移旧图标名称【免费下载链接】clientsBitwarden client apps (web, browser extension, desktop, and cli).项目地址: https://gitcode.com/GitHub_Trending/cl/clientsBitwarden clients 仓库的图标体系由两部分组成用 Fantasticon 把 Figma 导出的 SVG 构建成 BWI 图标字体以及当图标改名后批量替换代码库中的旧引用。本文覆盖这两项任务先按流程新增/重建bwi-图标字体命令npm run icons:build再在需要把旧图标名改名为新名称时通过scripts/material-icons/migration-map.ts配置映射并用npm run icons:migrate批量替换。适用环境是本地克隆的 clients 仓库使用 npm 脚本与ts-node运行 TypeScript 脚本。图标命名规则文件名直接决定 CSS 类名整个流程的前提是理解命名机制libs/assets/src/material-icons/目录下的 SVG 文件名会直接成为 CSS 类名bwi-前缀自动添加。例如help.svg生成类.bwi-helpstar-filled.svg生成.bwi-star-filled。命名规则要求使用 kebab-casestar-filled.svg而不是starFilled.svg或star_filled.svg文件名在保存后很难改动代码里到处引用该名称所以导出前要确认名称。SVG 需从 Figma 导出导出设置Outline stroke 启用、Include id attribute 禁用、Simplify stroke 启用。构建图标字体把 SVG 文件保存到libs/assets/src/material-icons/后在仓库根目录运行npm run icons:build该脚本build-with-bwi-names.ts按顺序完成以下工作不需要手工执行其中任何一步处理图标变体根据 migration-map.ts 中的FIGMA_VARIANTS生成一对多映射的临时 SVG 副本当前只有一条collection.svg同时生成bwi-collection和bwi-collection-shared构建结束后删除这些临时副本调用 Fantasticon 从全部 SVG 生成字体文件woff2、woff、ttf、svg更新 SCSS 中的$icons映射同时为遗留旧名写入别名条目实现新旧名称双向兼容用npx sass把 SCSS 编译为 CSS自动重新生成 icon.ts含 Figma 名与遗留名的完整数组BITWARDEN_ICONS及类型BitwardenIcon。该文件标注 do not edit manually不要手工编辑清理构建过程中的临时文件。输出文件文件内容bwi-font.*字体文件包括bwi-font.woff2、bwi-font.woff、bwi-font.ttf、bwi-font.svgstyle.scss更新后的图标映射$iconsicon.ts自动生成的 TypeScript 图标列表构建后验证视觉验证运行npm run storybook对应ng run components:storybook在 Documentation / Icons 页面确认新图标显示正确。类型检查运行npm run test:types确认 TypeScript 无编译错误。用法验证在组件中引用图标名i classbwi bwi-help/i尺寸与动效用工具类控制定义在 style.scss 中.bwi-sm、.bwi-lg、.bwi-2x、.bwi-3x、.bwi-4x、.bwi-fw以及旋转/动画类.bwi-rotate-270、.bwi-spin!-- 文档示例 -- i classbwi bwi-help bwi-lg/i i classbwi bwi-loading bwi-spin/i新图标的 Storybook 文档登记新增图标后还要在 icon-data.ts 的对应分类statusIndicators、bitwardenObjects、actions、directionalMenuIndicators、miscObjects、platformsAndLogos中登记一条记录const actions [ // ... existing icons ... { id: bwi-your-new-icon, usage: Detailed description of when and how to use this icon., }, ];其中id替换为你的图标类名usage写清使用场景与变体说明。这一步是手工维护的字体构建脚本不会自动完成。批量迁移旧图标名称当你需要把已有的旧图标名在代码库范围内改名为新名称时例如标准化到 Figma 命名使用迁移脚本 migrate-icon-names.ts。它专门做批量改名不适用于新增图标。1. 在 migration-map.ts 中添加映射打开 migration-map.ts把映射加入BWI_TO_FIGMA对象不带bwi-前缀脚本会自动补上export const BWI_TO_FIGMA: Recordstring, string { // ... existing mappings ... // Add your migration here old-icon-name: new-icon-name, };文档给出的示例question-circle: help即bwi-question-circle→bwi-help、spinner: loading即bwi-spinner→bwi-loading。该映射表在构建脚本中也有作用icons:build会根据同一份映射在 SCSS 与 icon.ts 中保留旧名别名所以新旧名称在样式层面都可用。2. 先预览再执行先以 dry-run 模式预览只列出将被修改的文件和出现次数不实际改动任何文件npm run icons:migrate -- --dry-run确认预览内容符合预期后执行正式迁移npm run icons:migrate该命令会用写文件的方式修改仓库中的源码文件批量原地替换执行前请确保工作区干净、可以接受一次可整体回滚的改动例如已提交当前状态。脚本匹配时使用词边界并跳过后跟文件扩展名的情况避免把bwi-star-filled里的bwi-star-f之类部分误替换无法读取的文件会被跳过。脚本的搜索范围与文件类型与 README 一致源码中同样硬编码目录apps/、libs/、bitwarden_license/扩展名.ts、.html、.scss、.css、.md、.mdx跳过node_modules、.git、dist、build、coverage、.angular、storybook-static。3. 核对迁移报告正式迁移非 dry-run完成后脚本会把所有替换写入 migration-report.json检查其中的条目是否符合预期[ { file: apps/web/src/app/components/icon.component.html, oldName: bwi-question-circle, newName: bwi-help, occurrences: 3 } ]以上为文档示例格式。确认无误后提交git add . git commit -m Migrate bwi-spinner to bwi-loading仓库还提供一个反向脚本npm run icons:reverse-migratereverse-migrate-icon-names.ts把消费代码中的 Figma 名换回旧 BWI 名同样支持--dry-run预览按脚本头注释它在 apps 与 libs除 libs/components范围内工作供需要在新旧名称间切换时使用。常见问题排查README 列出的排查项按现象对照处理构建后图标不显示确认 SVG 在libs/assets/src/material-icons/下确认文件名是 kebab-case 且扩展名为.svg重新运行npm run icons:build清理浏览器缓存。显示了错误的图标核对 SVG 文件名它直接就是 CSS 类名确认组件中使用的bwi-类名正确检查是否存在文件名相近的重复 SVG。字体不更新需要删除已生成的字体文件再重建。下面第一条命令会删除bwi-font.*四个生成字体文件均为构建产物删除后可由构建重新生成rm libs/angular/src/scss/bwicons/fonts/bwi-font.* npm run icons:buildTypeScript 报错确认图标已包含在 icon.ts 中该文件由构建自动生成重新运行icons:build通常即可刷新并确认图标名格式为bwi-icon-name。下一步新增图标的完整链路到此为止导出 SVG → 保存 →npm run icons:build→ Storybook 与类型检查验证 → 在 icon-data.ts 登记文档。改名场景则是在同一命名规则下通过migration-map.tsicons:migrate完成批量替换并核对migration-report.json。更多细节可参考 scripts/material-icons/README.md。【免费下载链接】clientsBitwarden client apps (web, browser extension, desktop, and cli).项目地址: https://gitcode.com/GitHub_Trending/cl/clients创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Bitwarden clients 如何构建 BWI 图标字体并批量迁移旧图标名称
Bitwarden clients 如何构建 BWI 图标字体并批量迁移旧图标名称【免费下载链接】clientsBitwarden client apps (web, browser extension, desktop, and cli).项目地址: https://gitcode.com/GitHub_Trending/cl/clientsBitwarden clients 仓库的图标体系由两部分组成用 Fantasticon 把 Figma 导出的 SVG 构建成 BWI 图标字体以及当图标改名后批量替换代码库中的旧引用。本文覆盖这两项任务先按流程新增/重建bwi-图标字体命令npm run icons:build再在需要把旧图标名改名为新名称时通过scripts/material-icons/migration-map.ts配置映射并用npm run icons:migrate批量替换。适用环境是本地克隆的 clients 仓库使用 npm 脚本与ts-node运行 TypeScript 脚本。图标命名规则文件名直接决定 CSS 类名整个流程的前提是理解命名机制libs/assets/src/material-icons/目录下的 SVG 文件名会直接成为 CSS 类名bwi-前缀自动添加。例如help.svg生成类.bwi-helpstar-filled.svg生成.bwi-star-filled。命名规则要求使用 kebab-casestar-filled.svg而不是starFilled.svg或star_filled.svg文件名在保存后很难改动代码里到处引用该名称所以导出前要确认名称。SVG 需从 Figma 导出导出设置Outline stroke 启用、Include id attribute 禁用、Simplify stroke 启用。构建图标字体把 SVG 文件保存到libs/assets/src/material-icons/后在仓库根目录运行npm run icons:build该脚本build-with-bwi-names.ts按顺序完成以下工作不需要手工执行其中任何一步处理图标变体根据 migration-map.ts 中的FIGMA_VARIANTS生成一对多映射的临时 SVG 副本当前只有一条collection.svg同时生成bwi-collection和bwi-collection-shared构建结束后删除这些临时副本调用 Fantasticon 从全部 SVG 生成字体文件woff2、woff、ttf、svg更新 SCSS 中的$icons映射同时为遗留旧名写入别名条目实现新旧名称双向兼容用npx sass把 SCSS 编译为 CSS自动重新生成 icon.ts含 Figma 名与遗留名的完整数组BITWARDEN_ICONS及类型BitwardenIcon。该文件标注 do not edit manually不要手工编辑清理构建过程中的临时文件。输出文件文件内容bwi-font.*字体文件包括bwi-font.woff2、bwi-font.woff、bwi-font.ttf、bwi-font.svgstyle.scss更新后的图标映射$iconsicon.ts自动生成的 TypeScript 图标列表构建后验证视觉验证运行npm run storybook对应ng run components:storybook在 Documentation / Icons 页面确认新图标显示正确。类型检查运行npm run test:types确认 TypeScript 无编译错误。用法验证在组件中引用图标名i classbwi bwi-help/i尺寸与动效用工具类控制定义在 style.scss 中.bwi-sm、.bwi-lg、.bwi-2x、.bwi-3x、.bwi-4x、.bwi-fw以及旋转/动画类.bwi-rotate-270、.bwi-spin!-- 文档示例 -- i classbwi bwi-help bwi-lg/i i classbwi bwi-loading bwi-spin/i新图标的 Storybook 文档登记新增图标后还要在 icon-data.ts 的对应分类statusIndicators、bitwardenObjects、actions、directionalMenuIndicators、miscObjects、platformsAndLogos中登记一条记录const actions [ // ... existing icons ... { id: bwi-your-new-icon, usage: Detailed description of when and how to use this icon., }, ];其中id替换为你的图标类名usage写清使用场景与变体说明。这一步是手工维护的字体构建脚本不会自动完成。批量迁移旧图标名称当你需要把已有的旧图标名在代码库范围内改名为新名称时例如标准化到 Figma 命名使用迁移脚本 migrate-icon-names.ts。它专门做批量改名不适用于新增图标。1. 在 migration-map.ts 中添加映射打开 migration-map.ts把映射加入BWI_TO_FIGMA对象不带bwi-前缀脚本会自动补上export const BWI_TO_FIGMA: Recordstring, string { // ... existing mappings ... // Add your migration here old-icon-name: new-icon-name, };文档给出的示例question-circle: help即bwi-question-circle→bwi-help、spinner: loading即bwi-spinner→bwi-loading。该映射表在构建脚本中也有作用icons:build会根据同一份映射在 SCSS 与 icon.ts 中保留旧名别名所以新旧名称在样式层面都可用。2. 先预览再执行先以 dry-run 模式预览只列出将被修改的文件和出现次数不实际改动任何文件npm run icons:migrate -- --dry-run确认预览内容符合预期后执行正式迁移npm run icons:migrate该命令会用写文件的方式修改仓库中的源码文件批量原地替换执行前请确保工作区干净、可以接受一次可整体回滚的改动例如已提交当前状态。脚本匹配时使用词边界并跳过后跟文件扩展名的情况避免把bwi-star-filled里的bwi-star-f之类部分误替换无法读取的文件会被跳过。脚本的搜索范围与文件类型与 README 一致源码中同样硬编码目录apps/、libs/、bitwarden_license/扩展名.ts、.html、.scss、.css、.md、.mdx跳过node_modules、.git、dist、build、coverage、.angular、storybook-static。3. 核对迁移报告正式迁移非 dry-run完成后脚本会把所有替换写入 migration-report.json检查其中的条目是否符合预期[ { file: apps/web/src/app/components/icon.component.html, oldName: bwi-question-circle, newName: bwi-help, occurrences: 3 } ]以上为文档示例格式。确认无误后提交git add . git commit -m Migrate bwi-spinner to bwi-loading仓库还提供一个反向脚本npm run icons:reverse-migratereverse-migrate-icon-names.ts把消费代码中的 Figma 名换回旧 BWI 名同样支持--dry-run预览按脚本头注释它在 apps 与 libs除 libs/components范围内工作供需要在新旧名称间切换时使用。常见问题排查README 列出的排查项按现象对照处理构建后图标不显示确认 SVG 在libs/assets/src/material-icons/下确认文件名是 kebab-case 且扩展名为.svg重新运行npm run icons:build清理浏览器缓存。显示了错误的图标核对 SVG 文件名它直接就是 CSS 类名确认组件中使用的bwi-类名正确检查是否存在文件名相近的重复 SVG。字体不更新需要删除已生成的字体文件再重建。下面第一条命令会删除bwi-font.*四个生成字体文件均为构建产物删除后可由构建重新生成rm libs/angular/src/scss/bwicons/fonts/bwi-font.* npm run icons:buildTypeScript 报错确认图标已包含在 icon.ts 中该文件由构建自动生成重新运行icons:build通常即可刷新并确认图标名格式为bwi-icon-name。下一步新增图标的完整链路到此为止导出 SVG → 保存 →npm run icons:build→ Storybook 与类型检查验证 → 在 icon-data.ts 登记文档。改名场景则是在同一命名规则下通过migration-map.tsicons:migrate完成批量替换并核对migration-report.json。更多细节可参考 scripts/material-icons/README.md。【免费下载链接】clientsBitwarden client apps (web, browser extension, desktop, and cli).项目地址: https://gitcode.com/GitHub_Trending/cl/clients创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
