@gnome-ui/icons 1.1.0 → 1.2.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 +112 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
# @gnome-ui/icons
|
|
2
|
+
|
|
3
|
+
Framework-agnostic Adwaita symbolic icon definitions for the [gnome-ui](https://github.com/ElJijuna/gnome-ui) design system.
|
|
4
|
+
|
|
5
|
+
Each icon is a plain JavaScript object (`IconDefinition`) containing SVG path data — no DOM, no React, no styles. UI framework adapters consume this shape to render inline SVGs.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@gnome-ui/icons)
|
|
8
|
+
[](../../LICENSE)
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @gnome-ui/icons
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
### With `@gnome-ui/react`
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import { Icon } from "@gnome-ui/react";
|
|
22
|
+
import { Search, Settings, GoHome } from "@gnome-ui/icons";
|
|
23
|
+
|
|
24
|
+
<Icon icon={Search} size="md" aria-label="Search" />
|
|
25
|
+
<Icon icon={Settings} size="lg" aria-hidden />
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### Framework-agnostic (raw SVG)
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
import { Search } from "@gnome-ui/icons";
|
|
32
|
+
import type { IconDefinition } from "@gnome-ui/icons";
|
|
33
|
+
|
|
34
|
+
function renderIcon(icon: IconDefinition, size = 16) {
|
|
35
|
+
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
36
|
+
svg.setAttribute("viewBox", icon.viewBox);
|
|
37
|
+
svg.setAttribute("width", String(size));
|
|
38
|
+
svg.setAttribute("height", String(size));
|
|
39
|
+
svg.setAttribute("fill", "currentColor");
|
|
40
|
+
|
|
41
|
+
for (const path of icon.paths) {
|
|
42
|
+
const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
43
|
+
el.setAttribute("d", path.d);
|
|
44
|
+
if (path.fillRule) el.setAttribute("fill-rule", path.fillRule);
|
|
45
|
+
if (path.clipRule) el.setAttribute("clip-rule", path.clipRule);
|
|
46
|
+
svg.appendChild(el);
|
|
47
|
+
}
|
|
48
|
+
return svg;
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## `IconDefinition` type
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
interface IconDefinition {
|
|
56
|
+
readonly viewBox: string;
|
|
57
|
+
readonly paths: ReadonlyArray<{
|
|
58
|
+
readonly d: string;
|
|
59
|
+
readonly fillRule?: "nonzero" | "evenodd" | "inherit";
|
|
60
|
+
readonly clipRule?: "nonzero" | "evenodd" | "inherit";
|
|
61
|
+
}>;
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Available icons
|
|
66
|
+
|
|
67
|
+
All icons are Adwaita symbolic icons — monochrome, `currentColor`-based, 16 × 16 viewBox.
|
|
68
|
+
|
|
69
|
+
| Export | Description |
|
|
70
|
+
|--------|-------------|
|
|
71
|
+
| `Add` | Plus / add |
|
|
72
|
+
| `Attachment` | Paperclip |
|
|
73
|
+
| `Check` | Checkmark |
|
|
74
|
+
| `Close` | × close / dismiss |
|
|
75
|
+
| `Copy` | Copy to clipboard |
|
|
76
|
+
| `Cut` | Cut |
|
|
77
|
+
| `Delete` | Trash / delete |
|
|
78
|
+
| `DocumentOpen` | Open document |
|
|
79
|
+
| `Edit` | Pencil / edit |
|
|
80
|
+
| `Error` | Error badge |
|
|
81
|
+
| `GoHome` | Home |
|
|
82
|
+
| `GoNext` | Right chevron |
|
|
83
|
+
| `GoPrevious` | Left chevron |
|
|
84
|
+
| `GoUp` | Up chevron |
|
|
85
|
+
| `Information` | Info badge |
|
|
86
|
+
| `MediaPause` | Pause |
|
|
87
|
+
| `MediaPlay` | Play |
|
|
88
|
+
| `MediaSkipBackward` | Skip backward |
|
|
89
|
+
| `MediaSkipForward` | Skip forward |
|
|
90
|
+
| `OpenMenu` | Hamburger menu |
|
|
91
|
+
| `PanDown` | Pan / caret down |
|
|
92
|
+
| `PanEnd` | Pan / caret right |
|
|
93
|
+
| `PanStart` | Pan / caret left |
|
|
94
|
+
| `PanUp` | Pan / caret up |
|
|
95
|
+
| `Paste` | Paste |
|
|
96
|
+
| `Redo` | Redo |
|
|
97
|
+
| `Refresh` | Refresh / reload |
|
|
98
|
+
| `Remove` | Minus / remove |
|
|
99
|
+
| `Save` | Save / floppy disk |
|
|
100
|
+
| `Search` | Magnifying glass |
|
|
101
|
+
| `Settings` | Gear / settings |
|
|
102
|
+
| `Share` | Share / export |
|
|
103
|
+
| `Star` | Star (filled) |
|
|
104
|
+
| `StarOutline` | Star (outline) |
|
|
105
|
+
| `Undo` | Undo |
|
|
106
|
+
| `ViewMore` | Three dots / overflow |
|
|
107
|
+
| `ViewSidebar` | Sidebar toggle |
|
|
108
|
+
| `Warning` | Warning triangle |
|
|
109
|
+
|
|
110
|
+
## License
|
|
111
|
+
|
|
112
|
+
[MIT](../../LICENSE)
|