stera-icons 5.1.0 → 5.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 +33 -1
- package/dist/icons.meta.json +3885 -3005
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +51 -6
- package/dist/index.d.ts +51 -6
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,6 +10,7 @@ A lightweight, tree-shakeable React icon library with TypeScript support and acc
|
|
|
10
10
|
- ♿ **Accessible**: Built-in ARIA support for screen readers
|
|
11
11
|
- 🎯 **Per-icon imports**: Import individual icons for maximum optimization
|
|
12
12
|
- 🚀 **Optimized builds**: Production-ready with no development overhead
|
|
13
|
+
- 🎨 **Multiple variants**: 5 variants (regular, bold, filled, filltone, linetone) for every icon
|
|
13
14
|
|
|
14
15
|
## Installation
|
|
15
16
|
|
|
@@ -30,7 +31,7 @@ Stera Icons is optimized for production use:
|
|
|
30
31
|
- **Tree-shaking**: Import only what you use for minimal impact
|
|
31
32
|
- **No source maps**: Production builds exclude development files for optimal size
|
|
32
33
|
|
|
33
|
-
The package includes 552
|
|
34
|
+
The package includes 552 icons with 5 variants each (regular, bold, filled, filltone, linetone), but thanks to tree-shaking, you only pay for what you import.
|
|
34
35
|
|
|
35
36
|
## Usage
|
|
36
37
|
|
|
@@ -76,6 +77,8 @@ function App() {
|
|
|
76
77
|
<HeartIcon size={20} />
|
|
77
78
|
<HeartIcon variant="bold" size={20} />
|
|
78
79
|
<HeartIcon variant="filled" size={20} />
|
|
80
|
+
<HeartIcon variant="filltone" size={20} />
|
|
81
|
+
<HeartIcon variant="linetone" size={20} />
|
|
79
82
|
</div>
|
|
80
83
|
);
|
|
81
84
|
}
|
|
@@ -99,6 +102,34 @@ All icon components are suffixed with "Icon" to prevent naming conflicts with yo
|
|
|
99
102
|
- **Pattern**: `{Name}Icon` (e.g., `SearchIcon`, `HomeIcon`, `UserIcon`)
|
|
100
103
|
- **Variants**: Use the `variant` prop to switch between styles (regular, bold, filled, filltone, linetone)
|
|
101
104
|
|
|
105
|
+
## Icon Variants
|
|
106
|
+
|
|
107
|
+
Stera Icons provides five distinct variants for maximum design flexibility:
|
|
108
|
+
|
|
109
|
+
- **Regular**: Clean, outlined icons perfect for general use
|
|
110
|
+
- **Bold**: Thicker strokes for emphasis and better visibility at small sizes
|
|
111
|
+
- **Filled**: Solid icons for high contrast and modern designs
|
|
112
|
+
- **Filltone**: Filled icons with subtle transparency effects
|
|
113
|
+
- **Linetone**: Outlined icons with subtle transparency effects
|
|
114
|
+
|
|
115
|
+
### Example Usage
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
import { HeartIcon } from 'stera-icons';
|
|
119
|
+
|
|
120
|
+
function IconVariants() {
|
|
121
|
+
return (
|
|
122
|
+
<div>
|
|
123
|
+
<HeartIcon variant="regular" size={24} /> {/* Regular variant */}
|
|
124
|
+
<HeartIcon variant="bold" size={24} /> {/* Bold variant */}
|
|
125
|
+
<HeartIcon variant="filled" size={24} /> {/* Filled variant */}
|
|
126
|
+
<HeartIcon variant="filltone" size={24} /> {/* Filltone variant */}
|
|
127
|
+
<HeartIcon variant="linetone" size={24} /> {/* Linetone variant */}
|
|
128
|
+
</div>
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
102
133
|
## API
|
|
103
134
|
|
|
104
135
|
### IconProps
|
|
@@ -107,6 +138,7 @@ All icons accept these props:
|
|
|
107
138
|
|
|
108
139
|
| Prop | Type | Default | Description |
|
|
109
140
|
|------|------|---------|-------------|
|
|
141
|
+
| `variant` | `'regular' \| 'bold' \| 'filled' \| 'filltone' \| 'linetone'` | `'regular'` | Icon variant style |
|
|
110
142
|
| `size` | `number \| string` | `24` | Icon size in pixels |
|
|
111
143
|
| `color` | `string` | `'currentColor'` | Icon color (inherits text color by default) |
|
|
112
144
|
| `className` | `string` | - | Additional CSS class |
|