# @canonical/ds-assets 中文文档

规范地址：https://npmcn.com/package/%40canonical/ds-assets/

版本：0\.45\.0
npm 元数据更新时间：2026-10-23T01:42:37.585Z
中文译文更新时间：2026-11-09T01:11:28.825Z
软件包许可：LGPL-3\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40canonical/ds-assets
原文对照：https://npmcn.com/package/%40canonical/ds-assets/?lang=original
项目主页：https://github.com/canonical/pragma-web#readme
源码仓库：https://github.com/canonical/pragma-web

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

- 包体积（解压后）：1.5 MB，212 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2025-09-25T13:29:15.285Z
- 最新版本发布：2026-10-23T01:42:37.217Z
- 近 30 天下载量：11019（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：44（近 12 个月 42 个）

## 中文简介

普拉格玛的资产.

## 安装

```sh
npm install @canonical/ds-assets
```

也可以使用：`pnpm add @canonical/ds-assets`、`yarn add @canonical/ds-assets`、`bun add @canonical/ds-assets`

## README

# @ canonical/ ds- 资产

用于Pragma设计系统的图标,字体,并共享视觉资产.

## 安装

```bash
bun add @canonical/ds-assets
```

## 图标

该套件提供了超过150个SVG图标,用于界面动作,状态指示器,导航和品牌标志.

### 类型脚本使用

导入类型安全常数和类型 :

```typescript
import { ICON_NAMES, type IconName } from "@canonical/ds-assets";

// Type-safe icon name
const iconName: IconName = "search";

// Validate user input
const isValidIcon = (name: string): name is IconName =>
  ICON_NAMES.includes(name as IconName);
```

### 查找图标

`ICON_METADATA` 随身携带人们寻找的字词,所以一个取图标者可以找到 `delete` 当有人键入"垃圾"时:

```typescript
import { ICON_METADATA, ICON_CATEGORIES } from "@canonical/ds-assets";

ICON_METADATA.delete.tags; // ["trash", "bin", "remove", ...]
ICON_METADATA["starred-off"].aliases; // ["unstarred"]
```

每个图标都有标记,至少有一个类别来自 `ICON_CATEGORIES`; 见 [文件/ICONS.md](https://npmcn.com/package/%40canonical/ds-assets/docs/ICONS.md) 整个形状.

### SVG 文件

原始 SVG 文件在 `icons/` 目录。 每个图标使用一个 16x16 视图框和 `currentColor` ,允许图标从上下文中继承文本颜色.

图标可通过 SVG 直接引用 `<use>` 元素 :

```html
<svg width="16" height="16">
  <use href="path/to/search.svg#search" />
</svg>
```

见 [文件/ICONS.md](https://npmcn.com/package/%40canonical/ds-assets/docs/ICONS.md) 用于完整的图标规格,命名惯例,以及从香草的迁移注释.

## 字体

Ubuntu Sans 和 Ubuntu Sans Mono 的可变 woff2 字体 `fonts/ubuntu-sans/`。 。 。 .

资料来源: [警犬/乌邦图-桑斯-福特人](https://github.com/canonical/Ubuntu-Sans-fonts) (单位:千美元)`fonts/webfont/` ——可变字体构建).

**许可证 :** 这个 `fonts/ubuntu-sans/` 目录根据 [Ubuntu 字体许可证 v1.0](https://npmcn.com/package/%40canonical/ds-assets/fonts/ubuntu-sans/LICENSE.md)而不是LGPL像这个包裹的其余部分.

这些字体被 `@canonical/styles/fonts` 通过 `@font-face` 声明。 除非构建自定义字体加载,否则无需直接引用.

## 常见问题

### @canonical/ds-assets 是什么？

普拉格玛的资产\.

### 如何安装 @canonical/ds-assets？

在项目目录运行 npm install @canonical/ds-assets，或使用 pnpm add / yarn add / bun add。

### @canonical/ds-assets 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @canonical/ds-assets 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @canonical/ds-assets 可以商用吗？

@canonical/ds-assets 使用 LGPL-3\.0 许可。弱 Copyleft：作为库被调用时通常不要求开源你自己的代码，但修改库本身需以 LGPL 开源；前端打包合并后的适用边界存在不同理解。以上为概括，不构成法律意见，请以许可原文为准。

### @canonical/ds-assets 的下载量有多少？

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

### @canonical/ds-assets 还在维护吗？

最新版本 0\.45\.0 发布于 2026/10/23（17 天前）；至今共发布 44 个版本，其中过去 12 个月发布了 42 个；首次发布于 2025/09/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。