react-useanimations 3.1.0 → 3.1.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 +127 -74
- package/lib/discord.js +1 -1
- package/lib/discord.mjs +1 -1
- package/lib/telegram.js +1 -1
- package/lib/telegram.mjs +1 -1
- package/package.json +2 -2
- package/svg.json +2 -2
package/README.md
CHANGED
|
@@ -1,35 +1,50 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# react-useanimations
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The official React component for [useAnimations](https://useanimations.com):<br />
|
|
6
|
+
**300 free animated icons with hover, click and loop interactions built in.**
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
[](https://www.npmjs.com/package/react-useanimations)
|
|
9
|
+
[](https://www.npmjs.com/package/react-useanimations)
|
|
10
|
+
[](https://www.npmjs.com/package/react-useanimations?activeTab=dependencies)
|
|
11
|
+
[](src/index.tsx)
|
|
12
|
+
[](LICENSE)
|
|
8
13
|
|
|
9
|
-
|
|
14
|
+
[**Browse all icons →**](https://useanimations.com/#icons) · [Documentation](https://useanimations.com/documentation) · [shadcn/ui](https://useanimations.com/documentation#shadcn) · [Upgrading from v2](#upgrading-from-v2)
|
|
10
15
|
|
|
11
|
-
|
|
16
|
+
<a href="https://useanimations.com"><img src=".github/assets/preview.webp" alt="useAnimations: animated icons for React" width="100%" /></a>
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
</div>
|
|
14
19
|
|
|
15
|
-
|
|
16
|
-
npm install react-useanimations
|
|
17
|
-
```
|
|
20
|
+
## Why useAnimations
|
|
18
21
|
|
|
19
|
-
|
|
22
|
+
- **Every icon already knows how to move.** Loaders loop, menus toggle, the trash can opens on hover, social icons play while you point at them. You pick the icon; the interaction comes with it.
|
|
23
|
+
- **Tiny, zero dependencies.** A built-in 8 kB (gzipped) player renders the icons as SVG. An icon is 2 kB on median, and your bundle includes only the icons you import.
|
|
24
|
+
- **Styled like text.** Icons follow `currentColor`, so `className="text-blue-600"`, Tailwind and plain CSS just work.
|
|
25
|
+
- **Accessible and calm.** Decorative by default, labelled when you pass `aria-label`, played by keyboard focus too, and still when the user prefers reduced motion.
|
|
26
|
+
- **Ready for modern React.** React 18 and 19, StrictMode, Next.js App Router and server rendering, no `dynamic(..., { ssr: false })` needed.
|
|
27
|
+
- **Typed and searchable.** Full TypeScript types; hover an icon import in your editor to see its title, keywords, interaction and preview.
|
|
28
|
+
- **shadcn/ui registry.** Add any icon to your project as a ready-made component with one command.
|
|
29
|
+
- **Bring your own Lottie.** Your own animations play through the same player and props.
|
|
20
30
|
|
|
21
|
-
|
|
31
|
+
## Quick start
|
|
22
32
|
|
|
23
|
-
```
|
|
33
|
+
```bash
|
|
34
|
+
npm install react-useanimations
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
24
38
|
import UseAnimations from 'react-useanimations';
|
|
25
|
-
// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
|
|
26
39
|
import github from 'react-useanimations/lib/github';
|
|
27
40
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
41
|
+
export default function App() {
|
|
42
|
+
return <UseAnimations animation={github} size={32} />;
|
|
43
|
+
}
|
|
31
44
|
```
|
|
32
45
|
|
|
46
|
+
Point at the icon: it loops while hovered, exactly like on [useanimations.com](https://useanimations.com). Every icon is its own module, so only what you import ends up in your bundle.
|
|
47
|
+
|
|
33
48
|
Several icons can also be imported from one place; production builds still include only the icons you use:
|
|
34
49
|
|
|
35
50
|
```javascript
|
|
@@ -38,15 +53,46 @@ import { github, heart, menu } from 'react-useanimations/icons';
|
|
|
38
53
|
|
|
39
54
|
Prefer `react-useanimations/lib/<name>` when your dev server or test runner doesn't tree-shake, since `react-useanimations/icons` loads every icon there.
|
|
40
55
|
|
|
41
|
-
The component is also available as the named exports `UseAnimations` and `UseAnimation` (the name used by the [shadcn registry](https://
|
|
56
|
+
The component is also available as the named exports `UseAnimations` and `UseAnimation` (the name used by the [shadcn registry](https://useanimations.com/documentation#shadcn)).
|
|
42
57
|
|
|
43
|
-
|
|
58
|
+
### shadcn/ui
|
|
44
59
|
|
|
45
|
-
|
|
46
|
-
|
|
60
|
+
Every icon is also in a [shadcn registry](https://useanimations.com/r/registry.json). The CLI adds a ready-made component and installs `react-useanimations`:
|
|
61
|
+
|
|
62
|
+
```bash
|
|
63
|
+
npx shadcn@latest add https://useanimations.com/r/checkmark.json
|
|
47
64
|
```
|
|
48
65
|
|
|
49
|
-
|
|
66
|
+
```tsx
|
|
67
|
+
import { AnimatedCheckmark } from '@/components/animations/checkmark';
|
|
68
|
+
|
|
69
|
+
<AnimatedCheckmark size={24} />;
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Interactions
|
|
73
|
+
|
|
74
|
+
Each icon comes with the interaction it has on [useanimations.com](https://useanimations.com). Pass `interaction` to pick another one.
|
|
75
|
+
|
|
76
|
+
| Interaction | What it does | For example |
|
|
77
|
+
| :------------- | :----------------------------------------------- | :-------------------- |
|
|
78
|
+
| `hover-replay` | plays once on hover | `arrowRight`, `zap` |
|
|
79
|
+
| `click-replay` | replays on every click | `download`, `send` |
|
|
80
|
+
| `click-toggle` | toggles between two states on click | `menu`, `heart` |
|
|
81
|
+
| `loop` | plays continuously | `loading`, `activity` |
|
|
82
|
+
| `hover` | plays forward on hover, backward on leave | `trash`, `settings` |
|
|
83
|
+
| `hover-loop` | loops while hovered, finishes the cycle on leave | `github`, `twitter` |
|
|
84
|
+
|
|
85
|
+
```jsx
|
|
86
|
+
<UseAnimations animation={download} interaction="hover" />
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Hover animations also play on keyboard focus (when the icon or its wrapper is focusable) and ignore taps on touch screens. Looping icons pause while they are scrolled out of view.
|
|
90
|
+
|
|
91
|
+
## Props
|
|
92
|
+
|
|
93
|
+
```jsx
|
|
94
|
+
<UseAnimations animation={github} size={56} strokeColor="#2563eb" style={{ padding: 100 }} />
|
|
95
|
+
```
|
|
50
96
|
|
|
51
97
|
| Prop | Default | Definition |
|
|
52
98
|
| :---------- | :--------------: | :---------------------------------------------------------------------------------------------------------------- |
|
|
@@ -54,33 +100,22 @@ These props are available:
|
|
|
54
100
|
| size | `24` | width and height; numbers are pixels, strings are any CSS length (e.g. `'1.5em'`) |
|
|
55
101
|
| strokeColor | `'currentColor'` | color of the icon's strokes; by default the icon follows the text color |
|
|
56
102
|
| fillColor | `strokeColor` | color of the icon's filled parts (e.g. a liked heart) |
|
|
57
|
-
| interaction |
|
|
103
|
+
| interaction | per icon | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` or `'hover-replay'` |
|
|
58
104
|
| active | / | for `click-toggle` icons: `true` shows the end state; controlled, so set it in `onClick` (clicks don't toggle it) |
|
|
59
|
-
| autoplay |
|
|
60
|
-
| loop |
|
|
105
|
+
| autoplay | per icon | `true` for `loop` icons, unless reduced motion is preferred |
|
|
106
|
+
| loop | per icon | `true` for `loop` and `hover-loop` icons |
|
|
61
107
|
| speed | `1` | playback speed (1 is normal speed) |
|
|
62
|
-
| render | / | render prop for a custom wrapper, see
|
|
63
|
-
|
|
64
|
-
\* Each icon has a default interaction matching [useanimations.com](https://useanimations.com):
|
|
65
|
-
|
|
66
|
-
- `loop`: plays continuously (loaders, alerts).
|
|
67
|
-
- `click-toggle`: toggles between two states on click (menu, checkbox, play/pause).
|
|
68
|
-
- `click-replay`: replays from the start on every click.
|
|
69
|
-
- `hover`: plays forward on mouse enter and backward on mouse leave.
|
|
70
|
-
- `hover-loop`: loops while hovered and finishes the current cycle on mouse leave (social icons).
|
|
71
|
-
- `hover-replay`: plays once from the start on mouse enter.
|
|
72
|
-
|
|
73
|
-
Hover animations also play on keyboard focus (when the icon or its wrapper is focusable) and ignore taps on touch screens. Looping icons pause while they are scrolled out of view.
|
|
74
|
-
|
|
75
|
-
When the user prefers reduced motion (`prefers-reduced-motion: reduce`), icons stay still: looping icons show their first frame, hover and replay animations don't play, and toggles switch to their new state immediately. Pass `autoplay` to play a loader anyway.
|
|
108
|
+
| render | / | render prop for a custom wrapper, see [A real button](#a-real-button) |
|
|
76
109
|
|
|
77
110
|
Any other prop (`className`, `aria-label`, `onClick`, `onMouseEnter`, …) is passed to the wrapper `<span>`. Your event handlers run before the animation's; call `event.preventDefault()` to skip the animation.
|
|
78
111
|
|
|
79
|
-
|
|
112
|
+
## Recipes
|
|
113
|
+
|
|
114
|
+
### Colors and stroke width
|
|
80
115
|
|
|
81
116
|
Icons follow the text color by default, so `className="text-blue-600"` or `style={{ color: 'red' }}` recolors them. The built-in rule has zero specificity, so your own CSS always wins:
|
|
82
117
|
|
|
83
|
-
```
|
|
118
|
+
```jsx
|
|
84
119
|
// Tailwind
|
|
85
120
|
<UseAnimations animation={github} className="text-blue-600 [&_path]:stroke-[3]" />
|
|
86
121
|
```
|
|
@@ -94,13 +129,9 @@ Icons follow the text color by default, so `className="text-blue-600"` or `style
|
|
|
94
129
|
|
|
95
130
|
Some icons cut a gap into themselves (the slash in `visibility`, `microphone`, `video`, `volume` and `notification`, the check in `download`, the ring around `notification3`'s badge). The gap takes the page background: white on light pages and dark on pages with `color-scheme: dark`. On other backgrounds, set it with the `--ua-knockout` CSS variable, e.g. `body { --ua-knockout: #0f172a; }`.
|
|
96
131
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
Icons are decorative by default (`aria-hidden`). Pass `aria-label` to have the icon announced as an image. For clickable icons, put the interactive element around the icon with the `render` prop (see below) so it is focusable and works with the keyboard.
|
|
132
|
+
### Controlled toggle
|
|
100
133
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
```javascript
|
|
134
|
+
```jsx
|
|
104
135
|
import { useState } from 'react';
|
|
105
136
|
import UseAnimations from 'react-useanimations';
|
|
106
137
|
import menu from 'react-useanimations/lib/menu';
|
|
@@ -119,25 +150,11 @@ export const MenuButton = () => {
|
|
|
119
150
|
};
|
|
120
151
|
```
|
|
121
152
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
```javascript
|
|
125
|
-
<UseAnimations animation={download} interaction="hover" />
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
#### Your own Lottie animation
|
|
129
|
-
|
|
130
|
-
```javascript
|
|
131
|
-
import animationData from './my-animation.json';
|
|
132
|
-
|
|
133
|
-
<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
The player supports what icon animations use: shape layers, precompositions, null layers and parenting, paths, rectangles, ellipses, strokes, fills, trim paths, masks, keyframes with easing, holds and motion paths, and the `loopOut()` and `wiggle()` expressions. Gradients, solid, text and image layers, effects, mattes and other expressions are not rendered; the console warns about them once per animation. If the player can't draw an animation, that animation stops and the error is logged once; other icons keep playing.
|
|
153
|
+
### A real button
|
|
137
154
|
|
|
138
|
-
|
|
155
|
+
For clickable icons, put an interactive element around the icon with the `render` prop, so it is focusable and works with the keyboard:
|
|
139
156
|
|
|
140
|
-
```
|
|
157
|
+
```jsx
|
|
141
158
|
import heart from 'react-useanimations/lib/heart';
|
|
142
159
|
|
|
143
160
|
export const LikeButton = () => (
|
|
@@ -154,24 +171,47 @@ export const LikeButton = () => (
|
|
|
154
171
|
);
|
|
155
172
|
```
|
|
156
173
|
|
|
157
|
-
`eventProps` holds the `onClick`, `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onFocus` and `onBlur` handlers for your interactive element
|
|
174
|
+
`eventProps` holds the `onClick`, `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onFocus` and `onBlur` handlers for your interactive element and `animationProps` holds the animation itself, which you spread on a `<span>` inside it.
|
|
158
175
|
|
|
159
|
-
|
|
176
|
+
### Your own Lottie animation
|
|
177
|
+
|
|
178
|
+
```jsx
|
|
179
|
+
import animationData from './my-animation.json';
|
|
180
|
+
|
|
181
|
+
<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
The player supports what icon animations use: shape layers, precompositions, null layers and parenting, paths, rectangles, ellipses, strokes, fills, trim paths, masks, keyframes with easing, holds and motion paths, and the `loopOut()` and `wiggle()` expressions. Gradients, solid, text and image layers, effects, mattes and other expressions are not rendered; the console warns about them once per animation. If the player can't draw an animation, that animation stops and the error is logged once; other icons keep playing.
|
|
185
|
+
|
|
186
|
+
### Next.js and other SSR frameworks
|
|
160
187
|
|
|
161
188
|
The component is marked `'use client'` and renders the animation only in the browser, so it can be rendered from server components without `dynamic(..., { ssr: false })`. Functions such as `onClick` or `render` can't be passed from a server component: render the icon inside a client component for those. Icons inside a shadow root are styled there too.
|
|
162
189
|
|
|
163
|
-
|
|
190
|
+
## Accessibility and motion
|
|
191
|
+
|
|
192
|
+
- Icons are decorative by default (`aria-hidden`). Pass `aria-label` to have the icon announced as an image.
|
|
193
|
+
- For icon-only controls, use a real `<button>` with an `aria-label` (see [A real button](#a-real-button)) and reflect toggle state with `aria-pressed` or `aria-expanded`.
|
|
194
|
+
- When the user prefers reduced motion (`prefers-reduced-motion: reduce`), icons stay still: looping icons show their first frame, hover and replay animations don't play, and toggles switch to their new state immediately. Pass `autoplay` to play a loader anyway.
|
|
195
|
+
|
|
196
|
+
## Available animations
|
|
197
|
+
|
|
198
|
+
[Browse and search all 300 icons](https://useanimations.com/#icons) on the website, or expand the full list:
|
|
199
|
+
|
|
200
|
+
<details>
|
|
201
|
+
<summary><b>All icon names</b></summary>
|
|
164
202
|
|
|
165
203
|
<!-- icons:start -->
|
|
166
204
|
|
|
167
205
|
`activity`, `airplay`, `alertCircle`, `alertOctagon`, `alertTriangle`, `alignCenter`, `alignJustify`, `alignLeft`, `alignRight`, `anchor`, `aperture`, `archive`, `arrowDown`, `arrowDownCircle`, `arrowDownLeft`, `arrowDownRight`, `arrowLeft`, `arrowLeftCircle`, `arrowRight`, `arrowRightCircle`, `arrowUp`, `arrowUpCircle`, `arrowUpLeft`, `arrowUpRight`, `atSign`, `award`, `barChart`, `barChart2`, `battery`, `batteryCharging`, `behance`, `bluetooth`, `bold`, `book`, `bookmark`, `bookOpen`, `box`, `briefcase`, `calendar`, `camera`, `cameraOff`, `cast`, `check`, `checkBox`, `checkCircle`, `checkmark`, `chevronDown`, `chevronLeft`, `chevronRight`, `chevronsDown`, `chevronsLeft`, `chevronsRight`, `chevronsUp`, `chevronUp`, `chrome`, `circle`, `clipboard`, `clock`, `cloud`, `cloudDrizzle`, `cloudLightning`, `cloudOff`, `cloudRain`, `cloudSnow`, `code`, `codepen`, `codesandbox`, `coffee`, `columns`, `command`, `copy`, `cornerDownLeft`, `cornerDownRight`, `cornerLeftDown`, `cornerLeftUp`, `cornerRightDown`, `cornerRightUp`, `cornerUpLeft`, `cornerUpRight`, `cpu`, `creditCard`, `crop`, `crosshair`, `database`, `delete`, `disc`, `discord`, `divide`, `divideCircle`, `divideSquare`, `dollarSign`, `download`, `download2`, `downloadCloud`, `dribbble`, `droplet`, `edit`, `edit2`, `edit3`, `error`, `explore`, `externalLink`, `facebook`, `fastForward`, `figma`, `file`, `fileMinus`, `filePlus`, `fileText`, `film`, `filter`, `flag`, `folder`, `folderMinus`, `folderPlus`, `framer`, `frown`, `gift`, `gitBranch`, `gitCommit`, `github`, `gitlab`, `gitMerge`, `gitPullRequest`, `globe`, `grid`, `hardDrive`, `hash`, `headphones`, `heart`, `heart2`, `help`, `hexagon`, `home`, `image`, `inbox`, `infinity`, `info`, `instagram`, `italic`, `key`, `layers`, `layout`, `lifeBuoy`, `link`, `link2`, `linkedin`, `list`, `loading`, `loading2`, `loading3`, `loading4`, `lock`, `logIn`, `logOut`, `mail`, `map`, `mapPin`, `maximize2`, `maximizeMinimize`, `maximizeMinimize2`, `meh`, `menu`, `menu2`, `menu3`, `menu4`, `messageCircle`, `messageSquare`, `micOff`, `microphone`, `microphone2`, `minimize2`, `minus`, `minusCircle`, `minusSquare`, `monitor`, `moon`, `moreHorizontal`, `moreVertical`, `mousePointer`, `move`, `music`, `navigation`, `navigation2`, `notification`, `notification2`, `notification3`, `notification4`, `octagon`, `package`, `paperclip`, `penTool`, `percent`, `phone`, `phoneCall`, `phoneForwarded`, `phoneIncoming`, `phoneMissed`, `phoneOff`, `phoneOutgoing`, `pieChart`, `playPause`, `playPauseCircle`, `plusCircle`, `plusSquare`, `plusToX`, `pocket`, `power`, `printer`, `radio`, `radioButton`, `refresh`, `refresh2`, `refreshCcw`, `repeat`, `rewind`, `rotateCcw`, `rotateCw`, `rss`, `save`, `scissors`, `scrollDown`, `searchToX`, `send`, `server`, `settings`, `settings2`, `share`, `shield`, `shieldOff`, `shoppingBag`, `shoppingCart`, `shuffle`, `sidebar`, `skipBack`, `skipForward`, `slack`, `slash`, `smartphone`, `smile`, `speaker`, `square`, `star`, `stopCircle`, `sun`, `sunrise`, `sunset`, `table`, `tablet`, `tag`, `target`, `telegram`, `terminal`, `thermometer`, `thumbsDown`, `thumbUp`, `toggle`, `tool`, `trash`, `trash2`, `trello`, `trendingDown`, `trendingUp`, `triangle`, `truck`, `tv`, `twitch`, `twitter`, `twitterX`, `type`, `umbrella`, `underline`, `upload`, `uploadCloud`, `user`, `userCheck`, `userMinus`, `userPlus`, `users`, `userX`, `video`, `video2`, `videoOff`, `visibility`, `visibility2`, `visibility3`, `voicemail`, `volume`, `watch`, `wifi`, `wifiOff`, `wind`, `xOctagon`, `xSquare`, `youtube`, `youtube2`, `zap`, `zapOff`, `zoomIn`, `zoomOut`
|
|
168
206
|
<!-- icons:end -->
|
|
169
207
|
|
|
208
|
+
</details>
|
|
209
|
+
|
|
170
210
|
Import each one from `react-useanimations/lib/<name>` or `react-useanimations/icons`. `delete` and `package` are reserved words in JavaScript: import them under another name, e.g. `import deleteIcon from 'react-useanimations/lib/delete';`, or as `deleteIcon` and `packageIcon` from `react-useanimations/icons`.
|
|
171
211
|
|
|
172
|
-
To find an icon by what it shows, search `react-useanimations/catalog.json`: every icon has its title, category, keywords (e.g. `visibility` matches `eye`, `notification` matches `bell`), default interaction, import line and a preview image (except `calendar`, `loading`, `loading2`, `loading3`, `zoomIn` and `zoomOut`, which have no static SVG).
|
|
212
|
+
To find an icon by what it shows, search `react-useanimations/catalog.json`: every icon has its title, category, keywords (e.g. `visibility` matches `eye`, `notification` matches `bell`), default interaction, import line and a preview image (except `calendar`, `loading`, `loading2`, `loading3`, `zoomIn` and `zoomOut`, which have no static SVG).
|
|
173
213
|
|
|
174
|
-
|
|
214
|
+
### The icon set outside React
|
|
175
215
|
|
|
176
216
|
The package contains the whole icon set, and [useanimations.com](https://useanimations.com) is built from it:
|
|
177
217
|
|
|
@@ -190,9 +230,12 @@ for (const icon of catalog) {
|
|
|
190
230
|
}
|
|
191
231
|
```
|
|
192
232
|
|
|
193
|
-
|
|
233
|
+
## Upgrading from v2
|
|
194
234
|
|
|
195
|
-
Imports and the component stay the same, and all 79 v2 icons are still there. The full guide, with before/after code, is at [
|
|
235
|
+
Imports and the component stay the same, and all 79 v2 icons are still there. The full guide, with before/after code, is at [useanimations.com/documentation#upgrading-from-v2](https://useanimations.com/documentation#upgrading-from-v2).
|
|
236
|
+
|
|
237
|
+
<details>
|
|
238
|
+
<summary><b>What changed in v3</b></summary>
|
|
196
239
|
|
|
197
240
|
- Requires React 18 or newer; lottie-web is no longer a dependency, so remove it unless something else uses it.
|
|
198
241
|
- `reverse` is now `active`, fully controlled: update it in `onClick`, a click alone doesn't toggle the icon (`reverse` still works as in v2 but is deprecated).
|
|
@@ -204,11 +247,13 @@ Imports and the component stay the same, and all 79 v2 icons are still there. Th
|
|
|
204
247
|
- Types come from `react-useanimations` (`Animation`, `AnimationKey`, `Interaction`, `UseAnimationsProps`); the `react-useanimations/utils` paths were removed.
|
|
205
248
|
- New: 221 more icons (300 in total), `react-useanimations/icons`, reduced-motion support and server rendering without workarounds.
|
|
206
249
|
|
|
207
|
-
|
|
250
|
+
</details>
|
|
251
|
+
|
|
252
|
+
## Development
|
|
208
253
|
|
|
209
254
|
The tooling is [Vite+](https://viteplus.dev) (Vitest, Oxlint, Oxfmt and tsdown), configured in `vite.config.ts`.
|
|
210
255
|
|
|
211
|
-
```
|
|
256
|
+
```bash
|
|
212
257
|
npm install
|
|
213
258
|
npx playwright install chromium firefox webkit # once, for the browser tests
|
|
214
259
|
npm run check # formatting, lint and type checks (vp check)
|
|
@@ -217,10 +262,18 @@ npm test # tests in Chromium, Firefox and WebKit, plus server renderi
|
|
|
217
262
|
npm run build # builds dist/: the component (vp pack) and the icon modules
|
|
218
263
|
npm run verify # check, tests, build and package check
|
|
219
264
|
npm run icons # validates icons/ and updates the files generated from it
|
|
265
|
+
npm run website:dev # useanimations.com, built from the same icons and component
|
|
220
266
|
```
|
|
221
267
|
|
|
222
268
|
The icon set lives in `icons/`: one Lottie file per icon (`icons/<name>.json`), the static SVGs (`icons/svg.json`) and the metadata (`icons/catalog.json`). To add an icon, add its Lottie file, its catalog entry and its SVGs, then run `npm run icons`.
|
|
223
269
|
|
|
224
|
-
|
|
270
|
+
## License
|
|
225
271
|
|
|
226
272
|
[MIT](LICENSE). The code and the animations are free for personal and commercial use. Attribution is not required but appreciated, e.g. "Animated icons by [useAnimations](https://useanimations.com)".
|
|
273
|
+
|
|
274
|
+
<div align="center">
|
|
275
|
+
<br />
|
|
276
|
+
|
|
277
|
+
**[useanimations.com](https://useanimations.com)** · [X](https://twitter.com/useAnimations/) · [Instagram](https://www.instagram.com/getuseanimations/) · [Facebook](https://www.facebook.com/useanimations/)
|
|
278
|
+
|
|
279
|
+
</div>
|
package/lib/discord.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default={animationData:{nm:"discord",v:"5.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default={animationData:{nm:"discord",v:"5.5.2",fr:30,ip:0,op:48,w:32,h:32,ddd:0,assets:[],layers:[{ddd:0,ind:1,ty:4,sr:1,ks:{o:{a:0,k:100},r:{a:0,k:0},p:{a:1,k:[{t:0,s:[16,24,0],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:6,s:[16,24.5,0],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:14,s:[16,21,0],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[1,1,1],y:[1,1,1]}},{t:21,s:[16,24,0],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:29,s:[16,24,0]}]},a:{a:0,k:[12,20,0]},s:{a:1,k:[{t:0,s:[100,100,100],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:6,s:[103,95,100],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:10,s:[98,103,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:21,s:[98,103,100],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:23,s:[104,94,100],o:{x:[.34,.34,.34],y:[1.56,1.56,1.56]},i:{x:[.64,.64,.64],y:[1,1,1]}},{t:27,s:[100,100,100]}]}},ao:0,shapes:[{ty:"gr",it:[{ty:"sh",ks:{a:0,k:{c:false,v:[[15.5,17],[17.5,20],[21,17],[19.5,5.5],[15,4],[14.028,5.923],[9.975,5.923],[9,4],[4.5,5.5],[3,17],[6.5,20],[8.5,17]],i:[[0,0],[-.5,0],[-.667,1.333],[2,5.667],[1.5,.16],[0,0],[1.341,-.232],[0,0],[1.457,-1.015],[-.667,-1.667],[-1.5,0],[0,1]],o:[[0,1],[1.5,0],[.667,-1.667],[-1.457,-1.015],[0,0],[-1.341,-.232],[0,0],[-1.5,.16],[-2,5.667],[.667,1.333],[.5,0],[0,0]]}}},{ty:"sh",ks:{a:0,k:{c:false,v:[[7,16.5],[17,16.5]],i:[[0,0],[-3.5,1]],o:[[3.5,1],[0,0]]}}},{ty:"st",c:{a:0,k:[0,0,0,1]},o:{a:0,k:100},w:{a:0,k:2},lc:2,lj:2},{ty:"tr",p:{a:0,k:[0,0]},a:{a:0,k:[0,0]},s:{a:0,k:[100,100]},r:{a:0,k:0},o:{a:0,k:100},sk:{a:0,k:0},sa:{a:0,k:0}}]}],ip:0,op:48,st:0,bm:0},{ddd:0,ind:2,ty:4,sr:1,ks:{o:{a:0,k:100},r:{a:0,k:0},p:{a:0,k:[12,12,0]},a:{a:0,k:[12,12,0]},s:{a:1,k:[{t:0,s:[100,100,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:32,s:[100,100,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:35,s:[100,15,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:38,s:[100,100,100]}]}},ao:0,shapes:[{ty:"gr",it:[{ty:"sh",ks:{a:0,k:{c:true,v:[[9,11],[10,12],[9,13],[8,12]],i:[[-.552,0],[0,-.552],[.552,0],[0,.552]],o:[[.552,0],[0,.552],[-.552,0],[0,-.552]]}}},{ty:"st",c:{a:0,k:[0,0,0,1]},o:{a:0,k:100},w:{a:0,k:2},lc:2,lj:2},{ty:"tr",p:{a:0,k:[0,0]},a:{a:0,k:[0,0]},s:{a:0,k:[100,100]},r:{a:0,k:0},o:{a:0,k:100},sk:{a:0,k:0},sa:{a:0,k:0}}]}],ip:0,op:48,st:0,bm:0,parent:1},{ddd:0,ind:3,ty:4,sr:1,ks:{o:{a:0,k:100},r:{a:0,k:0},p:{a:0,k:[12,12,0]},a:{a:0,k:[12,12,0]},s:{a:1,k:[{t:0,s:[100,100,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:32,s:[100,100,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:35,s:[100,15,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:38,s:[100,100,100]}]}},ao:0,shapes:[{ty:"gr",it:[{ty:"sh",ks:{a:0,k:{c:true,v:[[15,11],[16,12],[15,13],[14,12]],i:[[-.552,0],[0,-.552],[.552,0],[0,.552]],o:[[.552,0],[0,.552],[-.552,0],[0,-.552]]}}},{ty:"st",c:{a:0,k:[0,0,0,1]},o:{a:0,k:100},w:{a:0,k:2},lc:2,lj:2},{ty:"tr",p:{a:0,k:[0,0]},a:{a:0,k:[0,0]},s:{a:0,k:[100,100]},r:{a:0,k:0},o:{a:0,k:100},sk:{a:0,k:0},sa:{a:0,k:0}}]}],ip:0,op:48,st:0,bm:0,parent:1}]},interaction:"hover-loop"};
|
package/lib/discord.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default {animationData:{nm:"discord",v:"5.
|
|
1
|
+
export default {animationData:{nm:"discord",v:"5.5.2",fr:30,ip:0,op:48,w:32,h:32,ddd:0,assets:[],layers:[{ddd:0,ind:1,ty:4,sr:1,ks:{o:{a:0,k:100},r:{a:0,k:0},p:{a:1,k:[{t:0,s:[16,24,0],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:6,s:[16,24.5,0],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:14,s:[16,21,0],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[1,1,1],y:[1,1,1]}},{t:21,s:[16,24,0],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:29,s:[16,24,0]}]},a:{a:0,k:[12,20,0]},s:{a:1,k:[{t:0,s:[100,100,100],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:6,s:[103,95,100],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:10,s:[98,103,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:21,s:[98,103,100],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:23,s:[104,94,100],o:{x:[.34,.34,.34],y:[1.56,1.56,1.56]},i:{x:[.64,.64,.64],y:[1,1,1]}},{t:27,s:[100,100,100]}]}},ao:0,shapes:[{ty:"gr",it:[{ty:"sh",ks:{a:0,k:{c:false,v:[[15.5,17],[17.5,20],[21,17],[19.5,5.5],[15,4],[14.028,5.923],[9.975,5.923],[9,4],[4.5,5.5],[3,17],[6.5,20],[8.5,17]],i:[[0,0],[-.5,0],[-.667,1.333],[2,5.667],[1.5,.16],[0,0],[1.341,-.232],[0,0],[1.457,-1.015],[-.667,-1.667],[-1.5,0],[0,1]],o:[[0,1],[1.5,0],[.667,-1.667],[-1.457,-1.015],[0,0],[-1.341,-.232],[0,0],[-1.5,.16],[-2,5.667],[.667,1.333],[.5,0],[0,0]]}}},{ty:"sh",ks:{a:0,k:{c:false,v:[[7,16.5],[17,16.5]],i:[[0,0],[-3.5,1]],o:[[3.5,1],[0,0]]}}},{ty:"st",c:{a:0,k:[0,0,0,1]},o:{a:0,k:100},w:{a:0,k:2},lc:2,lj:2},{ty:"tr",p:{a:0,k:[0,0]},a:{a:0,k:[0,0]},s:{a:0,k:[100,100]},r:{a:0,k:0},o:{a:0,k:100},sk:{a:0,k:0},sa:{a:0,k:0}}]}],ip:0,op:48,st:0,bm:0},{ddd:0,ind:2,ty:4,sr:1,ks:{o:{a:0,k:100},r:{a:0,k:0},p:{a:0,k:[12,12,0]},a:{a:0,k:[12,12,0]},s:{a:1,k:[{t:0,s:[100,100,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:32,s:[100,100,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:35,s:[100,15,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:38,s:[100,100,100]}]}},ao:0,shapes:[{ty:"gr",it:[{ty:"sh",ks:{a:0,k:{c:true,v:[[9,11],[10,12],[9,13],[8,12]],i:[[-.552,0],[0,-.552],[.552,0],[0,.552]],o:[[.552,0],[0,.552],[-.552,0],[0,-.552]]}}},{ty:"st",c:{a:0,k:[0,0,0,1]},o:{a:0,k:100},w:{a:0,k:2},lc:2,lj:2},{ty:"tr",p:{a:0,k:[0,0]},a:{a:0,k:[0,0]},s:{a:0,k:[100,100]},r:{a:0,k:0},o:{a:0,k:100},sk:{a:0,k:0},sa:{a:0,k:0}}]}],ip:0,op:48,st:0,bm:0,parent:1},{ddd:0,ind:3,ty:4,sr:1,ks:{o:{a:0,k:100},r:{a:0,k:0},p:{a:0,k:[12,12,0]},a:{a:0,k:[12,12,0]},s:{a:1,k:[{t:0,s:[100,100,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:32,s:[100,100,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:35,s:[100,15,100],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:38,s:[100,100,100]}]}},ao:0,shapes:[{ty:"gr",it:[{ty:"sh",ks:{a:0,k:{c:true,v:[[15,11],[16,12],[15,13],[14,12]],i:[[-.552,0],[0,-.552],[.552,0],[0,.552]],o:[[.552,0],[0,.552],[-.552,0],[0,-.552]]}}},{ty:"st",c:{a:0,k:[0,0,0,1]},o:{a:0,k:100},w:{a:0,k:2},lc:2,lj:2},{ty:"tr",p:{a:0,k:[0,0]},a:{a:0,k:[0,0]},s:{a:0,k:[100,100]},r:{a:0,k:0},o:{a:0,k:100},sk:{a:0,k:0},sa:{a:0,k:0}}]}],ip:0,op:48,st:0,bm:0,parent:1}]},interaction:"hover-loop"};
|
package/lib/telegram.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default={animationData:{nm:"telegram",v:"5.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default={animationData:{nm:"telegram",v:"5.5.2",fr:30,ip:0,op:40,w:32,h:32,ddd:0,assets:[],layers:[{ddd:0,ind:1,ty:4,sr:1,ks:{o:{a:0,k:100},r:{a:0,k:0},p:{a:1,k:[{t:0,s:[16,16,0],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:5,s:[13.76,18.24,0],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[1,1,1],y:[1,1,1]}},{t:13,s:[44,-12,0],h:1},{t:14,s:[-12,44,0],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:25,s:[17.4,14.6,0],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:30,s:[16,16,0]}]},a:{a:0,k:[12,12,0]},s:{a:0,k:[100,100,100]}},ao:0,shapes:[{ty:"gr",it:[{ty:"sh",ks:{a:0,k:{c:false,v:[[15,10],[11,14],[17,20],[21,4],[3,11],[7,13]],i:[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],o:[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]}}},{ty:"st",c:{a:0,k:[0,0,0,1]},o:{a:0,k:100},w:{a:0,k:2},lc:2,lj:2},{ty:"tr",p:{a:0,k:[0,0]},a:{a:0,k:[0,0]},s:{a:0,k:[100,100]},r:{a:0,k:0},o:{a:0,k:100},sk:{a:0,k:0},sa:{a:0,k:0}}]}],ip:0,op:40,st:0,bm:0}]},interaction:"hover-loop"};
|
package/lib/telegram.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export default {animationData:{nm:"telegram",v:"5.
|
|
1
|
+
export default {animationData:{nm:"telegram",v:"5.5.2",fr:30,ip:0,op:40,w:32,h:32,ddd:0,assets:[],layers:[{ddd:0,ind:1,ty:4,sr:1,ks:{o:{a:0,k:100},r:{a:0,k:0},p:{a:1,k:[{t:0,s:[16,16,0],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:5,s:[13.76,18.24,0],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[1,1,1],y:[1,1,1]}},{t:13,s:[44,-12,0],h:1},{t:14,s:[-12,44,0],o:{x:[0,0,0],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:25,s:[17.4,14.6,0],o:{x:[.42,.42,.42],y:[0,0,0]},i:{x:[.58,.58,.58],y:[1,1,1]}},{t:30,s:[16,16,0]}]},a:{a:0,k:[12,12,0]},s:{a:0,k:[100,100,100]}},ao:0,shapes:[{ty:"gr",it:[{ty:"sh",ks:{a:0,k:{c:false,v:[[15,10],[11,14],[17,20],[21,4],[3,11],[7,13]],i:[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],o:[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]]}}},{ty:"st",c:{a:0,k:[0,0,0,1]},o:{a:0,k:100},w:{a:0,k:2},lc:2,lj:2},{ty:"tr",p:{a:0,k:[0,0]},a:{a:0,k:[0,0]},s:{a:0,k:[100,100]},r:{a:0,k:0},o:{a:0,k:100},sk:{a:0,k:0},sa:{a:0,k:0}}]}],ip:0,op:40,st:0,bm:0}]},interaction:"hover-loop"};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-useanimations",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.1",
|
|
4
4
|
"description": "Official React component for useAnimations animated Lottie icons",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"svg",
|
|
12
12
|
"useanimations"
|
|
13
13
|
],
|
|
14
|
-
"homepage": "https://
|
|
14
|
+
"homepage": "https://useanimations.com",
|
|
15
15
|
"bugs": {
|
|
16
16
|
"url": "https://github.com/useAnimations/react-useanimations/issues"
|
|
17
17
|
},
|
package/svg.json
CHANGED
|
@@ -257,7 +257,7 @@
|
|
|
257
257
|
"disc": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32\" height=\"32\" preserveAspectRatio=\"xMidYMid meet\" style=\"width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);\"><defs><clipPath id=\"__lottie_element_541\"><rect width=\"32\" height=\"32\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_541)\"><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M12,2 C17.523000717163086,2 22,6.4770002365112305 22,12 C22,17.523000717163086 17.523000717163086,22 12,22 C6.4770002365112305,22 2,17.523000717163086 2,12 C2,6.4770002365112305 6.4770002365112305,2 12,2z\"></path></g></g><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M12,9 C13.656999588012695,9 15,10.343000411987305 15,12 C15,13.656999588012695 13.656999588012695,15 12,15 C10.343000411987305,15 9,13.656999588012695 9,12 C9,10.343000411987305 10.343000411987305,9 12,9z\"></path></g></g></g></svg>"
|
|
258
258
|
},
|
|
259
259
|
"discord": {
|
|
260
|
-
"discord": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"
|
|
260
|
+
"discord": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3\"></path><path d=\"M7 16.5c3.5 1 6.5 1 10 0\"></path><circle cx=\"9\" cy=\"12\" r=\"1\"></circle><circle cx=\"15\" cy=\"12\" r=\"1\"></circle></svg>"
|
|
261
261
|
},
|
|
262
262
|
"divide": {
|
|
263
263
|
"divide": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32\" height=\"32\" preserveAspectRatio=\"xMidYMid meet\" style=\"width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);\"><defs><clipPath id=\"__lottie_element_577\"><rect width=\"32\" height=\"32\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_577)\"><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M12,16 C13.104999542236328,16 14,16.895000457763672 14,18 C14,19.104999542236328 13.104999542236328,20 12,20 C10.895000457763672,20 10,19.104999542236328 10,18 C10,16.895000457763672 10.895000457763672,16 12,16z\"></path></g></g><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M5,12 C5,12 19,12 19,12\"></path></g></g><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M12,4 C13.104999542236328,4 14,4.894999980926514 14,6 C14,7.105000019073486 13.104999542236328,8 12,8 C10.895000457763672,8 10,7.105000019073486 10,6 C10,4.894999980926514 10.895000457763672,4 12,4z\"></path></g></g></g></svg>"
|
|
@@ -757,7 +757,7 @@
|
|
|
757
757
|
"target": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32\" height=\"32\" preserveAspectRatio=\"xMidYMid meet\" style=\"width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);\"><defs><clipPath id=\"__lottie_element_1478\"><rect width=\"32\" height=\"32\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_1478)\"><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M12,2 C17.523000717163086,2 22,6.4770002365112305 22,12 C22,17.523000717163086 17.523000717163086,22 12,22 C6.4770002365112305,22 2,17.523000717163086 2,12 C2,6.4770002365112305 6.4770002365112305,2 12,2z\"></path></g></g><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M12,6 C15.314000129699707,6 18,8.685999870300293 18,12 C18,15.314000129699707 15.314000129699707,18 12,18 C8.685999870300293,18 6,15.314000129699707 6,12 C6,8.685999870300293 8.685999870300293,6 12,6z\"></path></g></g><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M12,10 C13.104999542236328,10 14,10.895000457763672 14,12 C14,13.104999542236328 13.104999542236328,14 12,14 C10.895000457763672,14 10,13.104999542236328 10,12 C10,10.895000457763672 10.895000457763672,10 12,10z\"></path></g></g></g></svg>"
|
|
758
758
|
},
|
|
759
759
|
"telegram": {
|
|
760
|
-
"telegram": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><
|
|
760
|
+
"telegram": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 10l-4 4l6 6l4 -16l-18 7l4 2\"></path></svg>"
|
|
761
761
|
},
|
|
762
762
|
"terminal": {
|
|
763
763
|
"terminal": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" width=\"32\" height=\"32\" preserveAspectRatio=\"xMidYMid meet\" style=\"width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);\"><defs><clipPath id=\"__lottie_element_1489\"><rect width=\"32\" height=\"32\" x=\"0\" y=\"0\"></rect></clipPath></defs><g clip-path=\"url(#__lottie_element_1489)\"><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M12,19 C12,19 20,19 20,19\"></path></g></g><g transform=\"matrix(1,0,0,1,4,4)\" opacity=\"1\" style=\"display: block;\"><g opacity=\"1\" transform=\"matrix(1,0,0,1,0,0)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" fill-opacity=\"0\" stroke=\"rgb(0,0,0)\" stroke-opacity=\"1\" stroke-width=\"2\" d=\" M4,17 C4,17 10,11 10,11 C10,11 4,5 4,5\"></path></g></g></g></svg>"
|