# @aziontech/icons 中文文档 规范地址：https://npmcn.com/package/%40aziontech/icons/ 版本：4\.4\.0 npm 元数据更新时间：2026-11-03T18:00:56.099Z 中文译文更新时间：2026-11-07T17:20:19.409Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40aziontech/icons 原文对照：https://npmcn.com/package/%40aziontech/icons/?lang=original 项目主页：https://github.com/aziontech/webkit#readme 源码仓库：https://github.com/aziontech/webkit ## 关键信息（来自 npm 元数据） - 包体积（解压后）：289 kB，11 个文件 - TypeScript 类型：未声明 - 运行依赖：0 个 - 首次发布：2026-02-25T21:37:02.009Z - 最新版本发布：2026-11-03T18:00:55.687Z - 近 30 天下载量：3805（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：18（近 12 个月 18 个） ## 中文简介 Azion 图标库 — azionicons + priimicons 作为 CSS/woff2 ## 安装 ```sh npm install @aziontech/icons ``` 也可以使用：`pnpm add @aziontech/icons`、`yarn add @aziontech/icons`、`bun add @aziontech/icons` ## README # @aziontech/相机 > Azion 的图标字体库 - **方位角** (单位:千美元)`ai`页:1 **头像** (单位:千美元)`pi`)作为 CSS + woff2 交付. [![Package Icons](https://github.com/aziontech/webkit/actions/workflows/package-icons.yml/badge.svg?branch=main)](https://github.com/aziontech/webkit/actions/workflows/package-icons.yml) [![npm version](https://badge.fury.io/js/%40aziontech%2Ficons.svg)](https://badge.fury.io/js/%40aziontech%2Ficons) [![npm downloads](https://img.shields.io/npm/dm/@aziontech/icons)](https://www.npmjs.com/package/@aziontech/icons) [![npm unpacked size](https://img.shields.io/npm/unpacked-size/@aziontech/icons)](https://www.npmjs.com/package/@aziontech/icons) [![npm last publish](https://img.shields.io/npm/last-update/@aziontech/icons)](https://www.npmjs.com/package/@aziontech/icons) [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://npmcn.com/package/%40aziontech/icons/LICENSE) * * * ## 概览 `@aziontech/icons` 是捆绑的双图标字体包 : | 字体 | 前缀 | 图标 | 说明 | | --- | --- | --- | --- | | **方位角** | `ai` | 第87条 | Azion产品、平台和生态系统图标 | | **头像** | `pi` | 页:1 | 通用 UI 图标( PrimeIcons set) | 图标以 **woff2 图标字体** 与匹配的 CSS 类公用设备相匹配,使其具有框架不可知性——可用于平版HTML,Vue,React,或任何网络项目. 此外,还有一套 **彩色品牌图标** (单位:千美元)`ai-*-cor`船舶分开。 由于一个图标-font glyph是单色的,多彩色的标志(渐变,多填充)不能活在woff2字体中——它们都作为双色发出 `background-image` CSS 类( 可像字体图标一样使用 : ``)和作为内置SVG字符串的显示. 见 [有色图标](https://npmcn.com/package/%40aziontech/icons/#readme-colored-icons)。 。 。 . * * * ## 安装 ```bash npm install @aziontech/icons ``` * * * ## 使用量 ### 通过 CSS / 捆绑器导入 ```js // Import both icon sets (recommended) import '@aziontech/icons' // Or import individually import '@aziontech/icons/azionicons' import '@aziontech/icons/primeicons' ``` ### 通过 HTML 导入 `` ```html ``` ### 在 HTML 中使用 ```html ``` ### 软件包出口 该套件暴露了以下命名的导出( 在生成的 `dist/package.json`: ```js import '@aziontech/icons' // → dist/index.css (all sets + colored classes) import '@aziontech/icons/azionicons' // → dist/azionicons.css import '@aziontech/icons/azionicons-color' // → dist/azionicons-color.css (colored .ai-*-cor classes) import '@aziontech/icons/primeicons' // → dist/primeicons.css import catalog from '@aziontech/icons/catalog' // → dist/catalog.json (font icon list) import colorIcons from '@aziontech/icons/color-catalog' // → dist/color-catalog.json (colored SVGs) ``` * * * ## 图标参考 ### Azion 图标 (`ai`(中文(简体) ) 阿兹翁特有产品和生态系统图标. 都用这个 `.ai` 基类外加修饰符: ```html ``` 著名类别分组: - **平台支柱** —— 说 `ai-ai-pillar`, (中文(简体) ), `ai-build-pillar`, (中文(简体) ), `ai-deploy-pillar`, (中文(简体) ), `ai-secure-pillar`, (中文(简体) ), `ai-observe-pillar` - **产品** —— 说 `ai-edge-application`, (中文(简体) ), `ai-edge-functions`, (中文(简体) ), `ai-edge-firewall`, (中文(简体) ), `ai-edge-dns`, (中文(简体) ), `ai-gateway`, (中文(简体) ), `ai-load-balancer`, (中文(简体) ), `ai-waf-rules`, (中文(简体) ), `ai-tiered-cache`, (中文(简体) ), `ai-origin-shield`, (中文(简体) ), `ai-edge-ai`, (中文(简体) ), `ai-edge-connectors`, (中文(简体) ), `ai-edge-libraries`, (中文(简体) ), `ai-edge-nodes`, (中文(简体) ), `ai-edge-orchestrator`, (中文(简体) ), `ai-edge-pulse`, (中文(简体) ), `ai-edge-services`, (中文(简体) ), `ai-workloads` - **存储数据( D)** —— 说 `ai-edge-kv`, (中文(简体) ), `ai-edge-sql`, (中文(简体) ), `ai-edge-storage`, (中文(简体) ), `ai-data-stream`, (中文(简体) ), `ai-variables` - **观察性** —— 说 `ai-real-time-metrics`, (中文(简体) ), `ai-real-time-events`, (中文(简体) ), `ai-real-time-purge`, (中文(简体) ), `ai-live-ingest` - **警卫** —— 说 `ai-edge-firewall`, (中文(简体) ), `ai-waf-rules`, (中文(简体) ), `ai-network-lists`, (中文(简体) ), `ai-digital-certificates`, (中文(简体) ), `ai-custom-pages` - **联网** —— 说 `ai-domains`, (中文(简体) ), `ai-load-balancer`, (中文(简体) ), `ai-origin-shield`, (中文(简体) ), `ai-tiered-cache` - **Azion 工具** —— 说 `ai-azion-api`, (中文(简体) ), `ai-azion-cli`, (中文(简体) ), `ai-ask-azion`, (中文(简体) ), `ai-marketplace`, (中文(简体) ), `ai-configuration-service`, (中文(简体) ), `ai-integration-services` - **框架** —— 说 `ai-angular`, (中文(简体) ), `ai-astro`, (中文(简体) ), `ai-docusaurus`, (中文(简体) ), `ai-eleventy`, (中文(简体) ), `ai-gatsby`, (中文(简体) ), `ai-hexo`, (中文(简体) ), `ai-hono`, (中文(简体) ), `ai-hugo`, (中文(简体) ), `ai-jekyll`, (中文(简体) ), `ai-next`, (中文(简体) ), `ai-nuxt`, (中文(简体) ), `ai-preact`, (中文(简体) ), `ai-qwik`, (中文(简体) ), `ai-react`, (中文(简体) ), `ai-remix`, (中文(简体) ), `ai-vite`, (中文(简体) ), `ai-vitepress`, (中文(简体) ), `ai-vue`, (中文(简体) ), `ai-vuepress` - **一体化** —— 说 `ai-terraform`, (中文(简体) ), `ai-graphql`, (中文(简体) ), `ai-redis`, (中文(简体) ), `ai-turso`, (中文(简体) ), `ai-lora`, (中文(简体) ), `ai-instructor` - **支助和服务** —— 说 `ai-professional-services`, (中文(简体) ), `ai-technical-support`, (中文(简体) ), `ai-business-support`, (中文(简体) ), `ai-security-team`, (中文(简体) ), `ai-technical-account`, (中文(简体) ), `ai-pratices-review` - **UI 工具( U)** —— 说 `ai-home`, (中文(简体) ), `ai-filter-alt`, (中文(简体) ), `ai-column`, (中文(简体) ), `ai-layers`, (中文(简体) ), `ai-json`, (中文(简体) ), `ai-open`, (中文(简体) ), `ai-sparkles`, (中文(简体) ), `ai-scizors`, (中文(简体) ), `ai-datasheet`, (中文(简体) ), `ai-store` - **社会和媒体** —— 说 `ai-medium`, (中文(简体) ), `ai-rss`, (中文(简体) ), `ai-twitch`, (中文(简体) ), `ai-x` ### 缩写`pi`(中文(简体) ) 全面的通用UI图标集. 都用这个 `.pi` 基准类 : ```html ``` * * * ## 有色图标 一些图标——第三方品牌和框架标志——本质上是多彩(梯度,多填). 一个图标 **字体** glyph是单色的,因此这些不能以上方的woff2字体来相接. 取而代之的是两种方式,用一种 `-cor` 后缀 (`ai-react-cor`, (中文(简体) ), `ai-vue-cor`, (中文(简体) ), `ai-next-cor`(中文(简体) ). ### 如何运作 每个 `src/svg-raw/ai-cor/.svg` 汇编成 **两个** 文物——绝不进入woff2字体: | 产出 | 生成者 | 形状 | | --- | --- | --- | | `dist/azionicons-color.css` | `build-color-css.mjs` | (单位:千美元) `.ai--cor` 将 SVG 画成一个 `background-image` | | `dist/color-catalog.json` | `build-color-catalog.mjs` | `{ name, colored: true, svg }` 携带原始内置 SVG 字符串 | 中央情报局是 **没有** 字体格并 **没有** 基础64。 每个 SVG 被内置为 **%- 编码( URL- 编码) `data:image/svg+xml` URI 资源** ——小于基数64,gzip友好,输出中可被人读取. 生成的样式表是一个共享框规则加一条 `background-image` 每个图标的规则 : ```css /* shared box — applies to every colored icon */ .ai-angular-cor, .ai-astro-cor, /* … */ .ai-vue-cor { display: inline-block; width: 1em; /* scales with font-size, like a glyph's box */ height: 1em; background-repeat: no-repeat; background-position: center; background-size: contain; vertical-align: -0.125em; } /* one rule per icon — the vector, percent-encoded (not base64) */ .ai-google-cor { background-image: url("data:image/svg+xml,%3Csvg width='14' … %3E%3C/svg%3E"); } ``` 因为那个单身 `.ai--cor` 类带框 **财务报告和审定财务报表** 图像,它是 **自定义**: 不同于单色图标(需要 `.ai` **财务报告和审定财务报表** `.ai-`),需要彩色图标 **仅限** 它自己的阶级。 添加 `ai` 基础级无害,但没有必要. ### 1.作为CSS类(被推荐——像字体图标一样使用) 导入 `@aziontech/icons` (或 `@aziontech/icons/azionicons-color`登记a `.ai--cor` 每个有色图标的分类。 大小为 `1em`,所以它下降为相同的 `` 标为字体图标 : ```html ``` 这个 `font-size` 控制框(1em); 图标保留自己的调色板, 不论 `color`。 。 。 . ### 2\. 作为内置SVG(当需要原始标记时) 同样的图标也可以作为内置 SVG 字符串在 [`@aziontech/icons/color-catalog`](https://npmcn.com/package/%40aziontech/icons/#readme-package-exports) ——当无法加载CSS时有用,或者想直接操纵标记: ```vue ``` > 彩色图标是 **没有** 由 `color` 编号 : `currentColor` - 这就是重点所在。 对于可主题的单色版本的框架标志,使用单色字体图标取而代之(`ai-react`, (中文(简体) ), `ai-vue`, (中文(简体) ), `ai-next`(中文(简体) ). 可用的有色图标 : `ai-angular-cor`, (中文(简体) ), `ai-astro-cor`, (中文(简体) ), `ai-azuredevops-cor`, (中文(简体) ), `ai-bitbucket-cor`, (中文(简体) ), `ai-flutter-cor`, (中文(简体) ), `ai-gitlab-cor`, (中文(简体) ), `ai-google-cor`, (中文(简体) ), `ai-js-cor`, (中文(简体) ), `ai-kotlin-cor`, (中文(简体) ), `ai-next-cor`, (中文(简体) ), `ai-nuxt-cor`, (中文(简体) ), `ai-react-cor`, (中文(简体) ), `ai-redwood-cor`, (中文(简体) ), `ai-solidjs-cor`, (中文(简体) ), `ai-svelte-cor`, (中文(简体) ), `ai-ts-cor`, (中文(简体) ), `ai-vue-cor`。 。 。 . * * * ## 大小和主题 图标继承颜色通过 `currentColor`,使得它们可以轻而易举地以CSS为主题: ```css .my-icon { font-size: 14px; /* control size */ color: #f97316; /* control color */ } ``` ```html ``` 生成的 CSS 基础类在每个图标前缀上设置以下属性( )`.ai`, (中文(简体) ), `.pi`: ```css .ai { font-family: 'azionicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` * * * ## 设计 ### 绘图图标 使用 [要绘制的图像模板文件](https://www.figma.com/design/aerxJReCkLz3x3z29IERE9/Azion-Icons?node-id=937-361) ,然后将新图标打开 [图标库](https://www.figma.com/design/aerxJReCkLz3x3z29IERE9/Azion-Icons?node-id=933-65) figma 中跨设计文件. ![image](https://github.com/user-attachments/assets/6616ec55-a7eb-4517-8dd4-de0593d549d6) 绘制图标时遵循这些规则 : - 谭:90x90 - 中风: 6pt - 网格: 4px 网络 - 网格 2: 2px - 颜色 : # 000000 或文本颜色 - 图层名称:矢量 在图标完成后, 移动到库页面, 在 14x14px 大小中放入正确的类别, 并按上面的这个样本组织图层 : ![image](https://github.com/user-attachments/assets/e4d9feb1-4c6b-411c-b86b-afff689f9561) _总是使用Union特性来将中风转换为统一路径._ ### 为导出准备 SVG 文件 为了确保与我们的图标字体管道(fantasticon + 验证脚本)相容,所有SVG必须经过适当的清洗并正常化后才能被添加到src/svg-raw/. 我们建议用法格玛 [SVG 导出插件](https://www.figma.com/community/plugin/814345141907543603/svg-export) 与链接的预设(Icons Library)根据我们的标准自动准备图标. 预设参考文件 : [`presets/preset-svg-export.json`](https://npmcn.com/package/%40aziontech/icons/presets/svg-export.json) - 将所有形状转换为 `` - 删除不必要的元数据和属性 - 可能时合并路径 - 删除下划线 - 将填充规范化 - 减少并优化路径数据(多通道) - 转换 `black` 改为 `currentColor` - 删除硬码填充和中键 ### 正在检查 SVG 您的SVG需要用代码来显示: ``` ``` * * * ## 发展 ### 项目结构 ``` @aziontech/icons/ ├── dist/ # npm publishable output (gitignored) │ ├── azionicons.css │ ├── azionicons-color.css # colored .ai-*-cor classes (background-image) │ ├── azionicons.woff2 │ ├── primeicons.css │ ├── primeicons.woff2 │ ├── index.css │ ├── catalog.json # font icon list (ai + pi) │ ├── color-catalog.json # colored icons as inline SVG (ai-*-cor) │ ├── package.json # generated for npm publish │ ├── LICENSE │ └── README.md ├── src/ │ └── svg-raw/ │ ├── ai/ # Azion SVG source files (87 icons, monochrome → font) │ ├── ai-cor/ # Azion colored brand icons (inline SVG, NOT fonted) │ └── pi/ # PrimeIcons SVG source files (315 icons → font) ├── scripts/ │ ├── build.mjs # Build orchestrator: validate → fonts → catalogs → assemble │ ├── build-woff2.mjs # Font generation via fantasticon │ ├── build-catalog.mjs # Generates dist/catalog.json (font icons only) │ ├── build-color-catalog.mjs # Generates dist/color-catalog.json (colored SVGs) │ ├── build-color-css.mjs # Generates dist/azionicons-color.css (colored classes) │ └── validate-svg.mjs # SVG validation script ├── fantasticon.config.mjs # Font generation configuration (two font configs) ├── templates/ │ └── css.hbs # Handlebars CSS template for generated font files └── jsconfig.json # JS/TS path aliases (@/ → src/) ``` ### 可用的脚本 | 命令 | 说明 | | --- | --- | | `npm run build` | 校验 SVGs → 生成字体 → 组装 `dist/` 无 | | `npm run validate` | 只运行 SVG 验证( R)`node scripts/validate.mjs`(中文(简体) ) | | `npm run pack:dry` | 预览 npm 包内容(`cd dist && npm pack --dry-run`(中文(简体) ) | | `npm run publish` | 发布到 npm 从 `dist/` (单位:千美元)`cd dist && npm publish`(中文(简体) ) | | `npm run lint` | 带有 ESLint 的 Lint 源文件 | | `npm run format` | 格式 `scripts/` 财务报告和审定财务报表 `src/` 带有 Pretier | ### 添加新的 Azion 图标 1. 将 SVG 文件放入 [`src/svg-raw/ai/`](https://npmcn.com/package/%40aziontech/icons/src/svg-raw/ai/) 在命名公约之后 `ai-.svg` 2. 确保SVG满足 [所需经费](https://npmcn.com/package/%40aziontech/icons/#readme-svg-requirements) 下级 3. 运行 `npm run build` 重新生成字体文件 4. 校验图标在生成的 CSS 中正确显示 ### 添加一个新的 PrimeIcon 遵循上面相同的步骤,但将 SVG 放在 [`src/svg-raw/pi/`](https://npmcn.com/package/%40aziontech/icons/src/svg-raw/pi/) 使用 `pi-` 前缀. ### 添加新彩色 Azion 图标 彩色品牌图标绕过字体(一格为单色),以船为一格 `.ai-*-cor` CSS类(`dist/azionicons-color.css`\+ 内置的 SVG 显示表(`dist/color-catalog.json`) (中文(简体) ). 1. 设置 **多颜色** SVG 输入 [`src/svg-raw/ai-cor/`](https://npmcn.com/package/%40aziontech/icons/src/svg-raw/ai-cor/) 使用命名公约 `ai--cor.svg` (kebab- case,没有空格或点-例如. `ai-next-cor.svg`) (中文(简体) ). 2. 保持一个平方 `viewBox` (单位:千美元)`0 0 14 14`) (中文(简体) ). **别** 转换为 `currentColor` - 颜色才是重点. 3. 运行 `npm run build`图标由 `build-color-catalog.mjs` (-) `dist/color-catalog.json`和 `build-color-css.mjs` 页:1 `.ai--cor` 类 `dist/azionicons-color.css`,也可以输入 `index.css` 枪管). 这是故意的 **不包括** 从woff2字体和从 `dist/catalog.json`。 。 。 . 4. 校验 `` 以颜色制作,并显示在图标画廊中(`apps/icons-gallery`) (中文(简体) ). ### 验证 SVG 所有 SVG 源文件都被验证 [`scripts/validate.mjs`](https://npmcn.com/package/%40aziontech/icons/scripts/validate.mjs) 在字体生成之前。 SVG必须: 随时运行验证脚本 : ```bash node scripts/validate.mjs ``` 报告显示QQ错误( 屏蔽- 构建会失败) , QQ警告( 可能影响渲染) , iQQ信息消息 . **错误级别检查** (积分): - 占位符/ 不完整的 SVG - 失踪 `` 元素 - 有空格的文件名 **警告级检查** (无阻: - 基于中键的路径 - `fill="black"` 编号 : `fill="#000"` 编号 : `fill="#000000"` (应使用) `currentColor`(中文(简体) ) - `` 使用量 - 非平面视图框 **信息级别检查**数字 : - 非标准视图框大小( 14x14 以外的任何) * * * ## 字体生成 字体使用 [**怪兽**](https://github.com/tancredi/fantasticon) 配置于 [`fantasticon.config.mjs`](https://npmcn.com/package/%40aziontech/icons/fantasticon.config.mjs)数字 : - **投入**数字 : `src/svg-raw/ai/` 财务报告和审定财务报表 `src/svg-raw/pi/` - **输出格式**数字 : `woff2` 仅限 - **资产类型**数字 : `css` 仅限 - **产出**数字 : `dist/` (CSS + woff2) (中文(简体) ) - **字体高度**: 1 000个单位(正常) - **CSS 模板**数字 : [`templates/css.hbs`](https://npmcn.com/package/%40aziontech/icons/templates/css.hbs) - 生成 `@font-face` 声明 + `.prefix.icon-name::before` 规则 ```bash npm run build ``` ### 修建管道(`build`(中文(简体) ) 这个 [`scripts/build.mjs`](https://npmcn.com/package/%40aziontech/icons/scripts/build.mjs) 管弦乐团跑出7步: 1. **验证 SVG** - 运行 `scripts/validate-svg.mjs` (堵住错误) 2. **干净 `dist/`** ——删除并再创建输出目录 3. **生成字体** - 运行 `scripts/build-woff2.mjs` (两者的范特斯通) `ai` 财务报告和审定财务报表 `pi`; 颜色 `ai-cor` 文件夹不是字体输入) 4. **创建 `index.css`** — 桶文件导入 `azionicons.css`, (中文(简体) ), `azionicons-color.css`,以及 `primeicons.css` 5. **生成 `dist/package.json`** · 建立一个有npm出口的清洁包 6. **复制 LICENSE 和 README.md** 改为 `dist/` 无 7. **生成有色 CSS 目录( C)** —— 说 `dist/catalog.json` (font图标,通过 `build-catalog.mjs`, (中文(简体) ), `dist/color-catalog.json` (彩色SVGs,通过 `build-color-catalog.mjs`),以及 `dist/azionicons-color.css` (颜色) `.ai-*-cor` 课程,通过 `build-color-css.mjs`(中文(简体) ) ### 出版 软件包从 `dist/` 目录,包含它自己生成的 `package.json`数字 : ```bash # Build the package npm run build # Preview package contents npm run pack:dry # Publish to npm npm run publish ``` > **说明:** 词根 `package.json` 已经 `"private": true` 防止从根部意外发表。 生成的 `dist/package.json` 是实际可公布的清单. * * * ## 技术堆栈 | 工具 | 目的 | | --- | --- | | [怪兽](https://github.com/tancredi/fantasticon) | SVG — woff2 图标字体生成 | | [ESLint 语录](https://eslint.org/) | 线性 | | [高级](https://prettier.io/) | 代码格式化 | * * * ## 许可证 [麻省理工学院](https://npmcn.com/package/%40aziontech/icons/LICENSE) Azion技术 ## 常见问题 ### @aziontech/icons 是什么？ Azion 图标库 — azionicons \+ priimicons 作为 CSS/woff2 ### 如何安装 @aziontech/icons？ 在项目目录运行 npm install @aziontech/icons，或使用 pnpm add / yarn add / bun add。 ### @aziontech/icons 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/aziontech\_\_icons 是否存在。 ### @aziontech/icons 可以商用吗？ @aziontech/icons 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @aziontech/icons 的下载量有多少？ 根据 npm 官方下载统计，@aziontech/icons 在 2026/10/08 – 2026/11/06 这 30 天内被下载 3,805 次，日均约 127 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @aziontech/icons 还在维护吗？ 最新版本 4\.4\.0 发布于 2026/11/04（4 天前）；至今共发布 18 个版本，其中过去 12 个月发布了 18 个；首次发布于 2026/02/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。