# @axa-ch/materials 中文文档

规范地址：https://npmcn.com/package/%40axa-ch/materials/

版本：16\.0\.8
npm 元数据更新时间：2026-08-06T09:22:29.446Z
中文译文更新时间：2026-11-07T16:07:23.390Z
软件包许可：Copyright 2019 AXA Versicherungen AG

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40axa-ch/materials
原文对照：https://npmcn.com/package/%40axa-ch/materials/?lang=original
项目主页：https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/00-materials/#readme
源码仓库：https://github.com/axa-ch-webhub-cloud/pattern-library

弃用说明：Please use the new scope @axa-ch-webhub-cloud

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.4 MB，2559 个文件
- TypeScript 类型：未声明
- 运行依赖：1 个
- 首次发布：2019-04-04T12:26:09.403Z
- 最新版本发布：2022-09-30T09:54:18.519Z
- 近 30 天下载量：5426（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：105（近 12 个月 0 个）

## 中文简介

AXA图案库的材料部分

## 安装

```sh
npm install @axa-ch/materials
```

也可以使用：`pnpm add @axa-ch/materials`、`yarn add @axa-ch/materials`、`bun add @axa-ch/materials`

## README

# AXA 材料

材料以SVG格式提供常用的图标和图像. 此外,材料还会输出颜色,帮助者,打字和布局等风格.

## 使用量

**重要内容:** 如果此组件需要在 Internet Explorer 11 中运行, [你需要用我们的多填充器](https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/05-utils/polyfill)。 。 。 .

```bash
npm install @axa-ch/materials
```

```js
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Arrow_forwardSvg } from '@axa-ch/materials/icons/material-design';

<span>${unsafeHTML(Arrow_forwardSvg)}</span>;
```

### 反应

```js
import ArrowForwardSvg from '@axa-ch/materials/icons-raw/material-design/arrow-forward.svg';

<ArrowForwardSvg />;
```

### 用打字符反应

```js
import { ReactComponent as ArrowForwardSvg } from '@axa-ch/materials/icons-raw/material-design/arrow-forward.svg';

<ArrowForwardSvg />;
```

需要用吗 `SVGR` 将外部 SVG 文件转换成带有 Webpack 的 React 组件。 使用时自动安装 `create-pod-app`。 。 。 .

如果您需要手动安装:

```bash
npm install @svgr/webpack --save-dev
```

```js
{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}
```

## 样式 - Scs 混合和可变

### 颜色

```scss
@import '@axa-ch/materials/styles/00-colors.scss';

body {
  background-color: $color-axa-blue;
}
```

### 动画

```scss
@import '@axa-ch/materials/styles/20-animations.scss';
```

### 断点

```scss
@import '@axa-ch/materials/styles/variables.scss';

body {
  // Rules for devices bigger than portrait mobile
  @media (min-width: $breakpoint-xs) {
    margin: 8px;
  }
}
```

### 类型

```scss
@import '@axa-ch/materials/styles/typography.scss';

body {
  font-family: $font-family-primary;
}
```

### 变量

```scss
@import '@axa-ch/materials/styles/variables.scss';

body {
  margin: $spacing-1;
}

.box {
  box-shadow: $box-shadow-1;
}
```

## 图标/图像集

### 大小

