@modul-es/icons 0.1.9 → 0.2.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 +37 -24
- package/dist/Icon.js +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,35 +1,48 @@
|
|
|
1
|
-
#
|
|
1
|
+
# icons.Module();
|
|
2
2
|
|
|
3
|
-
A simple icon
|
|
3
|
+
A simple, modular icon component supporting multiple sets with consistent props & styling.
|
|
4
4
|
|
|
5
|
-
## Icon Sets
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
- **phosphor**
|
|
9
|
-
- **lucide**
|
|
10
|
-
- **pixelart**
|
|
6
|
+
## Supported sets
|
|
11
7
|
|
|
12
|
-
|
|
8
|
+
`huge` `phosphor` `lucide` `pixelart`
|
|
9
|
+
|
|
10
|
+
## Usage
|
|
13
11
|
|
|
14
12
|
```tsx
|
|
15
13
|
import { Icon } from '@modul-es/icons';
|
|
16
14
|
|
|
17
15
|
// Basic usage
|
|
18
|
-
<Icon set="huge" name="home-01"
|
|
19
|
-
|
|
20
|
-
//
|
|
21
|
-
<Icon set="
|
|
22
|
-
<Icon set="
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
<Icon set="
|
|
28
|
-
<Icon set="
|
|
16
|
+
<Icon set="huge" name="home-01" />
|
|
17
|
+
|
|
18
|
+
// Colors (Tailwind/hex)
|
|
19
|
+
<Icon set="lucide" name="sun" color="yellow-400" />
|
|
20
|
+
<Icon set="lucide" name="moon" color="#1e293b" />
|
|
21
|
+
|
|
22
|
+
// Size variants (xs, sm, md, lg, xl)
|
|
23
|
+
<Icon set="phosphor" name="spade" size="xs" />
|
|
24
|
+
<Icon set="phosphor" name="spade" size="sm" />
|
|
25
|
+
<Icon set="phosphor" name="spade" size="md" />
|
|
26
|
+
<Icon set="phosphor" name="spade" size="lg" />
|
|
27
|
+
<Icon set="phosphor" name="spade" size="xl" />
|
|
28
|
+
|
|
29
|
+
// Phosphor style variants
|
|
30
|
+
<Icon set="phosphor" name="heart" style="thin" />
|
|
31
|
+
<Icon set="phosphor" name="heart" style="light" />
|
|
32
|
+
<Icon set="phosphor" name="heart" style="bold" />
|
|
33
|
+
<Icon set="phosphor" name="heart" style="fill" color="red-500" />
|
|
34
|
+
<Icon set="phosphor" name="heart" style="duotone" color="purple-500" />
|
|
35
|
+
|
|
36
|
+
// Stroke width (for stroke-based icons)
|
|
37
|
+
<Icon set="lucide" name="circle" stroke="1" />
|
|
38
|
+
<Icon set="lucide" name="circle" stroke="1.5" /> (default)
|
|
39
|
+
<Icon set="lucide" name="circle" stroke="2" />
|
|
40
|
+
<Icon set="lucide" name="circle" stroke="2.5" />
|
|
41
|
+
|
|
42
|
+
// ClassName for custom styling
|
|
43
|
+
<Icon set="pixelart" name="command" className="rotate-45 opacity-50" />
|
|
29
44
|
```
|
|
30
45
|
|
|
31
|
-
##
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
- **stroke**
|
|
35
|
-
- **style** (does not apply to all sets)
|
|
46
|
+
## Site
|
|
47
|
+
|
|
48
|
+
Search & copy icon names, SVGs, and components → [modul.es/icons](https://modul.es/icons).
|
package/dist/Icon.js
CHANGED
|
@@ -125,7 +125,7 @@ function Icon(_a) {
|
|
|
125
125
|
if (set !== 'phosphor' && set !== 'lucide' && !newAttrs.includes('fill=')) {
|
|
126
126
|
newAttrs += " fill=\"currentColor\"";
|
|
127
127
|
}
|
|
128
|
-
if (!newAttrs.includes('shape-rendering=')) {
|
|
128
|
+
if (set === 'pixelart' && !newAttrs.includes('shape-rendering=')) {
|
|
129
129
|
newAttrs += " shape-rendering=\"crispEdges\"";
|
|
130
130
|
}
|
|
131
131
|
return "<svg".concat(newAttrs, ">");
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@modul-es/icons",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Icon component system",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -32,5 +32,6 @@
|
|
|
32
32
|
},
|
|
33
33
|
"keywords": ["react", "icons", "components", "modules"],
|
|
34
34
|
"author": "@traf",
|
|
35
|
+
"license": "MIT",
|
|
35
36
|
"homepage": "https://modul.es"
|
|
36
37
|
}
|