wiggle-icons 1.0.0 → 1.0.1
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 +82 -0
- package/package.json +10 -3
package/README.md
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
# wiggle-icons
|
|
2
|
+
|
|
3
|
+
A collection of animated React SVG icons with hover effects built with TypeScript.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install wiggle-icons
|
|
9
|
+
# or
|
|
10
|
+
yarn add wiggle-icons
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { PhoneXMarkIcon, ArrowTrendingDownIcon } from 'wiggle-icons';
|
|
17
|
+
|
|
18
|
+
export default function App() {
|
|
19
|
+
return (
|
|
20
|
+
<div>
|
|
21
|
+
<PhoneXMarkIcon size={24} color="#1e293b" />
|
|
22
|
+
<ArrowTrendingDownIcon size={24} color="#1e293b" />
|
|
23
|
+
</div>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Props
|
|
29
|
+
|
|
30
|
+
| Prop | Type | Default | Description |
|
|
31
|
+
|------|------|---------|-------------|
|
|
32
|
+
| `size` | `number` | `24` | Width and height of the icon |
|
|
33
|
+
| `color` | `string` | `currentColor` | Stroke color of the icon |
|
|
34
|
+
| `badge` | `number` | `0` | Badge count to display |
|
|
35
|
+
| `badgeColor` | `string` | `grey` | Background color of the badge |
|
|
36
|
+
| `badgeFont` | `string` | `14px` | Font size of the badge text |
|
|
37
|
+
| `badgeFontColor` | `string` | `black` | Font color of the badge text |
|
|
38
|
+
|
|
39
|
+
Since all icons extend `React.SVGProps<SVGSVGElement>`, you can also pass any
|
|
40
|
+
standard SVG prop like `className`, `id`, `onClick`, `style` etc:
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
<PhoneXMarkIcon
|
|
44
|
+
size={32}
|
|
45
|
+
color="red"
|
|
46
|
+
className="my-icon"
|
|
47
|
+
onClick={() => console.log('clicked!')}
|
|
48
|
+
style={{ marginRight: '8px' }}
|
|
49
|
+
/>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Available Icons
|
|
53
|
+
|
|
54
|
+
| Icon | Import |
|
|
55
|
+
|------|--------|
|
|
56
|
+
| Home | `HomeIcon` |
|
|
57
|
+
| Shopping Bag | `ShoppingBag` |
|
|
58
|
+
| Scissor | `ScissorIcon` |
|
|
59
|
+
| Shopping Cart | `ShoppingCartIcon` |
|
|
60
|
+
| Speaker | `SpeakerIcon` |
|
|
61
|
+
| Arrow Right Left | `ArrowRightLeftIcon` |
|
|
62
|
+
| At Sign | `AtSignIcon` |
|
|
63
|
+
| Refresh | `RefreshIcon` |
|
|
64
|
+
| Arrow Pointing In | `ArrowPointingInIcon` |
|
|
65
|
+
| Arrow Pointing Out | `ArrowPointingOutIcon` |
|
|
66
|
+
| Chart | `ChartIcon` |
|
|
67
|
+
| Bug Ant | `BugAntIcon` |
|
|
68
|
+
| Chat Bubble | `ChatBubbleLeftEllipsisIcon` |
|
|
69
|
+
| Chevron Double Left | `ChevronDoubleLeftIcon` |
|
|
70
|
+
| Cursor Arrow Rays | `CursorArrowRaysIcon` |
|
|
71
|
+
| Face Frown | `FaceFrownIcon` |
|
|
72
|
+
| Face Smile | `FaceSmileIcon` |
|
|
73
|
+
| Lock Open | `LockOpenIcon` |
|
|
74
|
+
| Paper Plane | `PaperPlaneIcon` |
|
|
75
|
+
| Rocket Launch | `RocketLaunchIcon` |
|
|
76
|
+
| Truck | `TruckIcon` |
|
|
77
|
+
| Phone X Mark | `PhoneXMarkIcon` |
|
|
78
|
+
| Arrow Trending Down | `ArrowTrendingDownIcon` |
|
|
79
|
+
|
|
80
|
+
## License
|
|
81
|
+
|
|
82
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wiggle-icons",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "A collection of animated React SVG icons",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -15,7 +15,14 @@
|
|
|
15
15
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
16
16
|
"build": "tsup"
|
|
17
17
|
},
|
|
18
|
-
"keywords": [
|
|
18
|
+
"keywords": [
|
|
19
|
+
"wiggle-icons",
|
|
20
|
+
"icons",
|
|
21
|
+
"react",
|
|
22
|
+
"svg",
|
|
23
|
+
"animated",
|
|
24
|
+
"typescript"
|
|
25
|
+
],
|
|
19
26
|
"author": "Your Name",
|
|
20
27
|
"license": "MIT",
|
|
21
28
|
"peerDependencies": {
|
|
@@ -27,4 +34,4 @@
|
|
|
27
34
|
"tsup": "^8.5.1",
|
|
28
35
|
"typescript": "^5.4.5"
|
|
29
36
|
}
|
|
30
|
-
}
|
|
37
|
+
}
|