请注意: `icons` 财务报告和审定财务报表 `images` [这里](https://www.figma.com/file/6zurYk3bJpzUg0H2THSxGF/AXA-UI-Kit?node-id=0%3A57)请使用这些维度.

### SVGs 组合

(完成列表可见) [这里](https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/src/components/00-materials/icons-raw)(中文(简体) )

| 图标 |
| --- |
| 添加Svg |
| 向左箭头Svg |
| 右向箭头Svg |
| 附加文件Svg |
| 取消Svg |
| 关卡Svg |
| 检查循环Svg |
| 清除Svg |
| 向上加载Svg |
| 折叠Svg |
| 日期输入Svg |
| 删除ForeverSvg |
| 文档Svg |
| 下载Svg |
| 电子邮件Svg |
| 扩展Svg |
| 脸书Svg |
| 信息Svg |
| InstagramSvg 图像 |
| 键Svg |
| 链接inSvg |
| 移动Svg |
| 信件Svg |
| 个人Svg |
| 电话Vg |
| 电源Svg |
| 搜索Svg |
| 微信公众号 |
| 上传Svg |
| 兴 Svg |
| (原始内容存档于2019-09-31) (英语). YoutubeSvg |

| 图像 |
| --- |
| AxaLogoSvg 维基月球 |
| AxaLogo 打开Svg |
| ...还有更多的子文件夹 |

## 捐款

### 添加新图像的过程

1.  除非设计师已经掌握了文件 否则就让设计师参与其中 他将对其进行审查,并可能改变一些事情,例如通过调整内垫等,以保证整体质量.
2.  删除 SVG 内部不必要的代码 :
    -   (单位:千美元). `data-name="Layer 2"` # 矢量绘图软件的层信息
    -   (b) 减少或减少员额. `<path fill="#fff" d="M0 0h96v96H0z"/>` # 装满白色背景的外框
3.  -   a. 使用内部 [斯维戈](https://github.com/svg/svgo) - 引用脚本 `npm run build-images` 从材料文件夹本身来清理和优化SVG,然后从中复制优化的文件 `.tmp` 文件夹到 `images-raw`
    -   b. 或者使用 [在线 SVG 优化器](https://jakearchibald.github.io/svgomg/) 用于同一目的
4.  手动审查最后一个步骤生成的 SVG : 添加或编辑<路径>属性, 设置 `fill="currentColor"` 和(或) `strokes="currentColor"` 视情况而定。 删除不必要的属性 .
5.  运行 `npm run build` 以生成每个 svg 文件的 js 文件。 生成的文件可见于 `images` 文件夹.

### 更新材料(仅联合国IX)

"相干"部分中我们所有的图标都是取自google(而别无其他)的材料图标. 从google更新材料图标([https://github.com/google/材料-设计-相机/放行](https://github.com/google/material-design-icons/releases)),遵循这些步骤.

1.  删除其中的内容 `icons-raw` 文件夹.
2.  将最新版本的材料图标作为 ZIP 文件下载到您的下载文件夹 .
3.  提取材料图标 zip 文件到下载文件夹中 .
4.  将提取的文件夹重命名为 `material-design-icons`。 。 。 .
5.  打开终端 `cd` 输入材质根文件夹(`src/components/00-materials/`) (中文(简体) ).
6.  运行 `sh material-importer.sh`。 。 。 .
7.  只运行文件夹的搜索 `src/components/00-materials/icons-raw` 并查找 `<path` (结尾为白空间).
8.  将所有事件替换为 `<path fill="currentColor"` (结尾为白空间).
9.  只运行文件夹的搜索 `src/components/00-materials/icons-raw` 并查找 `<circle` (结尾为白空间).
10.  将所有事件替换为 `<circle fill="currentColor"` (结尾为白空间).

结束了。 这似乎是目前进口商脚本中最快和最有效的办法.

## 常见问题

### @axa-ch/materials 是什么？

AXA图案库的材料部分注意：该包已被作者标记为弃用——Please use the new scope @axa-ch-webhub-cloud

### 如何安装 @axa-ch/materials？

在项目目录运行 npm install @axa-ch/materials，或使用 pnpm add / yarn add / bun add。

### @axa-ch/materials 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/axa-ch\_\_materials 是否存在。

### @axa-ch/materials 可以商用吗？

@axa-ch/materials 使用 Copyright 2019 AXA Versicherungen AG 许可。声明的许可为 Copyright 2019 AXA Versicherungen AG，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @axa-ch/materials 的下载量有多少？

根据 npm 官方下载统计，@axa-ch/materials 在 2026/10/08 – 2026/11/06 这 30 天内被下载 5,426 次，日均约 181 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @axa-ch/materials 还在维护吗？

最新版本 16\.0\.8 发布于 2022/09/30（4 年前）；至今共发布 105 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/04/04。作者已将其标记为弃用，新项目建议寻找替代方案。