@ canonical/ ds- 资产

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

安装

bun add @canonical/ds-assets

图标

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

类型脚本使用

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

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 当有人键入"垃圾"时:

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 整个形状.

SVG 文件

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

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

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

见 文件/ICONS.md 用于完整的图标规格,命名惯例,以及从香草的迁移注释.

字体

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

资料来源: 警犬/乌邦图-桑斯-福特人 (单位:千美元)fonts/webfont/ ——可变字体构建).

许可证 : 这个 fonts/ubuntu-sans/ 目录根据 Ubuntu 字体许可证 v1.0而不是LGPL像这个包裹的其余部分.

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