# @angular-extensions/svg-icons-builder 中文文档 规范地址：https://npmcn.com/package/%40angular-extensions/svg-icons-builder/ 版本：11\.0\.0 npm 元数据更新时间：2024-02-13T07:39:30.544Z 中文译文更新时间：2026-11-06T04:11:40.528Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40angular-extensions/svg-icons-builder 原文对照：https://npmcn.com/package/%40angular-extensions/svg-icons-builder/?lang=original 项目主页：https://github.com/angular-extensions/svg-icons-builder 源码仓库：https://github.com/angular-extensions/svg-icons-builder ## 关键信息（来自 npm 元数据） - 包体积（解压后）：55.9 kB，33 个文件 - TypeScript 类型：未声明 - 运行依赖：5 个 - 首次发布：2020-11-16T14:43:51.997Z - 最新版本发布：2024-02-13T07:39:30.327Z - 近 30 天下载量：33342（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：5（近 12 个月 0 个） ## 中文简介 Svg-icons-buildinger是一款用于 svg-to-ts 工程的角构件 ## 安装 ```sh npm install @angular-extensions/svg-icons-builder ``` 也可以使用：`pnpm add @angular-extensions/svg-icons-builder`、`yarn add @angular-extensions/svg-icons-builder`、`bun add @angular-extensions/svg-icons-builder` ## README # svg-icons-建设器 [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](https://npmcn.com/package/%40angular-extensions/svg-icons-builder/#readme-contributors-) Svg-icons-buildinger是一个角建设者为 [svg-to-ts (韩语)](https://github.com/kreuzerk/svg-to-ts) 项目。 它可用于将Angular库或SPA内部的SVG图标转换为对象,常数甚至个体TypeScript或JavaScript文件. 找到更多关于官方的消息 [svg-to-ts 文档](https://github.com/kreuzerk/svg-to-ts)。 。 。 . ## 使用量 ### 安装 国家预防机制: `npm install @angular-extensions/svg-icons-builder` 角 CLI : (英语) `ng add @angular-extensions/svg-icons-builder` ### 配置构建器 要使用建构器, 您需要添加新条目 `architect` 对象在您体内 `angular.json`。 。 。 . 一个有效的 [svg- to- ts 配置](https://github.com/kreuzerk/svg-to-ts)选项取决于 `conversionType` 并因此可能有所不同。 表示 `convesionType: "files"` 将显示不同于配置 `conversionType: "constants"`每一个 `conversionType` 拥有自己的建筑师. 在我们的例子中,我们称之为 `generate-icons`。然后需要指定以下属性: ## `conversionType: constants` - **构建器**数字 : `"@angular-extensions/svg-icons-builder:svg-icons-constants-builder"` - **配置**数字 : [svg- to-ts 常数配置](https://github.com/kreuzerk/svg-to-ts#2-multiple-constants---treeshakable-and-typesafe-with-one-file-conversiontypeconstants) ```json "generate-icons": { "builder": "@angular-extensions/svg-icons-builder:svg-icons-constants-builder", "options": { "conversionType": "constants", "fileName": "myIcons", "generateType": false, "generateTypeObject": false, "generateCompleteIconSet": true, "srcFiles": ["./src/icons/*.svg"], "outputDirectory": "./dist/icons", "interfaceName": "DinosaurIcon", "typeName": "dinosaurIcon", "prefix": "dinosaurIcon", "svgoConfig": { "plugins": ["cleanupAttrs"] } } } ``` ## `conversionType: files` - **构建器**数字 : `"@angular-extensions/svg-icons-builder:svg-icons-files-builder"` - **配置**数字 : [svg-to-ts 文件配置](https://github.com/kreuzerk/svg-to-ts#3-tree-shakable-and-optimized-for-lazy-loading-conversiontypefiles) ```json "generate-icons": { "builder": "@angular-extensions/svg-icons-builder:svg-icons-files-builder", "options": { "conversionType": "files", "srcFiles": ["./projects/dinosaur-icons/icons/**/*.svg"], "outputDirectory": "./dist/dinosaur-icons/icons", "interfaceName": "DinosaurIcon", "generateType": false, "generateTypeObject": false, "generateCompleteIconSet": false, "exportCompleteIconSet": false, "fileName": "dinosaur-icons", "iconsFolderName": "dinosaur-icons", "objectName": "dinosaur-icons", "typeName": "dinosaurIcon", "prefix": "dinosaurIcon", "modelFileName": "dinosaur-icons", "barrelFileName": "index", "svgoConfig": { "plugins": ["cleanupAttrs"] }, "compileSources": true } } ``` ## `conversionType: object` - **构建器**数字 : `"@angular-extensions/svg-icons-builder:svg-icons-object-builder"` - **配置**数字 : [svg- to-ts 对象配置](https://github.com/kreuzerk/svg-to-ts#1-converting-to-a-single-object-conversiontypeobject) ```json "generate-icons": { "builder": "@angular-extensions/svg-icons-builder:svg-icons-object-builder", "options": { "conversionType": "object", "srcFiles": ["./projects/dinosaur-icons/icons/**/*.svg"], "outputDirectory": "./dist/dinosaur-icons/icons", "fileName": "dinosaur-icons", "objectName": "dinosaur-icons", "svgoConfig": { "plugins": ["cleanupAttrs"] }, "compileSources": true } } ``` ### 运行构建器 要运行构建器, 您必须在您的 npm 脚本中添加新的 npm 脚本 `package.json`替换 `name-of-your-app` 与您的申请名称 . ```json "genrate-icons": "ng run name-of-your-app:generate-icons" ``` ## 核心小组 感谢这些伟大的人[emoji 密钥](https://allcontributors.org/docs/en/emoji-key):

凯拉·阿尔特佩特尔
💻 🐛 📖 🤔 ⚠️
凯文·克罗伊泽
💻 🐛 📖 🤔 ⚠️
本项目遵循 [全部贡献者](https://github.com/all-contributors/all-contributors) 规格。 任何捐款都欢迎! ## 常见问题 ### @angular-extensions/svg-icons-builder 是什么？ Svg-icons-buildinger是一款用于 svg-to-ts 工程的角构件 ### 如何安装 @angular-extensions/svg-icons-builder？ 在项目目录运行 npm install @angular-extensions/svg-icons-builder，或使用 pnpm add / yarn add / bun add。 ### @angular-extensions/svg-icons-builder 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/angular-extensions\_\_svg-icons-builder 是否存在。 ### @angular-extensions/svg-icons-builder 可以商用吗？ @angular-extensions/svg-icons-builder 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @angular-extensions/svg-icons-builder 的下载量有多少？ 根据 npm 官方下载统计，@angular-extensions/svg-icons-builder 在 2026/10/06 – 2026/11/04 这 30 天内被下载 33,342 次，日均约 1,111 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @angular-extensions/svg-icons-builder 还在维护吗？ 最新版本 11\.0\.0 发布于 2024/02/13（2 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/11/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。