@ebolax/animated-icons 1.0.1 → 1.0.3
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 +45 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,7 +8,19 @@ The `/dist` folder contains everything you need to consume the library in your o
|
|
|
8
8
|
|
|
9
9
|
## Getting started
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
**Install and build**
|
|
12
|
+
|
|
13
|
+
Install from npm
|
|
14
|
+
You can install this package from npm and use the built CSS and icons in your project.
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
npm i @ebolax/animated-icons
|
|
18
|
+
```
|
|
19
|
+
After installing, link the stylesheet from `node_modules/ebolax-animated-icons/dist/animated-icons.css` (or the minified `animated-icons.min.css`) and use the icon classes as shown below.
|
|
20
|
+
|
|
21
|
+
You can also copy the `animated-icons.css` file and the `aic-icons` directory from the `dist/` folder to any location in your project. Once copied, update the `<link>` tag `href` and the icon asset paths accordingly, and the icons will work independently from your `node_modules` directory.
|
|
22
|
+
|
|
23
|
+
**Manual Install**
|
|
12
24
|
|
|
13
25
|
```bash
|
|
14
26
|
npm install
|
|
@@ -23,13 +35,13 @@ This generates:
|
|
|
23
35
|
- `dist/icons.json` (metadata used by the docs)
|
|
24
36
|
- `dist/index.html` (demo / playground)
|
|
25
37
|
|
|
26
|
-
|
|
38
|
+
**Include the CSS in your app**
|
|
27
39
|
|
|
28
40
|
```html
|
|
29
41
|
<link rel="stylesheet" href="/path/to/animated-icons.css">
|
|
30
42
|
```
|
|
31
43
|
|
|
32
|
-
You can also copy the contents of `animated-icons.css`
|
|
44
|
+
You can also copy the contents of `animated-icons.css` and `aic-icons` directory into your own bundle.
|
|
33
45
|
|
|
34
46
|
---
|
|
35
47
|
|
|
@@ -76,7 +88,7 @@ In the docs (`dist/index.html`), all sidebar items, tabs and icon buttons use th
|
|
|
76
88
|
|
|
77
89
|
---
|
|
78
90
|
|
|
79
|
-
##
|
|
91
|
+
## Advanced Parameters
|
|
80
92
|
|
|
81
93
|
Icons use CSS custom properties
|
|
82
94
|
|
|
@@ -88,12 +100,39 @@ Icons use CSS custom properties
|
|
|
88
100
|
|
|
89
101
|
To change the animation or size for example:
|
|
90
102
|
|
|
91
|
-
```
|
|
103
|
+
```html
|
|
92
104
|
<i class="aic aic-hero-arrow-path" style="--aic-animation: aic-bar;"></i>
|
|
93
|
-
|
|
105
|
+
```
|
|
106
|
+
```html
|
|
94
107
|
<i class="aic aic-hero-arrow-path" style="--aic-size: 32px;"></i>
|
|
95
108
|
```
|
|
96
109
|
|
|
110
|
+
### Available Animation Names
|
|
111
|
+
|
|
112
|
+
You can control the animation applied to any icon by setting the `--aic-animation` CSS variable. The following animation names are available:
|
|
113
|
+
|
|
114
|
+
- **bar**: Grows or pulses upwards from the bottom, suitable for progress, charts, or similar icons.
|
|
115
|
+
- **bell-ring**: Mimics a ringing bell; a subtle shaking from the top, great for notification or alert icons.
|
|
116
|
+
- **dot-appear**: Fades & scales a dot in/out; best for indicators and "active" states.
|
|
117
|
+
- **fade**: Simple fade-in/out effect.
|
|
118
|
+
- **gear**: Rotates as a gear; useful for settings, cog, or machinery icons.
|
|
119
|
+
- **heart-beat**: Pulseslike a beating heart. Use with heart or favorite icons.
|
|
120
|
+
- **mail-flap**: Flips/flaps on the Y axis like an envelope; works best with mail/envelope icons.
|
|
121
|
+
- **nudge-up, nudge-down, nudge-left, nudge-right, nudge-right-up, nudge-right-down, nudge-left-up, nudge-left-down**: Nudges the icon quickly in a given direction. Great for arrows, navigation, or "movement" cues.
|
|
122
|
+
- **page-turn**: Simulates the corner of a page being turned; ideally used with book or document-related icons.
|
|
123
|
+
- **pulse-element**: Scales and pulses the icon, perfect for "live," "online," or attention-grabbing effects.
|
|
124
|
+
- **rocket-lift**: Lifts/launches like a rocket; fun for rocket, navigation, or launch-related icons.
|
|
125
|
+
- **scale-pop**: Quick scale in/out ("pop"); the default, suitable for most icons.
|
|
126
|
+
- **shake**: Vigorous left-right shake, communicating "no," a warning, or error.
|
|
127
|
+
- **spin**: Continuous rotation, as with spinners/loaders or refresh icons.
|
|
128
|
+
|
|
129
|
+
**Example usage:**
|
|
130
|
+
```html
|
|
131
|
+
<i class="aic aic-luc-bell" style="--aic-animation: aic-bell-ring;"></i>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
You can interactively cycle through available animations in the docs (`dist/index.html`) under the "If you want to change the animation" section.
|
|
135
|
+
|
|
97
136
|
You can also start a dev server:
|
|
98
137
|
|
|
99
138
|
```bash
|