@aziontech/相机

Azion 的图标字体库 - 方位角 (单位:千美元)ai页:1 头像 (单位:千美元)pi)作为 CSS + woff2 交付.

概览

@aziontech/icons 是捆绑的双图标字体包 :

图标以 woff2 图标字体 与匹配的 CSS 类公用设备相匹配,使其具有框架不可知性——可用于平版HTML,Vue,React,或任何网络项目.

此外,还有一套 彩色品牌图标 (单位:千美元)ai-*-cor船舶分开。 由于一个图标-font glyph是单色的,多彩色的标志(渐变,多填充)不能活在woff2字体中——它们都作为双色发出 background-image CSS 类( 可像字体图标一样使用 : <i class="ai-google-cor"></i>)和作为内置SVG字符串的显示. 见 有色图标。 。 。 .

安装

npm install @aziontech/icons

使用量

通过 CSS / 捆绑器导入

// Import both icon sets (recommended)
import '@aziontech/icons'

// Or import individually
import '@aziontech/icons/azionicons'
import '@aziontech/icons/primeicons'

通过 HTML 导入 <link>

<!-- All icons -->
<link
  rel="stylesheet"
  href="node_modules/@aziontech/icons/dist/index.css"
/>

<!-- Or individually -->
<link
  rel="stylesheet"
  href="node_modules/@aziontech/icons/dist/azionicons.css"
/>
<link
  rel="stylesheet"
  href="node_modules/@aziontech/icons/dist/primeicons.css"
/>

在 HTML 中使用

<!-- Azion icons (prefix: ai) -->
<i class="ai ai-azion"></i>
<i class="ai ai-edge-application"></i>
<i class="ai ai-edge-functions"></i>

<!-- PrimeIcons (prefix: pi) -->
<i class="pi pi-home"></i>
<i class="pi pi-cog"></i>
<i class="pi pi-search"></i>

软件包出口

该套件暴露了以下命名的导出( 在生成的 dist/package.json:

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 基类外加修饰符:

<i class="ai ai-azion"></i>
<i class="ai ai-edge-application"></i>
<i class="ai ai-edge-functions"></i>
<i class="ai ai-edge-firewall"></i>
<i class="ai ai-edge-dns"></i>
<i class="ai ai-edge-kv"></i>
<i class="ai ai-edge-sql"></i>
<i class="ai ai-edge-storage"></i>
<i class="ai ai-data-stream"></i>
<i class="ai ai-real-time-metrics"></i>
<i class="ai ai-real-time-events"></i>
<i class="ai ai-marketplace"></i>
<i class="ai ai-domains"></i>
<i class="ai ai-digital-certificates"></i>

著名类别分组:

• 平台支柱 —— 说 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 基准类 :

<i class="pi pi-home"></i>
<i class="pi pi-cog"></i>
<i class="pi pi-check"></i>
<i class="pi pi-times"></i>
<i class="pi pi-search"></i>
<i class="pi pi-user"></i>

有色图标

一些图标——第三方品牌和框架标志——本质上是多彩(梯度,多填). 一个图标 字体 glyph是单色的,因此这些不能以上方的woff2字体来相接. 取而代之的是两种方式,用一种 -cor 后缀 (ai-react-cor, (中文(简体) ), ai-vue-cor, (中文(简体) ), ai-next-cor(中文(简体) ).

如何运作

每个 src/svg-raw/ai-cor/<name>.svg 汇编成 两个 文物——绝不进入woff2字体:

中央情报局是 没有 字体格并 没有 基础64。 每个 SVG 被内置为 %- 编码( URL- 编码) data:image/svg+xml URI 资源 ——小于基数64,gzip友好,输出中可被人读取. 生成的样式表是一个共享框规则加一条 background-image 每个图标的规则 :

/* 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-<name>-cor 类带框 财务报告和审定财务报表 图像,它是 自定义: 不同于单色图标(需要 .ai 财务报告和审定财务报表 .ai-<name>),需要彩色图标 仅限 它自己的阶级。 添加 ai 基础级无害,但没有必要.

1.作为CSS类(被推荐——像字体图标一样使用)

导入 @aziontech/icons (或 @aziontech/icons/azionicons-color登记a .ai-<name>-cor 每个有色图标的分类。 大小为 1em,所以它下降为相同的 <i> 标为字体图标 :

<i class="ai-google-cor"></i>
<i
  class="ai-react-cor"
  style="font-size: 32px;"
></i>

这个 font-size 控制框(1em); 图标保留自己的调色板, 不论 color。 。 。 .

2. 作为内置SVG(当需要原始标记时)

同样的图标也可以作为内置 SVG 字符串在 @aziontech/icons/color-catalog ——当无法加载CSS时有用,或者想直接操纵标记:

<template>
  <!-- size via a wrapper; the SVG keeps its own brand palette -->
  <span
    style="width: 32px; height: 32px"
    v-html="reactIcon.svg"
  />
</template>

<script setup>
  import colorIcons from '@aziontech/icons/color-catalog'
  const reactIcon = colorIcons.find((i) => i.name === 'ai-react-cor')
</script>

彩色图标是 没有 由 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为主题:

.my-icon {
  font-size: 14px; /* control size */
  color: #f97316; /* control color */
}

<i
  class="ai ai-azion"
  style="font-size: 32px; color: var(--brand-color);"
></i>

生成的 CSS 基础类在每个图标前缀上设置以下属性( ).ai, (中文(简体) ), .pi:

.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;
}

