@canonical/ds-assets 0.11.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -4
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,7 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
# @canonical/ds-assets
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Icons and shared visual assets for the Pragma design system.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Installation
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```bash
|
|
8
|
+
bun add @canonical/ds-assets
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Icons
|
|
12
|
+
|
|
13
|
+
The package provides over 150 SVG icons for interface actions, status indicators, navigation, and brand logos.
|
|
14
|
+
|
|
15
|
+
### TypeScript Usage
|
|
16
|
+
|
|
17
|
+
Import the type-safe constant and type:
|
|
18
|
+
|
|
19
|
+
```typescript
|
|
20
|
+
import { ICON_NAMES, type IconName } from "@canonical/ds-assets";
|
|
21
|
+
|
|
22
|
+
// Type-safe icon name
|
|
23
|
+
const iconName: IconName = "search";
|
|
24
|
+
|
|
25
|
+
// Validate user input
|
|
26
|
+
const isValidIcon = (name: string): name is IconName =>
|
|
27
|
+
ICON_NAMES.includes(name as IconName);
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### SVG Files
|
|
31
|
+
|
|
32
|
+
Raw SVG files live in the `icons/` directory. Each icon uses a 16x16 viewBox and `currentColor` fill, allowing icons to inherit text colour from their context.
|
|
33
|
+
|
|
34
|
+
Icons can be referenced directly via SVG's `<use>` element:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<svg width="16" height="16">
|
|
38
|
+
<use href="path/to/search.svg#search" />
|
|
39
|
+
</svg>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
See [docs/ICONS.md](docs/ICONS.md) for the complete icon specification, naming conventions, and migration notes from Vanilla.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canonical/ds-assets",
|
|
3
3
|
"description": "Assets for Pragma.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.12.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/types/index.d.ts",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@biomejs/biome": "2.3.11",
|
|
42
|
-
"@canonical/biome-config": "^0.
|
|
43
|
-
"@canonical/typescript-config-base": "^0.
|
|
44
|
-
"@canonical/webarchitect": "^0.
|
|
42
|
+
"@canonical/biome-config": "^0.12.0",
|
|
43
|
+
"@canonical/typescript-config-base": "^0.12.0",
|
|
44
|
+
"@canonical/webarchitect": "^0.12.0",
|
|
45
45
|
"@types/node": "^24.0.0",
|
|
46
46
|
"jsdom": "^26.1.0",
|
|
47
47
|
"typescript": "^5.9.3",
|
|
@@ -49,5 +49,5 @@
|
|
|
49
49
|
"vite-tsconfig-paths": "^6.0.4",
|
|
50
50
|
"vitest": "^4.0.17"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "0b491caff8f797fef4ba4b7f5514a7c5b915a481"
|
|
53
53
|
}
|