@k8slens/lds-icons 0.55.0 → 0.55.2
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 +43 -19
- package/llms.txt +157 -0
- package/package.json +7 -6
package/README.md
CHANGED
|
@@ -1,30 +1,54 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @k8slens/lds-icons
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
See the documentation at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/icon).
|
|
3
|
+
React icon components for the Lens Design System.
|
|
5
4
|
|
|
6
|
-
##
|
|
5
|
+
## Installation
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
```bash
|
|
8
|
+
npm install @k8slens/lds-icons
|
|
9
|
+
```
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
- `./lib/cjs/index.js` - Main CommonJS module
|
|
14
|
-
- `./lib/cjs/:groupname/IconName.js` - Individual CommonJS icons
|
|
11
|
+
## Setup
|
|
15
12
|
|
|
13
|
+
```tsx
|
|
14
|
+
import "@k8slens/lds-icons/lib/es/index.css";
|
|
15
|
+
```
|
|
16
16
|
|
|
17
17
|
## Usage
|
|
18
|
-
- run `npm i -s @k8slens/lds-icons`
|
|
19
|
-
- import `@k8slens/lds-icons/index.css` in your React app to include styles
|
|
20
|
-
- Using in a component:
|
|
21
18
|
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
Icons are organized by category namespace:
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { misc } from "@k8slens/lds-icons";
|
|
23
|
+
|
|
24
|
+
const { LockIcon } = misc;
|
|
25
|
+
|
|
26
|
+
export const MyComponent = () => <LockIcon />;
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Or import multiple icons from different namespaces:
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { action, status, user, navigation } from "@k8slens/lds-icons";
|
|
33
|
+
|
|
34
|
+
const { DeleteIcon } = action;
|
|
35
|
+
const { SuccessIcon } = status;
|
|
36
|
+
const { PersonIcon } = user;
|
|
37
|
+
const { CloseIcon } = navigation;
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Categories: `action`, `base`, `commerce`, `display`, `idp`, `misc`, `navigation`, `status`, `user`
|
|
41
|
+
|
|
42
|
+
## Documentation
|
|
43
|
+
|
|
44
|
+
Browse all icons at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/icons).
|
|
45
|
+
|
|
46
|
+
## AI Assistance
|
|
47
|
+
|
|
48
|
+
This package includes an `llms.txt` file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., `CLAUDE.md`):
|
|
24
49
|
|
|
25
|
-
|
|
50
|
+
```markdown
|
|
51
|
+
Read node_modules/@k8slens/lds-icons/llms.txt for icon reference.
|
|
26
52
|
|
|
27
|
-
|
|
28
|
-
<LockIcon />
|
|
29
|
-
)
|
|
53
|
+
Always use LDS icons instead of custom SVGs. Search llms.txt for available icons before creating new ones.
|
|
30
54
|
```
|
package/llms.txt
ADDED
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
# @k8slens/lds-icons
|
|
2
|
+
|
|
3
|
+
> React icon components for the Lens Design System.
|
|
4
|
+
|
|
5
|
+
SVG icons as React components, organized by category. All icons support customization via className and standard SVG props.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @k8slens/lds-icons
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer Dependencies
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install react react-dom clsx
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Setup
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import "@k8slens/lds-icons/lib/es/index.css";
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
Icons are organized by category namespace:
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { misc } from "@k8slens/lds-icons";
|
|
31
|
+
|
|
32
|
+
const { LockIcon } = misc;
|
|
33
|
+
|
|
34
|
+
export const MyComponent = () => <LockIcon />;
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Icon Reference
|
|
38
|
+
|
|
39
|
+
All icons are exported with an "Icon" suffix (e.g., `DeleteIcon`, `LockIcon`).
|
|
40
|
+
|
|
41
|
+
### action
|
|
42
|
+
User-interactive icons for tasks or commands.
|
|
43
|
+
|
|
44
|
+
| Icon | When to Use |
|
|
45
|
+
|------|-------------|
|
|
46
|
+
| `CopyPaste` | Copy-to-clipboard or duplicate item actions |
|
|
47
|
+
| `Delete` | Destructive actions that remove items. Pair with confirmation |
|
|
48
|
+
| `Download` | Download files or export data |
|
|
49
|
+
| `Edit` | Enter edit mode or modify content |
|
|
50
|
+
| `Reactivate` | Reactivate disabled items or resume processes |
|
|
51
|
+
| `Repeat` | Retry, refresh, or loop functionality |
|
|
52
|
+
| `ThumbUp` | Positive feedback, approval, or like |
|
|
53
|
+
| `ThumbDown` | Negative feedback or disapproval |
|
|
54
|
+
|
|
55
|
+
### base
|
|
56
|
+
Core brand icons and logos.
|
|
57
|
+
|
|
58
|
+
| Icon | When to Use |
|
|
59
|
+
|------|-------------|
|
|
60
|
+
| `Logo` | Lens logo in headers, footers, brand identifier |
|
|
61
|
+
| `LoopLogo` | Loop product branding |
|
|
62
|
+
| `LensIdeLogo` | Lens IDE branding |
|
|
63
|
+
|
|
64
|
+
### commerce
|
|
65
|
+
Payment and transaction icons.
|
|
66
|
+
|
|
67
|
+
| Icon | When to Use |
|
|
68
|
+
|------|-------------|
|
|
69
|
+
| `CreditCard` | Payment methods, billing settings, add card |
|
|
70
|
+
| `CreditCardOff` | Missing payment, expired card, payment disabled |
|
|
71
|
+
| `Receipt` | Invoices, transaction history, billing receipts |
|
|
72
|
+
|
|
73
|
+
### display
|
|
74
|
+
Theme and display mode icons.
|
|
75
|
+
|
|
76
|
+
| Icon | When to Use |
|
|
77
|
+
|------|-------------|
|
|
78
|
+
| `DarkMode` | Theme switcher - dark mode option |
|
|
79
|
+
| `LightMode` | Theme switcher - light mode option |
|
|
80
|
+
| `NightSightAuto` | Theme switcher - system/auto option |
|
|
81
|
+
|
|
82
|
+
### idp
|
|
83
|
+
Identity provider icons for social login.
|
|
84
|
+
|
|
85
|
+
| Icon | When to Use |
|
|
86
|
+
|------|-------------|
|
|
87
|
+
| `Apple` | Sign in with Apple button |
|
|
88
|
+
| `Github` | Sign in with GitHub button |
|
|
89
|
+
| `Google` | Sign in with Google button |
|
|
90
|
+
|
|
91
|
+
### navigation
|
|
92
|
+
UI navigation and interaction icons.
|
|
93
|
+
|
|
94
|
+
| Icon | When to Use |
|
|
95
|
+
|------|-------------|
|
|
96
|
+
| `ArrowUp` | Collapse, sort ascending, scroll up |
|
|
97
|
+
| `ArrowDown` | Expand, dropdown trigger, sort descending |
|
|
98
|
+
| `ArrowForward` | Next step, continue, navigate forward |
|
|
99
|
+
| `Menu` | Toggle hamburger/side navigation |
|
|
100
|
+
| `ContextMenu` | Overflow actions, additional options |
|
|
101
|
+
| `Close` | Dismiss modals, panels, notifications |
|
|
102
|
+
| `Show` | Reveal hidden content (passwords) |
|
|
103
|
+
| `Hide` | Hide sensitive content (passwords) |
|
|
104
|
+
| `Preview` | Preview mode before finalizing |
|
|
105
|
+
|
|
106
|
+
### status
|
|
107
|
+
State and feedback icons.
|
|
108
|
+
|
|
109
|
+
| Icon | When to Use |
|
|
110
|
+
|------|-------------|
|
|
111
|
+
| `Spinner` | Loading states. Animates automatically |
|
|
112
|
+
| `Info` | Informational messages, tooltips, help hints |
|
|
113
|
+
| `Warning` | Cautionary states needing attention (not errors) |
|
|
114
|
+
| `Success` | Success states, completed operations |
|
|
115
|
+
| `Check` | Checkmarks in lists, selected states |
|
|
116
|
+
|
|
117
|
+
### user
|
|
118
|
+
User identity and account icons.
|
|
119
|
+
|
|
120
|
+
| Icon | When to Use |
|
|
121
|
+
|------|-------------|
|
|
122
|
+
| `Person` | User profile, account settings, avatar placeholder |
|
|
123
|
+
| `Email` | Email fields, contact info, messages |
|
|
124
|
+
| `License` | License management, subscriptions, agreements |
|
|
125
|
+
| `Lock` | Password fields, security, protected content |
|
|
126
|
+
| `Key` | API keys, access tokens, credentials |
|
|
127
|
+
| `Verified` | Verified accounts, trusted status badges |
|
|
128
|
+
| `StylusNote` | Digital signatures, sign documents |
|
|
129
|
+
| `Dialpad` | OTP/2FA code entry, PIN input |
|
|
130
|
+
|
|
131
|
+
### misc
|
|
132
|
+
Miscellaneous icons.
|
|
133
|
+
|
|
134
|
+
| Icon | When to Use |
|
|
135
|
+
|------|-------------|
|
|
136
|
+
| `Event` | Calendar events, scheduling, dates |
|
|
137
|
+
| `Awesome` | Featured content, highlights, promotions |
|
|
138
|
+
|
|
139
|
+
## SVGIcon Base Component
|
|
140
|
+
|
|
141
|
+
For custom SVG icons:
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
import { SVGIcon } from "@k8slens/lds-icons";
|
|
145
|
+
|
|
146
|
+
<SVGIcon className="my-icon">
|
|
147
|
+
<path d="..." />
|
|
148
|
+
</SVGIcon>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Documentation
|
|
152
|
+
|
|
153
|
+
- [Lens Design System](https://lens-design-system.k8slens.dev/)
|
|
154
|
+
|
|
155
|
+
## Optional
|
|
156
|
+
|
|
157
|
+
- [npm Package](https://www.npmjs.com/package/@k8slens/lds-icons)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@k8slens/lds-icons",
|
|
3
|
-
"version": "0.55.
|
|
3
|
+
"version": "0.55.2",
|
|
4
4
|
"description": "Lens Design System – React Icon Components",
|
|
5
5
|
"author": "Mirantis Inc",
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"types": "./lib/es/index.d.ts",
|
|
16
16
|
"type": "module",
|
|
17
17
|
"files": [
|
|
18
|
-
"lib/"
|
|
18
|
+
"lib/",
|
|
19
|
+
"llms.txt"
|
|
19
20
|
],
|
|
20
21
|
"scripts": {
|
|
21
22
|
"start": "npm run rollup-watch",
|
|
@@ -23,8 +24,8 @@
|
|
|
23
24
|
"rollup-watch": "rollup -c --watch --waitForBundleInput",
|
|
24
25
|
"rollup": "rollup -c",
|
|
25
26
|
"clean": "rimraf lib",
|
|
26
|
-
"lint": "
|
|
27
|
-
"format": "
|
|
27
|
+
"lint": "oxlint .",
|
|
28
|
+
"format": "oxlint --fix . && prettier --write ."
|
|
28
29
|
},
|
|
29
30
|
"peerDependencies": {
|
|
30
31
|
"@types/react": "^18.3.0",
|
|
@@ -34,12 +35,12 @@
|
|
|
34
35
|
"react-dom": "^18.2.0"
|
|
35
36
|
},
|
|
36
37
|
"devDependencies": {
|
|
37
|
-
"@k8slens/lds-tokens": "^0.58.
|
|
38
|
+
"@k8slens/lds-tokens": "^0.58.2",
|
|
38
39
|
"@rollup/plugin-node-resolve": "15.0.2",
|
|
39
40
|
"@storybook/react": "6.5.16",
|
|
40
41
|
"@testing-library/react": "14.0.0",
|
|
41
42
|
"autoprefixer": "10.4.14",
|
|
42
43
|
"typescript": "4.8.4"
|
|
43
44
|
},
|
|
44
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "1edf9b6761a700920be41adb01f3de528320f639"
|
|
45
46
|
}
|