设计

绘图图标

使用 要绘制的图像模板文件 ,然后将新图标打开 图标库 figma 中跨设计文件.

绘制图标时遵循这些规则 :

• 谭:90x90
• 中风: 6pt
• 网格: 4px 网络
• 网格 2: 2px
• 颜色 : # 000000 或文本颜色
• 图层名称:矢量

在图标完成后, 移动到库页面, 在 14x14px 大小中放入正确的类别, 并按上面的这个样本组织图层 :

总是使用Union特性来将中风转换为统一路径.

为导出准备 SVG 文件

为了确保与我们的图标字体管道(fantasticon + 验证脚本)相容,所有SVG必须经过适当的清洗并正常化后才能被添加到src/svg-raw/.

我们建议用法格玛 SVG 导出插件 与链接的预设(Icons Library)根据我们的标准自动准备图标.

预设参考文件 : presets/preset-svg-export.json

• 将所有形状转换为 <path>
• 删除不必要的元数据和属性
• 可能时合并路径
• 删除下划线
• 将填充规范化
• 减少并优化路径数据(多通道)
• 转换 black 改为 currentColor
• 删除硬码填充和中键

正在检查 SVG

您的SVG需要用代码来显示:

<svg width="14" height="14" fill="currentColor">
  <path d="M6.882.032a.581.581 0 0 1 .35.036l6.4 2.8a.58.58 0 0 1 .348.532v7.2a.58.58 0 0 1-.348.531l-6.4 2.8a.58.58 0 0 1-.464 0l-6.4-2.8A.58.58 0 0 1 .02 10.6V3.4a.58.58 0 0 1 .348-.532l6.4-2.8.114-.036ZM1.18 10.22l5.24 2.293V6.579L1.18 4.286v5.934Zm6.4-3.64v5.932l5.24-2.292V4.286L7.58 6.58ZM2.047 3.4 7 5.566 11.953 3.4 7 1.233 2.046 3.4Z"/>
</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/)

可用的脚本

添加新的 Azion 图标

1. 将 SVG 文件放入 src/svg-raw/ai/ 在命名公约之后 ai-<icon-name>.svg
2. 确保SVG满足 所需经费 下级
3. 运行 npm run build 重新生成字体文件
4. 校验图标在生成的 CSS 中正确显示

添加一个新的 PrimeIcon

遵循上面相同的步骤,但将 SVG 放在 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/ 使用命名公约 ai-<icon-name>-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-<name>-cor 类 dist/azionicons-color.css,也可以输入 index.css 枪管). 这是故意的 不包括 从woff2字体和从 dist/catalog.json。 。 。 .
4. 校验 <i class="ai-<name>-cor"></i> 以颜色制作,并显示在图标画廊中(apps/icons-gallery) (中文(简体) ).

验证 SVG

所有 SVG 源文件都被验证 scripts/validate.mjs 在字体生成之前。 SVG必须:

随时运行验证脚本 :

node scripts/validate.mjs

报告显示QQ错误( 屏蔽- 构建会失败) , QQ警告( 可能影响渲染) , iQQ信息消息 .

错误级别检查 (积分):

• 占位符/ 不完整的 SVG
• 失踪 <path> 元素
• 有空格的文件名

警告级检查 (无阻:

• 基于中键的路径
• fill="black" 编号 : fill="#000" 编号 : fill="#000000" (应使用) currentColor(中文(简体) )
• <clipPath> 使用量
• 非平面视图框

信息级别检查数字 :

• 非标准视图框大小( 14x14 以外的任何)

字体生成

字体使用 怪兽 配置于 fantasticon.config.mjs数字 :

• 投入数字 : src/svg-raw/ai/ 财务报告和审定财务报表 src/svg-raw/pi/
• 输出格式数字 : woff2 仅限
• 资产类型数字 : css 仅限
• 产出数字 : dist/ (CSS + woff2) (中文(简体) )
• 字体高度: 1 000个单位(正常)
• CSS 模板数字 : templates/css.hbs - 生成 @font-face 声明 + .prefix.icon-name::before 规则

npm run build

修建管道(build(中文(简体) )

这个 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数字 :

# 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 是实际可公布的清单.

技术堆栈

许可证

麻省理工学院 Azion技术