@rokkit/icons 1.0.0-next.133 → 1.0.0-next.134
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 +104 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1 +1,104 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @rokkit/icons
|
|
2
|
+
|
|
3
|
+
Minimal icon set for Rokkit applications, bundled as Iconify JSON.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @rokkit/icons
|
|
9
|
+
# or
|
|
10
|
+
npm install @rokkit/icons
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
No runtime dependencies.
|
|
14
|
+
|
|
15
|
+
## Overview
|
|
16
|
+
|
|
17
|
+
`@rokkit/icons` ships a curated set of SVG icons as Iconify-compatible JSON bundles. Each bundle is available as a named subpath export.
|
|
18
|
+
|
|
19
|
+
| Subpath | Collection | Description |
|
|
20
|
+
| ------------------------------- | ------------------- | ------------------------------------------- |
|
|
21
|
+
| `@rokkit/icons` (default) | `rokkit-ui` | Base UI icons — navigation, actions, states |
|
|
22
|
+
| `@rokkit/icons/ui.json` | `rokkit-ui` | Same as default |
|
|
23
|
+
| `@rokkit/icons/light.json` | `rokkit-light` | Outlined lightweight icons |
|
|
24
|
+
| `@rokkit/icons/solid.json` | `rokkit-solid` | Solid filled icons |
|
|
25
|
+
| `@rokkit/icons/twotone.json` | `rokkit-twotone` | Two-tone icons |
|
|
26
|
+
| `@rokkit/icons/components.json` | `rokkit-components` | Component-specific icons |
|
|
27
|
+
| `@rokkit/icons/auth.json` | `rokkit-auth` | Authentication icons (login, logout, user) |
|
|
28
|
+
| `@rokkit/icons/app.json` | `rokkit-app` | Application icons |
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
### With `@rokkit/unocss` (recommended)
|
|
33
|
+
|
|
34
|
+
Icons are available automatically when using `presetRokkit()`. Reference them as UnoCSS utility classes:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<span class="i-rokkit-ui:menu"></span>
|
|
38
|
+
<span class="i-rokkit-solid:check"></span>
|
|
39
|
+
<span class="i-rokkit-light:close"></span>
|
|
40
|
+
<span class="i-rokkit-auth:login"></span>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### With UnoCSS directly
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
// uno.config.ts
|
|
47
|
+
import { defineConfig, presetIcons } from 'unocss'
|
|
48
|
+
import uiIcons from '@rokkit/icons/ui.json'
|
|
49
|
+
import solidIcons from '@rokkit/icons/solid.json'
|
|
50
|
+
|
|
51
|
+
export default defineConfig({
|
|
52
|
+
presets: [
|
|
53
|
+
presetIcons({
|
|
54
|
+
collections: {
|
|
55
|
+
'rokkit-ui': () => uiIcons,
|
|
56
|
+
'rokkit-solid': () => solidIcons
|
|
57
|
+
}
|
|
58
|
+
})
|
|
59
|
+
]
|
|
60
|
+
})
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### With Iconify runtime
|
|
64
|
+
|
|
65
|
+
```js
|
|
66
|
+
import { addCollection } from '@iconify/svelte'
|
|
67
|
+
import uiIcons from '@rokkit/icons/ui.json'
|
|
68
|
+
import authIcons from '@rokkit/icons/auth.json'
|
|
69
|
+
|
|
70
|
+
addCollection(uiIcons)
|
|
71
|
+
addCollection(authIcons)
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
```svelte
|
|
75
|
+
<script>
|
|
76
|
+
import { Icon } from '@iconify/svelte'
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<Icon icon="rokkit-ui:menu" />
|
|
80
|
+
<Icon icon="rokkit-auth:login" />
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Direct import (framework-agnostic)
|
|
84
|
+
|
|
85
|
+
Each bundle is a standard Iconify JSON file. Import and use it with any Iconify-compatible tooling:
|
|
86
|
+
|
|
87
|
+
```js
|
|
88
|
+
import icons from '@rokkit/icons/solid.json'
|
|
89
|
+
|
|
90
|
+
// icons.prefix → "rokkit-solid"
|
|
91
|
+
// icons.icons → { "check": { body: "..." }, ... }
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Building Custom Icon Sets
|
|
95
|
+
|
|
96
|
+
Use `@rokkit/cli` to bundle your own SVG folders into Iconify JSON in the same format:
|
|
97
|
+
|
|
98
|
+
```bash
|
|
99
|
+
bunx @rokkit/cli bundle -i ./my-icons -o ./lib
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
Part of [Rokkit](https://github.com/jerrythomas/rokkit) — a Svelte 5 component library and design system.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rokkit/icons",
|
|
3
|
-
"version": "1.0.0-next.
|
|
3
|
+
"version": "1.0.0-next.134",
|
|
4
4
|
"author": "Jerry Thomas <me@jerrythomas.name>",
|
|
5
5
|
"exports": {
|
|
6
6
|
"./package.json": "./package.json",
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|
|
34
34
|
"prepublishOnly": "cp ../../LICENSE .",
|
|
35
|
+
"postpublish": "rm -f LICENSE",
|
|
35
36
|
"format": "prettier --write .",
|
|
36
37
|
"lint": "eslint --fix .",
|
|
37
38
|
"build": "rokkit-cli build && bun format",
|