# @alaskaairux/icons 中文文档
规范地址：https://npmcn.com/package/%40alaskaairux/icons/
版本：5\.31\.0
npm 元数据更新时间：2026-10-28T15:52:23.576Z
中文译文更新时间：2026-11-05T20:36:53.511Z
软件包许可：Apache-2\.0
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40alaskaairux/icons
原文对照：https://npmcn.com/package/%40alaskaairux/icons/?lang=original
项目主页：https://github.com/AlaskaAirlines/Icons#readme
源码仓库：https://github.com/AlaskaAirlines/Icons
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：11.3 MB，1877 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=20
- 运行依赖：2 个
- 首次发布：2020-04-09T21:34:00.964Z
- 最新版本发布：2026-10-28T15:52:23.411Z
- 近 30 天下载量：25625（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：140（近 12 个月 19 个）
## 中文简介
阿拉斯加航空和奥罗设计系统图标
## 安装
```sh
npm install @alaskaairux/icons
```
也可以使用：`pnpm add @alaskaairux/icons`、`yarn add @alaskaairux/icons`、`bun add @alaskaairux/icons`
## README
# 奥罗图标库
这个寄存器的重点在于在规模上管理企业在新的Auro设计系统中对图标的需求,并折旧任何遗留项目. 请参见所有辅助文档, 用于此 SVG 图标库的图标 .
## 安装
[](https://github.com/AlaskaAirlines/Icons/actions?query=workflow%3A%22Test+and+publish%22) [](https://www.npmjs.com/package/@alaskaairux/icons) [](https://www.apache.org/licenses/LICENSE-2.0) 
```bash
$ npm i @alaskaairux/icons
```
## 图标类别
图标属于一系列使用类别,其中包括:
| 类别 | 说明 |
| --- | --- |
| 警报 | 专门用于提醒用户认识状态的图标 |
| 危险 | 显示需要特殊处理的危险材料或危险货物的图标 |
| 飞行中 | 为“ 旅行日” 用户体验预留图标 |
| 接口 | 用于创建界面增强的图标 |
| 伙伴关系 | 与商业伙伴关系有关的图标 |
| 付款 | 交易流程中专用的图标 |
| 程序 | 与阿拉斯加航空公司程序相关的图标 |
| 商店 | 用于购物的图标 |
| 社会 | 用于社交媒体的图标 |
| 终端 | 与终端经验有关的图标 |
## 收款
除了上面的UI图标外,图书馆还出版更多共享相同构建,优化和版本管道的收藏:
| 收藏 | 离线路径 | 说明 |
| --- | --- | --- |
| 图标 | `dist/icons/` | 单色UI胶片,有锡通 `currentColor`。 。 。 . |
| 尾部/ 标志 | `dist/logos/` | 全彩航空尾巴和品牌标志. |
| 限制 | `dist/restricted/` | 全色标记保留用于限制用途. |
| 图像 | `dist/pictograms/` | 更大的,全彩的示意图图形. 见 [文献/图片](https://npmcn.com/package/%40alaskaairux/icons/docs/pictograms.md)。 。 。 . |
## JavaScript 框架支持
在使用其他JavaScript开发框架时,上面的过程可能不会被解析为HTML. 为了解决这一问题,可以使用一些技术.
在npm内部, `@alaskaairux/icons/dist/icons/`,开发者可以直接进入 SVG 供开发环境消费.
### JS SVGs的版本
这种回放输出了两类JS包裹的SVG,以便于与前端框架相融合.
#### ES5 样式 - 图标Name.js
**说明:** 用于图标 SVG, ES5 `iconName.js` 版本已贬值。 请更新新支持的 `iconName.mjs` 文件类型 。 目前这不适用于SVG标志或尾巴.
```javascript
module.exports={ ... }
```
#### ES6 样式 - 图标Name. mjs
**说明:** 页:1 `iconName_es6.js` 文件类型已贬值, 请确定更新所有引用 `iconName.mjs`。这目前不适用于SVG标志或尾部.
```javascript
export default { ... }
```
### 矩阵
Lit-element要求使用ES6模块导出语法,因此依赖性参考的例子有:
```js
import warning from '@alaskaairux/icons/dist/icons/alert/warning.mjs';
```
#### 非直接使用
解析 SVG HTML 成为 DOM 需要新自定义元素类范围内的行代码,例如:
```javascript
constructor() {
this.dom = new DOMParser().parseFromString(warning.svg, 'text/html');
this.svg = this.dom.body.firstChild;
}
```
现在,SVG DOM 被分配到 `this.svg` 变量,在 HTML 渲染() 模板中渲染此选项可能如下:
```html
${this.svg}
```
#### 指令使用
在组件文件头部,导入 [Lit 元素指令](https://lit.dev/docs/templates/directives/#unsafesvg)。 。 。 .
```js
// Lit2.0
import { unsafeSVG } from 'lit/directives/unsafe-svg.mjs';
// Legacy Lit Element
import { unsafeSVG } from 'lit-html/directives/unsafe-svg.mjs';
```
导入您的图标 SVG 引用
```js
import warning from '@alaskaairux/icons/dist/icons/alert/warning.mjs';
```
在 HTML 模板中使用
```html
${unsafeSVG(warning.svg)}
```
### 网络组件
Auro Icons最简单的使用是使用Auro-icon网络组件. 以下 HTML 有属性 API 示例 。 见 [奥罗站点](https://auro.alaskaair.com/components/auro/icon) 关于使用的细节.
```html
[optional description]
```
### 反应
反应支持与资产链接并在某个组件内使用这些资产的标准.
```javascript
import warning from '@alaskaairux/icons/dist/icons/alert/warning.svg';
```
在部分的内 `render()` 函数,在新变量中传递到 `src` 属性 `![]()
` 元素将成为资产.
```html
```
### SVG 反应装入器
使用 `svg-react-loader` 结合网页包,SVG将从指定的资源位置内入.
```javascript
import warning from '-!svg-react-loader!@alaskaairux/icons/dist/icons/alert/warning.svg';
```
在部分的内 `render()` 函数,仅引用通过 `svg-react-loader`。 。 。 .
```html
```
通过SVG React Loader,用户也可以在SVG内部覆盖属性. 例如,以下代码说明用户如何可以覆盖 `role="img"` 财务报告和审定财务报表 `aria-hidden="true"` 属性 :
```html
```
### 说明:eslint支持
上面的语法可能会给您的eslint配置带来问题. 可能出现以下错误:
```bash
Unexpected '!' in '-!svg-react-loader?name=Icon!@alaskaairux/icons/dist/icons/alert/warning.svg'. Do not use import syntax to configure webpack loaders
```
在这种情况下,在本部分中增加以下评论可涉及这一问题:
```javascript
// eslint-disable-next-line import/no-webpack-loader-syntax
import Arrowdown from '-!svg-react-loader?name=Icon!@alaskaairux/icons/dist/icons/alert/warning.svg';
```
## 节点应用程序依赖性
通过一个节点.js的依赖性或者像依赖性管理架构等其他节点,开发者可以从两种不同的情景中选择SVG的渲染. 这一技术将使SVG从指定的资源位置内入.
### 单个图标请求
建议开发人员列出每个UI组件的个人依赖性,比如:
```javascript
const arrowDown = require('@alaskaairux/icons/dist/icons/arrowdown');
```
在UI组件中,开发者可以引用指定给新创建变量的对象,以获得特定图标的SVG代码:
```javascript
```
这将返回图标的 SVG HTML 内含 .
### 完全依赖图书馆
如果视图中有几个图标,开发者可能选择包含所有可用的图标. **记住**随着这个npm的增长,这种依赖性也会增加. 强烈建议依附关系单独申报.
要求完整的图书馆作为UI的附属图书馆,要做到以下几点:
```javascript
const auroIcons = require('@alaskaairux/icons/dist');
```
然后在UI组件内,一个开发者可以从输出阵列中渲染出特定的图标,比如:
```js
```
这将返回图标的 SVG HTML 内含 .
### 更改 SVG 输出
使用任一方法,SVG被捕获为可以被操纵的对象. 例如,呼叫 `arrow-down.js` 文件如下所示...
```js
const arrowDown = require('@alaskaairux/icons/dist/icons/arrow-down');
```
... 将输出以下 HTML
```html
```
添加下行的 JavaScript 会找到并更新 `aria-hidden` 属性 `arrowDown.svg` 字符串...
```javascript
arrowDown.svg = arrowDown.svg.replace(/role="img"/g, `role="img" aria-hidden="true"`);
```
...然后输出如下:
```html
```
## 添加新图标
在此寄存器中添加新图标需要几个步骤.
1. 节点.js 最小版本 `20.x`
2. 添加新图标 `.svg` 转到 `src/icons/` 目录(见下文准则)
3. 如果图标要保留设计的颜色规格,请将新图标放入 `src/icons/fullColor` 目录
4. 添加 **形状方案** 改为 `./src/data/icons.json` 文件(见下文示例)
5. 提交拉动请求批准
### 图标形状方案
添加新图标时, 请遵循下面的示例, 将适当的数据添加到 `icons.json` 文档。 定义于 `"commonProperties"` 对象可能在单个中被覆盖 `"icons"` 对象.
#### 每个 SVG 的默认属性
| 键 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 颜色 | 字符串 | `currentcolor` | cSS 设备 `color` 改为 `currentcolor` |
| 高度 | 字符串 | `var(--auro-size-lg)` | cSS 设备 `height` 改为 `var(--auro-size-lg)` |
| 路径 | 字符串 | `/icons` | 设置预建图标的路径; 需要全色规格的图标, 使用 `"path": "/icons/fullColor"` |
| 角色 | 字符串 | `img` | 设定 aria 角色为 `img` |
| 样式 | 字符串 | `ico_squareLarge` | 值作为 CSS 类属性应用于 SVG |
| 视图框 | 字符串 | `0 0 24 24` | 设置 SVG 属性为默认形状 |
| 宽度 | 字符串 | `var(--auro-size-lg)` | cSS 设备 `width` 改为 `var(--auro-size-lg)` |
| 十亿 | 字符串 | `http://www.w3.org/2000/svg` | 设置 sVG 属性 |
| xmlns x链接 | 字符串 | `http://www.w3.org/1999/xlink` | 设置 sVG 属性 |
#### 每个 SVG 所需的属性
| 键 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 名称 | 字符串 | | Svg 文件的名称 |
| 类别 | 字符串 | | 定义图标的绝对位置 |
| 标题 | 字符串 | | 这个 `` 元素提供了任何 SVG 的可访问的短文描述, 可作为工具提示出现在浏览器中; 可以从文件名中导出 |
#### 每个 SVG 可选属性
| 键 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 联合国 | 字符串 | | 这个 `<desc>` 元素提供了任何 SVG 的可访问长文本描述 |
这个 `title` 当您想要一个比文件名称简单的名称时,需要属性。 下面的例子数据是: `information-stroke.svg`名称 `information-stroke` 如果向浏览器提供,则毫无意义。 将标题更新为 `information` 将解决这个问题.
#### 示例数据
```javascript
{
"commonProperties":
{
"role": "img",
"color": "currentColor",
"title": "",
"desc": "",
"width": "var(--auro-size-lg)",
"height": "var(--auro-size-lg)",
"xmlns": "http://www.w3.org/2000/svg",
"xmlns_xlink": "http://www.w3.org/1999/xlink",
"viewBox": "0 0 24 24",
"path": "/icons",
"style": "ico_squareLarge",
"type": "icon"
},
"icons": [
{
"name": "error",
"title": "Error alert indicator",
"category": "alert"
},
{
"name": "information-stroke",
"title": "Important information indicator",
"category": "alert"
},
]
}
```
**受挫**编号: `color` 财务报告和审定财务报表 `width` 不使用硬码值。 为了符合要求,您必须使用 Auro Design Token 参考文献 .
### 测试新图标 SVG 代码
一旦新图标被添加到图标目录并更新了图标数据JSON文件,就运行以下命令.
```
$ npm run generate
$ npm run serve
```
当更新完成时, 只需运行 `$ npm run generate` 生成新系列图标并重建演示页.
### 发布静态演示页面
部署静态演示页所需的所有资源都在 `./demo` 目录.
### 图标准则
所有新的图标拉取请求 MUST 符合以下规格. 任何不符合这些规格的牵引请求将被视为不符合要求,并将被拒绝.
1. 图标.svg 文件名必须是骆驼笼盖,没有空格、破折号或下划线
2. SVG代码应该成为实现SVG的最小代码
#### 开始
请将 SVG HTML 缩小为仅以下属性 。 构建进程将清除 SVG 文件中任何不想要的属性 .
```html
<svg>
<g>
<polygon points="43.9886686 48 24 27.9721836 4.01133144 48 0 44.0611961 19.9886686 23.9666203 0.0679886686 3.93880389 4.14730878 0 24 19.961057 43.8526912 0 47.9320113 3.93880389 27.9433428 23.9666203 48 44.0611961"></polygon>
</g>
</svg>
```
#### 别
请不要在 HTML 中包含不必要的规格、 属性、 空格和返回, 因为它们将在构建过程中被清除 。 任何未经手动取出或被取出的东西,都会使svglint测试失败.
1. xml 版本
2. `width` 或者说 `height` 硬编码的 HTML 属性
3. 任何自动生成的注释
4. 描述, 除非标题无法描述 SVG 图像/ icon 的用意
5. 任何ID、中风或填充属性,除非 SVG 图像/相机复杂需要
```html
<?xml version="1.0" encoding="UTF-8"?>
<svg width="8px" height="4px" viewBox="0 0 8 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
<title>Arrow Down
Created with Sketch.
```
## 谢谢!
这个项目的灵感来自 [简单](https://github.com/simple-icons)在巨人的肩上,开源项目帮助并激励我们所有人做更好的事!
## 常见问题
### @alaskaairux/icons 是什么？
阿拉斯加航空和奥罗设计系统图标
### 如何安装 @alaskaairux/icons？
在项目目录运行 npm install @alaskaairux/icons，或使用 pnpm add / yarn add / bun add。
### @alaskaairux/icons 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/alaskaairux\_\_icons 是否存在。
### @alaskaairux/icons 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @alaskaairux/icons 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @alaskaairux/icons 可以商用吗？
@alaskaairux/icons 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。
### @alaskaairux/icons 的下载量有多少？
根据 npm 官方下载统计，@alaskaairux/icons 在 2026/10/06 – 2026/11/04 这 30 天内被下载 25,625 次，日均约 854 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @alaskaairux/icons 还在维护吗？
最新版本 5\.31\.0 发布于 2026/10/28（10 天前）；至今共发布 140 个版本，其中过去 12 个月发布了 19 个；首次发布于 2020/04/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。