pulsoicon-vue 5.2.1 → 6.0.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 +47 -257
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,17 +2,15 @@
|
|
|
2
2
|
<img src="https://raw.githubusercontent.com/CityPulso/PulsoIcon/main/logo.png" alt="PulsoIcon" width="160" />
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
|
-
<h1 align="center">PulsoIcon</h1>
|
|
5
|
+
<h1 align="center">PulsoIcon for Vue</h1>
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
|
-
<strong>9955 animated icons. Every one has its own motion.</strong
|
|
9
|
-
A drop-in replacement for lucide-react icons that comes alive on hover, also for Vue, Svelte, Jetpack Compose and SwiftUI.
|
|
8
|
+
<strong>9955 animated icons. Every one has its own motion.</strong>
|
|
10
9
|
</p>
|
|
11
10
|
|
|
12
11
|
<p align="center">
|
|
13
|
-
<a href="https://www.npmjs.com/package/pulsoicon"><img src="https://img.shields.io/npm/v/pulsoicon?color=f2552c" alt="npm version" /></a>
|
|
14
|
-
<a href="https://
|
|
15
|
-
<a href="./LICENSE"><img src="https://img.shields.io/npm/l/pulsoicon?color=f2552c" alt="license" /></a>
|
|
12
|
+
<a href="https://www.npmjs.com/package/pulsoicon-vue"><img src="https://img.shields.io/npm/v/pulsoicon-vue?color=f2552c" alt="npm version" /></a>
|
|
13
|
+
<a href="https://github.com/CityPulso/PulsoIcon/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/pulsoicon-vue?color=f2552c" alt="license" /></a>
|
|
16
14
|
</p>
|
|
17
15
|
|
|
18
16
|
---
|
|
@@ -21,308 +19,100 @@
|
|
|
21
19
|
<img src="https://raw.githubusercontent.com/CityPulso/PulsoIcon/main/PulsoIcon_README_Loop.gif" alt="PulsoIcon icons animating on hover" width="720" />
|
|
22
20
|
</p>
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
PulsoIcon gives every icon a motion written for that icon, not one effect stamped on all of them. At rest each icon is a clean 24×24 icon; it plays when someone hovers or focuses the button, link or tab it sits in.
|
|
27
|
-
|
|
28
|
-
Every one of the 9955 motions is written for this set. About 3,700 icons are drawn here, including the line-art brand logos; the rest build on the shapes of [Lucide](https://lucide.dev), [Tabler Icons](https://tabler.io/icons) and [Iconoir](https://iconoir.com), which are credited in [LICENSE](https://github.com/CityPulso/PulsoIcon/blob/main/LICENSE).
|
|
29
|
-
|
|
30
|
-
## Why PulsoIcon
|
|
31
|
-
|
|
32
|
-
- **9955 icons, each with its own motion**:
|
|
33
|
-
- **About 3,700 drawn for this set**: about 2,770 line-art brand logos (CityPulso, GitHub, Slack, Spotify, OpenAI, Claude, TikTok, VS Code, Google Drive, …, most drawn after the logos collected by [Simple Icons](https://simpleicons.org)) and around 900 other icons, including lowercase a–z, animals, sports, 3D tools and icons drawn after [Phosphor](https://phosphoricons.com).
|
|
34
|
-
- **Built on open icon sets**: all 2020 [Lucide](https://lucide.dev) icons (as of 1.68), plus the shapes of [Tabler Icons](https://tabler.io/icons) (3.50, including 264 brand logos) and [Iconoir](https://iconoir.com) (7.12).
|
|
35
|
-
- **3042 brand logos** in all.
|
|
36
|
-
- **Switch in one line**: same component names as lucide-react (`Calendar`, `CalendarIcon`, aliases such as `AlertCircle`) and the same props. Usually you only change the import.
|
|
37
|
-
- **Ships only what you use**: every icon is its own module and the package is side-effect free, so bundlers keep the icons you import and drop the rest. Three icons add about 12 kB before minification.
|
|
38
|
-
- **Plays where people point**: hover or focus anywhere on a button, link, label, tab or menu item and its icon plays.
|
|
39
|
-
- **Respects reduced motion**: nothing moves when the system asks for less motion.
|
|
40
|
-
- **Two dependencies**: React and [Motion](https://motion.dev).
|
|
22
|
+
Vue 3.5+ icons that play their own motion when someone hovers or focuses the button, link or tab they sit in. They render exactly the same `<svg>` as `pulsoicon-react` and move the same way.
|
|
41
23
|
|
|
42
24
|
## Install
|
|
43
25
|
|
|
44
26
|
```bash
|
|
45
|
-
npm install pulsoicon
|
|
27
|
+
npm install pulsoicon-vue
|
|
46
28
|
```
|
|
47
29
|
|
|
48
|
-
Works with
|
|
49
|
-
|
|
50
|
-
The same icons, props and motion are also available for [Vue, Svelte, Android and iOS](#other-platforms).
|
|
30
|
+
Works with Vue 3.5 or newer. [Motion](https://motion.dev) (12 or newer) plays the icons; npm installs it for you.
|
|
51
31
|
|
|
52
32
|
## Quick start
|
|
53
33
|
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
return (
|
|
59
|
-
<>
|
|
60
|
-
<button>
|
|
61
|
-
<Bell size={20} /> Notifications
|
|
62
|
-
</button>
|
|
63
|
-
<button>
|
|
64
|
-
<Calendar /> Schedule
|
|
65
|
-
</button>
|
|
66
|
-
<button>
|
|
67
|
-
<Trash2 color="crimson" strokeWidth={1.5} /> Delete
|
|
68
|
-
</button>
|
|
69
|
-
</>
|
|
70
|
-
);
|
|
71
|
-
}
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
Hover a button and its icon plays.
|
|
75
|
-
|
|
76
|
-
### Coming from lucide-react
|
|
34
|
+
```vue
|
|
35
|
+
<script setup lang="ts">
|
|
36
|
+
import { Bell, Calendar, Trash2 } from "pulsoicon-vue";
|
|
37
|
+
</script>
|
|
77
38
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
39
|
+
<template>
|
|
40
|
+
<button><Bell :size="20" /> Notifications</button>
|
|
41
|
+
<button><Calendar /> Schedule</button>
|
|
42
|
+
<button><Trash2 color="crimson" :stroke-width="1.5" /> Delete</button>
|
|
43
|
+
</template>
|
|
81
44
|
```
|
|
82
45
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
### Coming from Tabler
|
|
86
|
-
|
|
87
|
-
Tabler icon names work too, without the `Icon` prefix: `IconMoodSad` is `MoodSad`, `IconHome` is `Home`, `IconBrandGithub` is `BrandGithub`. Where Lucide already has the icon, the Tabler name points to it (`Home` is `House`), and Tabler families follow Lucide's naming (`HomeDollar` is `HouseDollar`, `PhotoEdit` is `ImageEdit`).
|
|
46
|
+
Hover a button and its icon plays. Props work in camelCase or kebab-case (`:stroke-width`, `:auto-animated`).
|
|
88
47
|
|
|
89
48
|
## Props
|
|
90
49
|
|
|
91
|
-
|
|
92
|
-
|---|---|---|---|
|
|
93
|
-
| `size` | `number \| string` | `24` | Width and height |
|
|
94
|
-
| `color` | `string` | `currentColor` | Stroke colour, and fill colour when `solid` |
|
|
95
|
-
| `strokeWidth` | `number \| string` | `2` | Stroke width on the 24-unit grid |
|
|
96
|
-
| `absoluteStrokeWidth` | `boolean` | `false` | Keep the stroke the same number of pixels at any size |
|
|
97
|
-
| `solid` | `boolean` | `false` | Filled icon instead of outline (see [Solid icons](#solid-icons)) |
|
|
98
|
-
| `animated` | `boolean` | `true` | `false` makes the icon fully static: nothing plays it, not even the ref or `play` |
|
|
99
|
-
| `autoAnimated` | `boolean` | `true` | Play the built-in hover / focus trigger. `false` turns that off; the ref and `play` still work |
|
|
100
|
-
| `play` | `boolean` | | `true` plays the motion, `false` returns to rest. Works with or without `autoAnimated` |
|
|
50
|
+
The same names, defaults and meaning as in every PulsoIcon package.
|
|
101
51
|
|
|
102
|
-
|
|
52
|
+
| Prop | Type | Default | Description |
|
|
53
|
+
| --------------------- | ------------------ | -------------- | ---------------------------------------------------------------------------------------------- |
|
|
54
|
+
| `size` | `number \| string` | `24` | Width and height |
|
|
55
|
+
| `color` | `string` | `currentColor` | Stroke colour, and fill colour when `solid` |
|
|
56
|
+
| `strokeWidth` | `number \| string` | `2` | Stroke width on the 24-unit grid |
|
|
57
|
+
| `absoluteStrokeWidth` | `boolean` | `false` | Keep the stroke the same number of pixels at any size |
|
|
58
|
+
| `solid` | `boolean` | `false` | Filled icon instead of outline |
|
|
59
|
+
| `animated` | `boolean` | `true` | `false` makes the icon fully static: nothing plays it, not even the ref or `play` |
|
|
60
|
+
| `autoAnimated` | `boolean` | `true` | Play the built-in hover / focus trigger. `false` turns that off; the ref and `play` still work |
|
|
61
|
+
| `play` | `boolean` | | `true` plays the motion, `false` returns to rest. Works with or without `autoAnimated` |
|
|
103
62
|
|
|
104
|
-
Any other
|
|
63
|
+
Any other attribute (`class`, `style`, `aria-label`, …) goes on the `<svg>`. Icons render with `aria-hidden="true"`; give the surrounding button or link a label.
|
|
105
64
|
|
|
106
65
|
## When the animation plays
|
|
107
66
|
|
|
108
|
-
An icon plays when the pointer enters, or focus moves into, its closest `button`, `a`, `label`, `summary`, `[role="button"]`, `[role="link"]`, `[role="tab"]` or `[role="menuitem"]`. If there is none, the icon plays on its own hover.
|
|
109
|
-
|
|
110
|
-
Any other element can become the trigger with `data-icon-trigger`:
|
|
111
|
-
|
|
112
|
-
```tsx
|
|
113
|
-
<div className="card" data-icon-trigger>
|
|
114
|
-
<MapPin /> 3 venues near you
|
|
115
|
-
</div>
|
|
116
|
-
```
|
|
67
|
+
An icon plays when the pointer enters, or focus moves into, its closest `button`, `a`, `label`, `summary`, `[role="button"]`, `[role="link"]`, `[role="tab"]` or `[role="menuitem"]`. If there is none, the icon plays on its own hover. Any other element becomes the trigger with `data-icon-trigger`. Nothing moves when the system asks for reduced motion.
|
|
117
68
|
|
|
118
69
|
### Play from code
|
|
119
70
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
```tsx
|
|
123
|
-
import { useRef } from "react";
|
|
124
|
-
import { Check, type IconHandle } from "pulsoicon";
|
|
125
|
-
|
|
126
|
-
function SaveButton() {
|
|
127
|
-
const check = useRef<IconHandle>(null);
|
|
128
|
-
return (
|
|
129
|
-
<button onClick={() => check.current?.startAnimation()}>
|
|
130
|
-
<Check autoAnimated={false} ref={check} /> Save
|
|
131
|
-
</button>
|
|
132
|
-
);
|
|
133
|
-
}
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
Or drive it from state with `play`. The motion starts when `play` turns `true` and returns to rest when it turns `false`:
|
|
137
|
-
|
|
138
|
-
```tsx
|
|
139
|
-
<Bell autoAnimated={false} play={hasNewMessage} />
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
`animated={false}` keeps an icon completely still; the ref and `play` do nothing.
|
|
143
|
-
|
|
144
|
-
## Solid icons
|
|
145
|
-
|
|
146
|
-
`solid` draws the filled version of an icon, in `color`:
|
|
147
|
-
|
|
148
|
-
```tsx
|
|
149
|
-
<Heart solid color="crimson" />
|
|
150
|
-
```
|
|
151
|
-
|
|
152
|
-
About 1,700 icons have a filled drawing taken from the [Tabler](https://tabler.io/icons) filled set or the [Phosphor](https://phosphoricons.com) fill weight. Their source file has a `solid` list and a "Solid from …" comment. The other icons fill their closed outline shapes and cut their inner lines out of the fill, so the details stay visible. Motions that draw a stroke on (`draw`, `redraw`, …) pop in instead on filled shapes.
|
|
153
|
-
|
|
154
|
-
## Other platforms
|
|
155
|
-
|
|
156
|
-
Every package draws the same 9955 icons with the same motion, from the same source. The props have the same names, defaults and meaning as in React. One version number covers them all.
|
|
157
|
-
|
|
158
|
-
| Platform | Install | Package |
|
|
159
|
-
|---|---|---|
|
|
160
|
-
| React | `npm install pulsoicon` | [pulsoicon](https://www.npmjs.com/package/pulsoicon) |
|
|
161
|
-
| Vue 3.5+ | `npm install pulsoicon-vue` | [pulsoicon-vue](https://www.npmjs.com/package/pulsoicon-vue) |
|
|
162
|
-
| Svelte 5 | `npm install pulsoicon-svelte` | [pulsoicon-svelte](https://www.npmjs.com/package/pulsoicon-svelte) |
|
|
163
|
-
| Android (Jetpack Compose) | `implementation("com.citypulso:pulsoicon:<version>")` | Maven Central |
|
|
164
|
-
| iOS / macOS (SwiftUI) | `.package(url: "https://github.com/CityPulso/PulsoIcon.git", from: "<version>")` | Swift Package Manager |
|
|
165
|
-
|
|
166
|
-
### Vue
|
|
71
|
+
A template ref gives `startAnimation()` and `stopAnimation()`; both return a promise that resolves when the motion has finished. Set `:auto-animated="false"` when only your code should decide when it plays:
|
|
167
72
|
|
|
168
73
|
```vue
|
|
169
74
|
<script setup lang="ts">
|
|
75
|
+
import type { IconHandle } from "pulsoicon-vue";
|
|
76
|
+
|
|
77
|
+
import { Check } from "pulsoicon-vue";
|
|
170
78
|
import { ref } from "vue";
|
|
171
|
-
import { Bell, Check, type IconHandle } from "pulsoicon-vue";
|
|
172
79
|
|
|
173
80
|
const check = ref<IconHandle>();
|
|
174
81
|
</script>
|
|
175
82
|
|
|
176
83
|
<template>
|
|
177
|
-
<button><Bell :size="20" /> Notifications</button>
|
|
178
84
|
<button @click="check?.startAnimation()"><Check ref="check" :auto-animated="false" /> Save</button>
|
|
179
85
|
</template>
|
|
180
86
|
```
|
|
181
87
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
```svelte
|
|
185
|
-
<script lang="ts">
|
|
186
|
-
import { Bell, Check } from "pulsoicon-svelte";
|
|
187
|
-
|
|
188
|
-
let check: ReturnType<typeof Check>;
|
|
189
|
-
</script>
|
|
190
|
-
|
|
191
|
-
<button><Bell size={20} /> Notifications</button>
|
|
192
|
-
<button onclick={() => check.startAnimation()}><Check bind:this={check} autoAnimated={false} /> Save</button>
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
Vue and Svelte render exactly the same `<svg>` as React and play it with [Motion](https://motion.dev)'s `animate()`. They take `class` and `style` like any element.
|
|
196
|
-
|
|
197
|
-
### Android (Jetpack Compose)
|
|
198
|
-
|
|
199
|
-
```kotlin
|
|
200
|
-
import com.citypulso.pulsoicon.PulsoIcon
|
|
201
|
-
import com.citypulso.pulsoicon.PulsoIcons
|
|
202
|
-
import com.citypulso.pulsoicon.icons.Bell
|
|
203
|
-
|
|
204
|
-
val interactions = remember { MutableInteractionSource() }
|
|
205
|
-
IconButton(onClick = { /* … */ }, interactionSource = interactions) {
|
|
206
|
-
PulsoIcon(PulsoIcons.Bell, contentDescription = "Notifications", interactionSource = interactions)
|
|
207
|
-
}
|
|
208
|
-
```
|
|
209
|
-
|
|
210
|
-
The icon plays when the control whose `interactionSource` you pass is pressed, hovered or focused (Compose has no "closest interactive ancestor", so it is passed in). `color` defaults to `LocalContentColor`. Play from code with `play = true`, or with `rememberPulsoIconHandle()` passed as `handle` and its suspending `startAnimation()` / `stopAnimation()`. `PulsoIcons.byKey("bell")` looks an icon up by its stored key. Unused icons are removed by R8.
|
|
211
|
-
|
|
212
|
-
### iOS and macOS (SwiftUI)
|
|
213
|
-
|
|
214
|
-
```swift
|
|
215
|
-
import PulsoIcon
|
|
88
|
+
Or drive it from state: `<Bell :auto-animated="false" :play="hasNewMessage" />`.
|
|
216
89
|
|
|
217
|
-
|
|
218
|
-
Label { Text("Notifications") } icon: { PulsoIconView(.bell, size: 20, play: hasNewMessage) }
|
|
219
|
-
}
|
|
220
|
-
```
|
|
90
|
+
## Solid icons
|
|
221
91
|
|
|
222
|
-
|
|
92
|
+
`solid` draws the filled version of an icon, in `color`. About 1,700 icons have a filled drawing; the others fill their closed shapes and cut their inner lines out of the fill.
|
|
223
93
|
|
|
224
94
|
## Finding icons
|
|
225
95
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
Icons also answer to the names other icon sets use: `Gear` is `Settings`, `Magnifier` is `Search`, `Cart` is `ShoppingCart`, `World` is `Globe`, `DotsHorizontal` is `Ellipsis`, and so on. Every icon is also exported with an `Icon` suffix (`BellIcon`).
|
|
229
|
-
|
|
230
|
-
### Brand logos
|
|
231
|
-
|
|
232
|
-
Brand icons start with `Brand` (`BrandGithub`, `BrandSlack`, `BrandOpenai`, …). The brands added up to 3.1 are also exported without the prefix (`Github`, `Slack`); the ones added in 4.0 only with it, because many brand names are ordinary words. They are simplified line drawings made for this set, most of the newer ones drawn after the logos collected by [Simple Icons](https://simpleicons.org).
|
|
96
|
+
Names follow lucide-react (`Calendar`, `Trash2`), every icon is also exported with an `Icon` suffix (`BellIcon`), and other icon sets' names work too (`Gear` is `Settings`, Tabler's `IconHome` is `Home`). Brand logos start with `Brand` (`BrandGithub`). Browse them all in the [repository README](https://github.com/CityPulso/PulsoIcon#finding-icons).
|
|
233
97
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
### All icons at once
|
|
237
|
-
|
|
238
|
-
For icon pickers and galleries, `pulsoicon/all` exports every icon by its kebab-case name. It pulls in all 9955 icons, so use it only where you need the full set:
|
|
239
|
-
|
|
240
|
-
```tsx
|
|
241
|
-
import { ICON_NAMES, ICONS } from "pulsoicon/all";
|
|
242
|
-
|
|
243
|
-
const Icon = ICONS["party-popper"];
|
|
244
|
-
```
|
|
98
|
+
For icon pickers, `pulsoicon-vue/all` exports every icon by its kebab-case name (all 9955 of them, so only where you need the full set). `pulsoicon-vue/names` lists the names without loading any icon, and `pulsoicon-vue/icons/<name>` loads one:
|
|
245
99
|
|
|
246
|
-
|
|
100
|
+
```ts
|
|
101
|
+
import type { IconName } from "pulsoicon-vue/names";
|
|
247
102
|
|
|
248
|
-
|
|
249
|
-
import { ICON_NAMES, type IconName } from "pulsoicon/names";
|
|
103
|
+
import { ICON_NAMES } from "pulsoicon-vue/names";
|
|
250
104
|
|
|
251
|
-
const load = (name: IconName) => import(`pulsoicon/icons/${name}`);
|
|
105
|
+
const load = (name: IconName) => import(`pulsoicon-vue/icons/${name}`);
|
|
252
106
|
```
|
|
253
107
|
|
|
254
108
|
## Styling
|
|
255
109
|
|
|
256
|
-
Each icon renders `<svg class="pulsoicon pulsoicon-<name>">`, so CSS can target every icon or
|
|
110
|
+
Each icon renders `<svg class="pulsoicon pulsoicon-<name>">`, so CSS can target every icon (`.pulsoicon`) or one (`.pulsoicon-bell`).
|
|
257
111
|
|
|
258
|
-
|
|
259
|
-
.pulsoicon {
|
|
260
|
-
vertical-align: -0.125em;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
.pulsoicon-bell {
|
|
264
|
-
color: #f2552c;
|
|
265
|
-
}
|
|
266
|
-
```
|
|
267
|
-
|
|
268
|
-
## Report a wrong icon
|
|
269
|
-
|
|
270
|
-
If an icon is drawn wrong, a brand logo doesn't match the real one, or a motion looks off, please email
|
|
271
|
-
**citypulso@gmail.com** with the icon name (for example `brand-avianca`) and, if you can, a screenshot or a link
|
|
272
|
-
to the correct logo. Issues on GitHub are welcome too.
|
|
273
|
-
|
|
274
|
-
## Contributing
|
|
275
|
-
|
|
276
|
-
```bash
|
|
277
|
-
npm install
|
|
278
|
-
npm run gen # writes every platform's icon files from packages/core
|
|
279
|
-
npm run preview # gallery of every icon at http://localhost:10205
|
|
280
|
-
npm test
|
|
281
|
-
npm run build
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
Each icon is one data file in `packages/core/src/icons/<name>.ts`, shared by every platform: the shapes of the icon and, for each shape, an optional motion (`r` recipe from `packages/core/src/recipes.ts`, `d` delay, `x`/`y` direction, `a` amplitude, `o` pivot point on the 24×24 grid). Edit that file to change how an icon moves, then run `npm run gen`. Other names live in `packages/core/src/aliases.ts`.
|
|
285
|
-
|
|
286
|
-
| Folder | What |
|
|
287
|
-
|---|---|
|
|
288
|
-
| `packages/core` | `pulsoicon-core`: the icons, recipes, solid drawings and the framework-free player |
|
|
289
|
-
| `packages/react`, `packages/vue`, `packages/svelte` | The web packages; their icon files are generated |
|
|
290
|
-
| `kotlin/` | The Android library (Gradle); `icons/` is generated and committed |
|
|
291
|
-
| `swift/` and `Package.swift` | The Swift package; `Icons/` is generated and committed |
|
|
292
|
-
|
|
293
|
-
The Kotlin and Swift recipes are written by hand; their tests check them against `packages/core` (`kotlin/`: `./gradlew :pulsoicon:testDebugUnitTest`; Swift: `swift test`). `npm run test:browser` plays icons in Chromium through React, Vue and Svelte side by side and checks that they move the same.
|
|
294
|
-
|
|
295
|
-
### Releasing
|
|
112
|
+
## Other platforms
|
|
296
113
|
|
|
297
|
-
|
|
114
|
+
The same icons, props and motion: [React, Vue, Svelte, Android (Jetpack Compose) and iOS (SwiftUI)](https://github.com/CityPulso/PulsoIcon#packages).
|
|
298
115
|
|
|
299
116
|
## License
|
|
300
117
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
### What is ours, and what comes from other icon sets
|
|
304
|
-
|
|
305
|
-
| Part | Origin |
|
|
306
|
-
|---|---|
|
|
307
|
-
| Every animation (how each icon moves) | Written for PulsoIcon |
|
|
308
|
-
| Runtime code (`createIcon`, triggers, motion recipes) | Written for PulsoIcon |
|
|
309
|
-
| About 3,700 icons, including about 2,770 line-art brand logos | Drawn for PulsoIcon |
|
|
310
|
-
| Shapes of the 2020 Lucide icons | Based on [Lucide](https://lucide.dev) (ISC; some derived from Feather, MIT) |
|
|
311
|
-
| Shapes of the icons marked "Adapted from Tabler Icons" | Based on [Tabler Icons](https://tabler.io/icons) (MIT) |
|
|
312
|
-
| Shapes of the icons marked "Adapted from Iconoir" | Based on [Iconoir](https://iconoir.com) (MIT) |
|
|
313
|
-
| Five icons marked "Adapted from Hugeicons" | Adapted from [Hugeicons](https://hugeicons.com) (MIT) |
|
|
314
|
-
| Icons marked "Drawn after Phosphor Icons" | Redrawn after [Phosphor](https://phosphoricons.com) shapes (MIT) |
|
|
315
|
-
| Solid shapes marked "Solid from Tabler Icons" / "Solid from Phosphor Icons" | Taken from the Tabler filled set and the Phosphor fill weight (MIT) |
|
|
316
|
-
| Brand icons marked "Drawn after Simple Icons" | Drawn after the logos collected by [Simple Icons](https://simpleicons.org) (CC0) |
|
|
317
|
-
|
|
318
|
-
Icons based on or drawn after Tabler Icons, Iconoir, Hugeicons, Phosphor or Simple Icons name their source in a comment at the top of their file; the Lucide icons keep their Lucide names. The full license texts are in [LICENSE](https://github.com/CityPulso/PulsoIcon/blob/main/LICENSE).
|
|
319
|
-
|
|
320
|
-
### Using PulsoIcon in your project
|
|
321
|
-
|
|
322
|
-
You may use PulsoIcon freely, including in commercial and closed-source products. The one condition, from ISC and the MIT licenses of the sets above, is the notice:
|
|
323
|
-
|
|
324
|
-
- **If you ship PulsoIcon** (in an app, a website bundle, a template or a library of your own), include PulsoIcon's [LICENSE](https://github.com/CityPulso/PulsoIcon/blob/main/LICENSE) file with it, for example on your "open-source licenses" or "third-party notices" page or in a `THIRD_PARTY_NOTICES` file. It already contains the notices of Lucide, Tabler Icons, Iconoir, Hugeicons and Phosphor.
|
|
325
|
-
- **If you copy or modify icons** from PulsoIcon into your own set, keep the source comment at the top of each file, and keep the LICENSE notices.
|
|
326
|
-
- You don't have to credit PulsoIcon inside your product's interface, although a link is always appreciated.
|
|
327
|
-
|
|
328
|
-
Brand logos are trademarks of their owners. Using a brand icon doesn't imply endorsement, and you should follow each brand's own guidelines.
|
|
118
|
+
ISC © CityPulso. Some icon shapes come from Lucide, Tabler Icons, Iconoir, Hugeicons and Phosphor; ship the [LICENSE](https://github.com/CityPulso/PulsoIcon/blob/main/LICENSE) file with your app. What comes from where is listed in the [repository README](https://github.com/CityPulso/PulsoIcon#license).
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pulsoicon-vue",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "9955 animated Vue icons, each with its own hand-written motion. The same icons, props and motion as pulsoicon
|
|
3
|
+
"version": "6.0.0",
|
|
4
|
+
"description": "9955 animated Vue icons, each with its own hand-written motion. The same icons, props and motion as pulsoicon-react.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"license": "ISC",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"prepublishOnly": "npm run typecheck && npm test && npm run build"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"pulsoicon-core": "
|
|
59
|
+
"pulsoicon-core": "6.0.0"
|
|
60
60
|
},
|
|
61
61
|
"peerDependencies": {
|
|
62
62
|
"motion": ">=12.0.0",
|