react-useanimations 3.0.0 → 3.1.1

package/README.md

@@ -1,35 +1,50 @@
-## React UseAnimations Icons
+<div align="center">
 
-[![npm version](https://img.shields.io/npm/v/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations) [![npm downloads](https://img.shields.io/npm/dm/react-useanimations.svg?style=flat-square)](https://www.npmjs.com/package/react-useanimations)
+# react-useanimations
 
-#### What is react-useanimations?
+The official React component for [useAnimations](https://useanimations.com):<br />
+**300 free animated icons with hover, click and loop interactions built in.**
 
-React-useanimations is the official React component for [useAnimations](https://useanimations.com), a free library of 298 animated Lottie icons. It has no dependencies: a built-in player (8 kB gzipped) renders the icons as SVG.
+[![npm version](https://img.shields.io/npm/v/react-useanimations?style=flat-square&color=7c5cff)](https://www.npmjs.com/package/react-useanimations)
+[![npm downloads](https://img.shields.io/npm/dm/react-useanimations?style=flat-square&color=7c5cff)](https://www.npmjs.com/package/react-useanimations)
+[![dependencies](https://img.shields.io/badge/dependencies-0-7c5cff?style=flat-square)](https://www.npmjs.com/package/react-useanimations?activeTab=dependencies)
+[![types](https://img.shields.io/npm/types/react-useanimations?style=flat-square&color=7c5cff)](src/index.tsx)
+[![license](https://img.shields.io/npm/l/react-useanimations?style=flat-square&color=7c5cff)](LICENSE)
 
-📖 **Documentation:** [react.useanimations.com/documentation](https://react.useanimations.com/documentation): interactions, props, all import names, shadcn/ui and file downloads.
+[**Browse all icons →**](https://useanimations.com/#icons) &nbsp;·&nbsp; [Documentation](https://useanimations.com/documentation) &nbsp;·&nbsp; [shadcn/ui](https://useanimations.com/documentation#shadcn) &nbsp;·&nbsp; [Upgrading from v2](#upgrading-from-v2)
 
-![](useanimations-preview.gif)
+<a href="https://useanimations.com"><img src=".github/assets/preview.webp" alt="useAnimations: animated icons for React" width="100%" /></a>
 
-### Installation
+</div>
 
-```
-npm install react-useanimations
-```
+## Why useAnimations
 
-Requires React 18+ (tested with React 18 and 19). Works with StrictMode, Next.js (App Router) and other SSR frameworks.
+- **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.
+- **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.
+- **Styled like text.** Icons follow `currentColor`, so `className="text-blue-600"`, Tailwind and plain CSS just work.
+- **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.
+- **Ready for modern React.** React 18 and 19, StrictMode, Next.js App Router and server rendering, no `dynamic(..., { ssr: false })` needed.
+- **Typed and searchable.** Full TypeScript types; hover an icon import in your editor to see its title, keywords, interaction and preview.
+- **shadcn/ui registry.** Add any icon to your project as a ready-made component with one command.
+- **Bring your own Lottie.** Your own animations play through the same player and props.
 
-### Usage
+## Quick start
 
-```javascript
+```bash
+npm install react-useanimations
+```
+
+```jsx
 import UseAnimations from 'react-useanimations';
-// EVERY ANIMATION NEEDS TO BE IMPORTED FIRST -> YOUR BUNDLE WILL INCLUDE ONLY WHAT IT NEEDS
 import github from 'react-useanimations/lib/github';
 
-const App = () => <UseAnimations animation={github} />;
-
-export default App;
+export default function App() {
+  return <UseAnimations animation={github} size={32} />;
+}
 ```
 
+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.
+
 Several icons can also be imported from one place; production builds still include only the icons you use:
 
 ```javascript
@@ -38,15 +53,46 @@ import { github, heart, menu } from 'react-useanimations/icons';
 
 Prefer `react-useanimations/lib/<name>` when your dev server or test runner doesn't tree-shake, since `react-useanimations/icons` loads every icon there.
 
-The component is also available as the named exports `UseAnimations` and `UseAnimation` (the name used by the [shadcn registry](https://react.useanimations.com/documentation#shadcnui)).
+The component is also available as the named exports `UseAnimations` and `UseAnimation` (the name used by the [shadcn registry](https://useanimations.com/documentation#shadcn)).
 
-Icons can be configured with inline props:
+### shadcn/ui
 
-```javascript
-<UseAnimations animation={github} size={56} strokeColor="#2563eb" style={{ padding: 100 }} />
+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`:
+
+```bash
+npx shadcn@latest add https://useanimations.com/r/checkmark.json
 ```
 
-These props are available:
+```tsx
+import { AnimatedCheckmark } from '@/components/animations/checkmark';
+
+<AnimatedCheckmark size={24} />;
+```
+
+## Interactions
+
+Each icon comes with the interaction it has on [useanimations.com](https://useanimations.com). Pass `interaction` to pick another one.
+
+| Interaction    | What it does                                     | For example           |
+| :------------- | :----------------------------------------------- | :-------------------- |
+| `hover-replay` | plays once on hover                              | `arrowRight`, `zap`   |
+| `click-replay` | replays on every click                           | `download`, `send`    |
+| `click-toggle` | toggles between two states on click              | `menu`, `heart`       |
+| `loop`         | plays continuously                               | `loading`, `activity` |
+| `hover`        | plays forward on hover, backward on leave        | `trash`, `settings`   |
+| `hover-loop`   | loops while hovered, finishes the cycle on leave | `github`, `twitter`   |
+
+```jsx
+<UseAnimations animation={download} interaction="hover" />
+```
+
+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.
+
+## Props
+
+```jsx
+<UseAnimations animation={github} size={56} strokeColor="#2563eb" style={{ padding: 100 }} />
+```
 
 | Prop        |     Default      | Definition                                                                                                        |
 | :---------- | :--------------: | :---------------------------------------------------------------------------------------------------------------- |
@@ -54,33 +100,22 @@ These props are available:
 | size        |       `24`       | width and height; numbers are pixels, strings are any CSS length (e.g. `'1.5em'`)                                 |
 | strokeColor | `'currentColor'` | color of the icon's strokes; by default the icon follows the text color                                           |
 | fillColor   |  `strokeColor`   | color of the icon's filled parts (e.g. a liked heart)                                                             |
-| interaction |    per icon\*    | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` or `'hover-replay'`                       |
+| interaction |     per icon     | `'loop'`, `'click-toggle'`, `'click-replay'`, `'hover'`, `'hover-loop'` or `'hover-replay'`                       |
 | active      |        /         | for `click-toggle` icons: `true` shows the end state; controlled, so set it in `onClick` (clicks don't toggle it) |
-| autoplay    |    per icon\*    | `true` for looping icons like loaders, unless reduced motion is preferred                                         |
-| loop        |    per icon\*    | `true` for `loop` and `hover-loop` icons                                                                          |
+| autoplay    |     per icon     | `true` for `loop` icons, unless reduced motion is preferred                                                       |
+| loop        |     per icon     | `true` for `loop` and `hover-loop` icons                                                                          |
 | speed       |       `1`        | playback speed (1 is normal speed)                                                                                |
-| render      |        /         | render prop for a custom wrapper, see below                                                                       |
-
-\* Each icon has a default interaction matching [useanimations.com](https://useanimations.com):
-
-- `loop`: plays continuously (loaders, alerts).
-- `click-toggle`: toggles between two states on click (menu, checkbox, play/pause).
-- `click-replay`: replays from the start on every click.
-- `hover`: plays forward on mouse enter and backward on mouse leave.
-- `hover-loop`: loops while hovered and finishes the current cycle on mouse leave (social icons).
-- `hover-replay`: plays once from the start on mouse enter.
-
-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.
-
-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.
+| render      |        /         | render prop for a custom wrapper, see [A real button](#a-real-button)                                             |
 
 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.
 
-#### Colors
+## Recipes
+
+### Colors and stroke width
 
 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:
 
-```javascript
+```jsx
 // Tailwind
 <UseAnimations animation={github} className="text-blue-600 [&_path]:stroke-[3]" />
 ```
@@ -94,13 +129,9 @@ Icons follow the text color by default, so `className="text-blue-600"` or `style
 
 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; }`.
 
-#### Accessibility
-
-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.
+### Controlled toggle
 
-#### Controlled toggle
-
-```javascript
+```jsx
 import { useState } from 'react';
 import UseAnimations from 'react-useanimations';
 import menu from 'react-useanimations/lib/menu';
@@ -119,25 +150,11 @@ export const MenuButton = () => {
 };
 ```
 
-#### Changing the interaction
-
-```javascript
-<UseAnimations animation={download} interaction="hover" />
-```
-
-#### Your own Lottie animation
-
-```javascript
-import animationData from './my-animation.json';
-
-<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
-```
-
-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.
+### A real button
 
-#### Wrapping the animation in another element
+For clickable icons, put an interactive element around the icon with the `render` prop, so it is focusable and works with the keyboard:
 
-```javascript
+```jsx
 import heart from 'react-useanimations/lib/heart';
 
 export const LikeButton = () => (
@@ -154,24 +171,47 @@ export const LikeButton = () => (
 );
 ```
 
-`eventProps` holds the `onClick`, `onMouseEnter`, `onMouseLeave`, `onPointerEnter`, `onFocus` and `onBlur` handlers for your interactive element (e.g. a button) and `animationProps` holds the animation itself, which you spread on a `<span>` inside it.
+`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.
 
-#### Next.js and other SSR frameworks
+### Your own Lottie animation
+
+```jsx
+import animationData from './my-animation.json';
+
+<UseAnimations animation={{ animationData, interaction: 'hover' }} />;
+```
+
+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.
+
+### Next.js and other SSR frameworks
 
 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.
 
-### Available animations
+## Accessibility and motion
+
+- Icons are decorative by default (`aria-hidden`). Pass `aria-label` to have the icon announced as an image.
+- 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`.
+- 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.
+
+## Available animations
+
+[Browse and search all 300 icons](https://useanimations.com/#icons) on the website, or expand the full list:
+
+<details>
+<summary><b>All icon names</b></summary>
 
 <!-- icons:start -->
 
-`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`, `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`, `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`
+`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`
 <!-- icons:end -->
 
+</details>
+
 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`.
 
-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). Editors show the same details when you hover an icon import.
+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).
 
-#### The icon set outside React
+### The icon set outside React
 
 The package contains the whole icon set, and [useanimations.com](https://useanimations.com) is built from it:
 
@@ -190,9 +230,12 @@ for (const icon of catalog) {
 }
 ```
 
-### Upgrading from v2
+## Upgrading from v2
 
-Imports and the component stay the same, and all 79 v2 icons are still there. The full guide, with before/after code, is at [react.useanimations.com/documentation#upgrading-from-v2](https://react.useanimations.com/documentation#upgrading-from-v2). In short:
+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).
+
+<details>
+<summary><b>What changed in v3</b></summary>
 
 - Requires React 18 or newer; lottie-web is no longer a dependency, so remove it unless something else uses it.
 - `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).
@@ -202,13 +245,15 @@ Imports and the component stay the same, and all 79 v2 icons are still there. Th
 - The wrapper is an inline-block `<span>` instead of a `<div>`, hidden from screen readers unless you pass `aria-label`; spread `animationProps` on a `<span>` in the `render` prop.
 - 26 icons now play the interaction they have on useanimations.com (e.g. `zoomIn` plays on hover instead of looping, `github` loops on hover instead of playing once, the arrow circles replay on click instead of toggling); pass `interaction` to keep the old behavior.
 - Types come from `react-useanimations` (`Animation`, `AnimationKey`, `Interaction`, `UseAnimationsProps`); the `react-useanimations/utils` paths were removed.
-- New: 219 more icons (298 in total), `react-useanimations/icons`, reduced-motion support and server rendering without workarounds.
+- New: 221 more icons (300 in total), `react-useanimations/icons`, reduced-motion support and server rendering without workarounds.
+
+</details>
 
-### Development
+## Development
 
 The tooling is [Vite+](https://viteplus.dev) (Vitest, Oxlint, Oxfmt and tsdown), configured in `vite.config.ts`.
 
-```
+```bash
 npm install
 npx playwright install chromium firefox webkit  # once, for the browser tests
 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
 npm run build       # builds dist/: the component (vp pack) and the icon modules
 npm run verify      # check, tests, build and package check
 npm run icons       # validates icons/ and updates the files generated from it
+npm run website:dev # useanimations.com, built from the same icons and component
 ```
 
 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`.
 
-### License
+## License
 
 [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)".
+
+<div align="center">
+<br />
+
+**[useanimations.com](https://useanimations.com)** &nbsp;·&nbsp; [X](https://twitter.com/useAnimations/) &nbsp;·&nbsp; [Instagram](https://www.instagram.com/getuseanimations/) &nbsp;·&nbsp; [Facebook](https://www.facebook.com/useanimations/)
+
+</div>

package/catalog.json

@@ -1637,6 +1637,26 @@
     ],
     "preview": "https://useanimations.com/icons/disc/disc.svg"
   },
+  {
+    "name": "discord",
+    "id": "discord",
+    "title": "Discord",
+    "category": "Social media",
+    "keywords": [
+      "chat",
+      "community",
+      "discord",
+      "gaming",
+      "social media"
+    ],
+    "interaction": "hover-loop",
+    "export": "discord",
+    "import": "import discord from 'react-useanimations/lib/discord';",
+    "svg": [
+      "discord"
+    ],
+    "preview": "https://useanimations.com/icons/discord/discord.svg"
+  },
   {
     "name": "divide",
     "id": "divide",
@@ -4681,6 +4701,26 @@
     ],
     "preview": "https://useanimations.com/icons/target/target.svg"
   },
+  {
+    "name": "telegram",
+    "id": "telegram",
+    "title": "Telegram",
+    "category": "Social media",
+    "keywords": [
+      "chat",
+      "messenger",
+      "paper plane",
+      "social media",
+      "telegram"
+    ],
+    "interaction": "hover-loop",
+    "export": "telegram",
+    "import": "import telegram from 'react-useanimations/lib/telegram';",
+    "svg": [
+      "telegram"
+    ],
+    "preview": "https://useanimations.com/icons/telegram/telegram.svg"
+  },
   {
     "name": "terminal",
     "id": "terminal",

package/icons.d.mts

@@ -1288,6 +1288,21 @@ export declare const deleteIcon: Animation;
  */
 export declare const disc: Animation;
 
+/**
+ * **Discord** animated icon (Social media). Default interaction: `hover-loop`.
+ *
+ * Keywords: chat, community, discord, gaming, social media.
+ *
+ * ![Discord](https://useanimations.com/icons/discord/discord.svg)
+ *
+ * @example
+ * import UseAnimations from 'react-useanimations';
+ * import { discord } from 'react-useanimations/icons';
+ *
+ * <UseAnimations animation={discord} />
+ */
+export declare const discord: Animation;
+
 /**
  * **Divide** animated icon (Shapes & math). Default interaction: `hover-replay`.
  *
@@ -3742,6 +3757,21 @@ export declare const tag: Animation;
  */
 export declare const target: Animation;
 
+/**
+ * **Telegram** animated icon (Social media). Default interaction: `hover-loop`.
+ *
+ * Keywords: chat, messenger, paper plane, social media, telegram.
+ *
+ * ![Telegram](https://useanimations.com/icons/telegram/telegram.svg)
+ *
+ * @example
+ * import UseAnimations from 'react-useanimations';
+ * import { telegram } from 'react-useanimations/icons';
+ *
+ * <UseAnimations animation={telegram} />
+ */
+export declare const telegram: Animation;
+
 /**
  * **Terminal** animated icon (Development). Default interaction: `loop`.
  *

package/icons.d.ts

@@ -1288,6 +1288,21 @@ export declare const deleteIcon: Animation;
  */
 export declare const disc: Animation;
 
+/**
+ * **Discord** animated icon (Social media). Default interaction: `hover-loop`.
+ *
+ * Keywords: chat, community, discord, gaming, social media.
+ *
+ * ![Discord](https://useanimations.com/icons/discord/discord.svg)
+ *
+ * @example
+ * import UseAnimations from 'react-useanimations';
+ * import { discord } from 'react-useanimations/icons';
+ *
+ * <UseAnimations animation={discord} />
+ */
+export declare const discord: Animation;
+
 /**
  * **Divide** animated icon (Shapes & math). Default interaction: `hover-replay`.
  *
@@ -3742,6 +3757,21 @@ export declare const tag: Animation;
  */
 export declare const target: Animation;
 
+/**
+ * **Telegram** animated icon (Social media). Default interaction: `hover-loop`.
+ *
+ * Keywords: chat, messenger, paper plane, social media, telegram.
+ *
+ * ![Telegram](https://useanimations.com/icons/telegram/telegram.svg)
+ *
+ * @example
+ * import UseAnimations from 'react-useanimations';
+ * import { telegram } from 'react-useanimations/icons';
+ *
+ * <UseAnimations animation={telegram} />
+ */
+export declare const telegram: Animation;
+
 /**
  * **Terminal** animated icon (Development). Default interaction: `loop`.
  *

package/icons.js

@@ -87,6 +87,7 @@ Object.defineProperties(exports, {
   database: { enumerable: true, get: () => require("./lib/database.js").default },
   deleteIcon: { enumerable: true, get: () => require("./lib/delete.js").default },
   disc: { enumerable: true, get: () => require("./lib/disc.js").default },
+  discord: { enumerable: true, get: () => require("./lib/discord.js").default },
   divide: { enumerable: true, get: () => require("./lib/divide.js").default },
   divideCircle: { enumerable: true, get: () => require("./lib/divideCircle.js").default },
   divideSquare: { enumerable: true, get: () => require("./lib/divideSquare.js").default },
@@ -251,6 +252,7 @@ Object.defineProperties(exports, {
   tablet: { enumerable: true, get: () => require("./lib/tablet.js").default },
   tag: { enumerable: true, get: () => require("./lib/tag.js").default },
   target: { enumerable: true, get: () => require("./lib/target.js").default },
+  telegram: { enumerable: true, get: () => require("./lib/telegram.js").default },
   terminal: { enumerable: true, get: () => require("./lib/terminal.js").default },
   thermometer: { enumerable: true, get: () => require("./lib/thermometer.js").default },
   thumbsDown: { enumerable: true, get: () => require("./lib/thumbsDown.js").default },

package/icons.mjs

@@ -84,6 +84,7 @@ export { default as crosshair } from './lib/crosshair.mjs';
 export { default as database } from './lib/database.mjs';
 export { default as deleteIcon } from './lib/delete.mjs';
 export { default as disc } from './lib/disc.mjs';
+export { default as discord } from './lib/discord.mjs';
 export { default as divide } from './lib/divide.mjs';
 export { default as divideCircle } from './lib/divideCircle.mjs';
 export { default as divideSquare } from './lib/divideSquare.mjs';
@@ -248,6 +249,7 @@ export { default as table } from './lib/table.mjs';
 export { default as tablet } from './lib/tablet.mjs';
 export { default as tag } from './lib/tag.mjs';
 export { default as target } from './lib/target.mjs';
+export { default as telegram } from './lib/telegram.mjs';
 export { default as terminal } from './lib/terminal.mjs';
 export { default as thermometer } from './lib/thermometer.mjs';
 export { default as thumbsDown } from './lib/thumbsDown.mjs';

package/index.d.mts

@@ -22,7 +22,7 @@ type Animation = {
 //#endregion
 //#region src/icons.d.ts
 /** Name of an icon in `react-useanimations/lib/<name>`. */
-type AnimationKey = "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" | "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" | "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";
+type AnimationKey = "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";
 //#endregion
 //#region src/index.d.ts
 export type EventProps = {

package/index.d.ts

@@ -22,7 +22,7 @@ type Animation = {
 //#endregion
 //#region src/icons.d.ts
 /** Name of an icon in `react-useanimations/lib/<name>`. */
-type AnimationKey = "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" | "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" | "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";
+type AnimationKey = "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";
 //#endregion
 //#region src/index.d.ts
 export type EventProps = {

package/lib/discord.d.mts

@@ -0,0 +1,18 @@
+import type { Animation } from '../index.mjs';
+
+/**
+ * **Discord** animated icon (Social media). Default interaction: `hover-loop`.
+ *
+ * Keywords: chat, community, discord, gaming, social media.
+ *
+ * ![Discord](https://useanimations.com/icons/discord/discord.svg)
+ *
+ * @example
+ * import UseAnimations from 'react-useanimations';
+ * import discord from 'react-useanimations/lib/discord';
+ *
+ * <UseAnimations animation={discord} />
+ */
+declare const animation: Animation;
+
+export default animation;

package/lib/discord.d.ts

@@ -0,0 +1,18 @@
+import type { Animation } from '../index.js';
+
+/**
+ * **Discord** animated icon (Social media). Default interaction: `hover-loop`.
+ *
+ * Keywords: chat, community, discord, gaming, social media.
+ *
+ * ![Discord](https://useanimations.com/icons/discord/discord.svg)
+ *
+ * @example
+ * import UseAnimations from 'react-useanimations';
+ * import discord from 'react-useanimations/lib/discord';
+ *
+ * <UseAnimations animation={discord} />
+ */
+declare const animation: Animation;
+
+export default animation;

package/lib/discord.js

@@ -0,0 +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

@@ -0,0 +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.d.mts

@@ -0,0 +1,18 @@
+import type { Animation } from '../index.mjs';
+
+/**
+ * **Telegram** animated icon (Social media). Default interaction: `hover-loop`.
+ *
+ * Keywords: chat, messenger, paper plane, social media, telegram.
+ *
+ * ![Telegram](https://useanimations.com/icons/telegram/telegram.svg)
+ *
+ * @example
+ * import UseAnimations from 'react-useanimations';
+ * import telegram from 'react-useanimations/lib/telegram';
+ *
+ * <UseAnimations animation={telegram} />
+ */
+declare const animation: Animation;
+
+export default animation;

package/lib/telegram.d.ts

@@ -0,0 +1,18 @@
+import type { Animation } from '../index.js';
+
+/**
+ * **Telegram** animated icon (Social media). Default interaction: `hover-loop`.
+ *
+ * Keywords: chat, messenger, paper plane, social media, telegram.
+ *
+ * ![Telegram](https://useanimations.com/icons/telegram/telegram.svg)
+ *
+ * @example
+ * import UseAnimations from 'react-useanimations';
+ * import telegram from 'react-useanimations/lib/telegram';
+ *
+ * <UseAnimations animation={telegram} />
+ */
+declare const animation: Animation;
+
+export default animation;

package/lib/telegram.js

@@ -0,0 +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

@@ -0,0 +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

@@ -1,6 +1,6 @@
 {
   "name": "react-useanimations",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "Official React component for useAnimations animated Lottie icons",
   "keywords": [
     "react",
@@ -11,7 +11,7 @@
     "svg",
     "useanimations"
   ],
-  "homepage": "https://react.useanimations.com",
+  "homepage": "https://useanimations.com",
   "bugs": {
     "url": "https://github.com/useAnimations/react-useanimations/issues"
   },

package/svg.json

@@ -256,6 +256,9 @@
   "disc": {
     "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>"
   },
+  "discord": {
+    "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>"
+  },
   "divide": {
     "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>"
   },
@@ -753,6 +756,9 @@
   "target": {
     "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>"
   },
+  "telegram": {
+    "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>"
+  },
   "terminal": {
     "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>"
   },