@animateicons/react 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @animateicons/react
 
+## 0.10.0
+
+### Minor Changes
+
+- Added the `useIconHover` hook. It plays an icon when a user hovers or clicks the button, link or card around it, so you no longer write the mouse handlers yourself:
+  - `const { ref, triggerProps } = useIconHover()` for one icon. Pass `{ trigger: "click" }` or `{ trigger: "both" }` to change when it plays. Put `ref` on the icon and spread `triggerProps` on the element.
+  - `const { icon, trigger } = useIconHover({ trigger: [{ icon: "bell", trigger: "click" }, ...] })` for several icons in one component. Spread `{...icon.bell}` on each icon and `{...trigger}` on each element. Each element plays only the icons inside it.
+  - `IconTrigger` and `IconConfig` are exported as types.
+- Stopped the Huge `BookmarkIcon`, `BookmarkCheckIcon`, `BookmarkMinusIcon` and `BookmarkRemoveIcon` from clipping their animation at the edge of the icon.
+- The package now ships `THIRD_PARTY_NOTICES.md` for the Lucide and Hugeicons shapes.
+- Component names, props and the `startAnimation` and `stopAnimation` handle are unchanged, so no code changes are needed.
+
 ## 0.9.0
 
 ### Minor Changes

package/README.md

@@ -46,54 +46,28 @@ export default function Demo() {
 
 The icon animates on hover by default.
 
-## Bundle size
+## Hover, click or both
 
-Each icon is published as its own module, so bundlers drop the ones you
-don't import. Importing from the barrel is enough for Vite, Rollup, esbuild
-and webpack.
-
-**Next.js App Router is the exception.** The `lucide` / `huge` barrels carry
-the `"use client"` directive, which makes them a client boundary Next cannot
-tree-shake through - a barrel import pulls in the whole set. Import the icon
-directly instead:
-
-```tsx
-import { BellRingIcon } from "@animateicons/react/lucide/bell-ring-icon";
-import { HeartIcon } from "@animateicons/react/huge/heart-icon";
-```
-
-The subpath is the icon's file name: `BellRingIcon` -> `bell-ring-icon`.
-Measured in a Next 16 production build, for one icon: 918 kB -> 71 kB of
-client JS (91 kB -> 24 kB gzipped).
-
-Deep subpaths are ESM-only. `require()` consumers should use the barrel.
-
-## Imperative API
-
-Trigger animation from a parent via ref:
+Every icon has `startAnimation()` and `stopAnimation()`. `useIconHover` calls them for you when a user hovers or clicks:
 
 ```tsx
 "use client";
-import { useRef } from "react";
-import {
-	BellRingIcon,
-	type BellRingIconHandle,
-} from "@animateicons/react/lucide";
+import { useIconHover } from "@animateicons/react";
+import { BellRingIcon } from "@animateicons/react/lucide";
 
 export default function Bell() {
-	const ref = useRef<BellRingIconHandle>(null);
+	const { ref, triggerProps } = useIconHover(); // hover (default)
 
 	return (
-		<button
-			onMouseEnter={() => ref.current?.startAnimation()}
-			onMouseLeave={() => ref.current?.stopAnimation()}
-		>
+		<button {...triggerProps}>
 			<BellRingIcon ref={ref} size={28} />
 		</button>
 	);
 }
 ```
 
+See the [full docs](https://animateicons.in/icons/docs/examples/hover-helper) for click, both and multiple icons.
+
 ## Props
 
 | Prop         | Type      | Default        |
@@ -107,3 +81,5 @@ export default function Bell() {
 ## License
 
 MIT © [Avijit Dey](https://github.com/Avijit07x)
+
+Icon shapes are based on [Lucide](https://lucide.dev) and [Hugeicons](https://hugeicons.com), see the [third-party notices](./THIRD_PARTY_NOTICES.md).

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,81 @@
+# Third-party notices
+
+AnimateIcons icons are based on icon shapes from the projects below. Their licenses say the copyright notice must stay with copies of the icons, so the notices are included here.
+
+## Lucide
+
+Source: https://github.com/lucide-icons/lucide
+
+```
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+```
+
+### Feather
+
+Some Lucide icons are derived from Feather (https://github.com/feathericons/feather). Lucide lists them in its license file: https://github.com/lucide-icons/lucide/blob/main/LICENSE
+
+```
+The MIT License (MIT)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
+## Hugeicons
+
+Source: https://github.com/hugeicons/hugeicons (the free `@hugeicons/core-free-icons` set)
+
+```
+MIT License
+
+Copyright (c) 2025 Hugeicons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```

package/dist/chunk-B6RG2PVD.js

@@ -0,0 +1 @@
+import{a as d,b as v,c as f,d as p,e as k,f as n}from"./chunk-VEXIWKDQ.js";import{forwardRef as A,useCallback as M,useImperativeHandle as I,useRef as h}from"react";import{jsx as o,jsxs as E}from"react/jsx-runtime";var B=A(({onMouseEnter:i,onMouseLeave:s,className:y,size:m=24,duration:l=1,isAnimated:c=!0,color:g,...u},x)=>{let t=k(),e=p(),a=h(!1);I(x,()=>(a.current=!0,{startAnimation:()=>e?t.start("normal"):t.start("animate"),stopAnimation:()=>t.start("normal")}));let C=M(r=>{!c||e||(a.current?i?.(r):t.start("animate"))},[t,e,c,i]),L=M(r=>{a.current?s?.(r):t.start("normal")},[t,s]),b={normal:{y:0,scaleX:1,scaleY:1},animate:{y:[0,-4,.8,0],scaleY:[1,1.1,.94,1],scaleX:[1,.97,1.03,1],transition:{duration:.55*l,ease:"easeInOut",times:[0,.4,.75,1]}}},w={normal:{rotate:0,scale:1,transition:{duration:0}},animate:{rotate:[0,180],scale:[1,1.3,1],transition:{duration:.5*l,ease:"easeInOut"}}};return o(v,{features:f,strict:!0,children:o(n.div,{className:d("inline-flex items-center justify-center",y),onMouseEnter:C,onMouseLeave:L,...u,style:{color:g,...u.style},children:E(n.svg,{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",animate:t,initial:"normal",style:{overflow:"visible"},children:[o(n.path,{d:"M11 2C7.22876 2 5.34315 2 4.17157 3.12874C3 4.25748 3 6.07416 3 9.70753V17.9808C3 20.2867 3 21.4396 3.77285 21.8523C5.26947 22.6514 8.0768 19.9852 9.41 19.1824C10.1832 18.7168 10.5698 18.484 11 18.484C11.4302 18.484 11.8168 18.7168 12.59 19.1824C13.9232 19.9852 16.7305 22.6514 18.2272 21.8523C19 21.4396 19 20.2867 19 17.9808V11",variants:b,style:{transformBox:"view-box",originX:"11px",originY:"12px"}}),o(n.path,{d:"M13 6L21 6",variants:w,style:{transformBox:"view-box",originX:"17px",originY:"6px"}})]})})})});B.displayName="BookmarkMinusIcon";export{B as a};

package/dist/chunk-NK533O4N.js

@@ -0,0 +1 @@
+import{a as d,b as v,c as f,d as p,e as k,f as e}from"./chunk-VEXIWKDQ.js";import{forwardRef as w,useCallback as y,useImperativeHandle as A,useRef as I}from"react";import{jsx as o,jsxs as B}from"react/jsx-runtime";var h=w(({onMouseEnter:i,onMouseLeave:s,className:M,size:m=24,duration:l=1,isAnimated:c=!0,color:g,...u},x)=>{let t=k(),n=p(),a=I(!1);A(x,()=>(a.current=!0,{startAnimation:()=>n?t.start("normal"):t.start("animate"),stopAnimation:()=>t.start("normal")}));let L=y(r=>{!c||n||(a.current?i?.(r):t.start("animate"))},[t,n,c,i]),C=y(r=>{a.current?s?.(r):t.start("normal")},[t,s]),R={normal:{y:0,scaleX:1,scaleY:1},animate:{y:[0,-4,.8,0],scaleY:[1,1.1,.94,1],scaleX:[1,.97,1.03,1],transition:{duration:.55*l,ease:"easeInOut",times:[0,.4,.75,1]}}},b={normal:{rotate:0,scale:1,transition:{duration:0}},animate:{rotate:[0,90],scale:[1,1.3,1],transition:{duration:.5*l,ease:"easeInOut"}}};return o(v,{features:f,strict:!0,children:o(e.div,{className:d("inline-flex items-center justify-center",M),onMouseEnter:L,onMouseLeave:C,...u,style:{color:g,...u.style},children:B(e.svg,{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",animate:t,initial:"normal",style:{overflow:"visible"},children:[o(e.path,{d:"M11 2C7.22876 2 5.34315 2 4.17157 3.12874C3 4.25748 3 6.07416 3 9.70753V17.9808C3 20.2867 3 21.4396 3.77285 21.8523C5.26947 22.6514 8.0768 19.9852 9.41 19.1824C10.1832 18.7168 10.5698 18.484 11 18.484C11.4302 18.484 11.8168 18.7168 12.59 19.1824C13.9232 19.9852 16.7305 22.6514 18.2272 21.8523C19 21.4396 19 20.2867 19 17.9808V12",variants:R,style:{transformBox:"view-box",originX:"11px",originY:"12px"}}),o(e.path,{d:"M21 2L14 8.99954M21 9L14 2.00046",variants:b,style:{transformBox:"view-box",originX:"17.5px",originY:"5.5px"}})]})})})});h.displayName="BookmarkRemoveIcon";export{h as a};

package/dist/chunk-VO3NOOU5.js

@@ -0,0 +1 @@
+import{a as u,b as d,c as f,d as k,e as v,f as n}from"./chunk-VEXIWKDQ.js";import{forwardRef as w,useCallback as p,useImperativeHandle as x,useRef as I}from"react";import{jsx as o}from"react/jsx-runtime";var h=w(({onMouseEnter:i,onMouseLeave:s,className:y,size:m=24,duration:C=1,isAnimated:l=!0,color:M,...c},g)=>{let t=v(),e=k(),r=I(!1);x(g,()=>(r.current=!0,{startAnimation:()=>e?t.start("normal"):t.start("animate"),stopAnimation:()=>t.start("normal")}));let A=p(a=>{!l||e||(r.current?i?.(a):t.start("animate"))},[t,e,l,i]),L=p(a=>{r.current?s?.(a):t.start("normal")},[t,s]),b={normal:{y:0,scaleX:1,scaleY:1},animate:{y:[0,-4,.8,0],scaleY:[1,1.1,.94,1],scaleX:[1,.97,1.03,1],transition:{duration:.55*C,ease:"easeInOut",times:[0,.4,.75,1]}}};return o(d,{features:f,strict:!0,children:o(n.div,{className:u("inline-flex items-center justify-center",y),onMouseEnter:A,onMouseLeave:L,...c,style:{color:M,...c.style},children:o(n.svg,{xmlns:"http://www.w3.org/2000/svg",width:m,height:m,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",animate:t,initial:"normal",style:{overflow:"visible"},children:o(n.path,{d:"M4 17.9808V9.70753C4 6.07416 4 4.25748 5.17157 3.12874C6.34315 2 8.22876 2 12 2C15.7712 2 17.6569 2 18.8284 3.12874C20 4.25748 20 6.07416 20 9.70753V17.9808C20 20.2867 20 21.4396 19.2272 21.8523C17.7305 22.6514 14.9232 19.9852 13.59 19.1824C12.8168 18.7168 12.4302 18.484 12 18.484C11.5698 18.484 11.1832 18.7168 10.41 19.1824C9.0768 19.9852 6.26947 22.6514 4.77285 21.8523C4 21.4396 4 20.2867 4 17.9808Z",variants:b,style:{transformBox:"view-box",originX:"12px",originY:"12px"}})})})})});h.displayName="BookmarkIcon";export{h as a};

package/dist/chunk-XKG4YODV.js

@@ -0,0 +1 @@
+import{a as d,b as u,c as f,d as p,e as C,f as o}from"./chunk-VEXIWKDQ.js";import{forwardRef as b,useCallback as h,useImperativeHandle as w,useRef as x}from"react";import{jsx as n,jsxs as B}from"react/jsx-runtime";var I=b(({onMouseEnter:s,onMouseLeave:m,className:v,size:c=24,duration:e=1,isAnimated:l=!0,color:y,...k},M)=>{let t=C(),a=p(),r=x(!1);w(M,()=>(r.current=!0,{startAnimation:()=>a?t.start("normal"):t.start("animate"),stopAnimation:()=>t.start("normal")}));let g=h(i=>{!l||a||(r.current?s?.(i):t.start("animate"))},[t,a,l,s]),D=h(i=>{r.current?m?.(i):t.start("normal")},[t,m]),A={normal:{y:0,scaleX:1,scaleY:1},animate:{y:[0,-4,.8,0],scaleY:[1,1.1,.94,1],scaleX:[1,.97,1.03,1],transition:{duration:.55*e,ease:"easeInOut",times:[0,.4,.75,1]}}},L={normal:{strokeDashoffset:0,opacity:1},animate:{strokeDashoffset:[11,0],opacity:[0,1],transition:{strokeDashoffset:{duration:.45*e,ease:"easeOut",delay:.15*e},opacity:{duration:.1*e,delay:.15*e}}}};return n(u,{features:f,strict:!0,children:n(o.div,{className:d("inline-flex items-center justify-center",v),onMouseEnter:g,onMouseLeave:D,...k,style:{color:y,...k.style},children:B(o.svg,{xmlns:"http://www.w3.org/2000/svg",width:c,height:c,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",animate:t,initial:"normal",style:{overflow:"visible"},children:[n(o.path,{d:"M4 17.9808V9.70753C4 6.07416 4 4.25748 5.17157 3.12874C6.34315 2 8.22876 2 12 2C15.7712 2 17.6569 2 18.8284 3.12874C20 4.25748 20 6.07416 20 9.70753V17.9808C20 20.2867 20 21.4396 19.2272 21.8523C17.7305 22.6514 14.9232 19.9852 13.59 19.1824C12.8168 18.7168 12.4302 18.484 12 18.484C11.5698 18.484 11.1832 18.7168 10.41 19.1824C9.0768 19.9852 6.26947 22.6514 4.77285 21.8523C4 21.4396 4 20.2867 4 17.9808Z",variants:A,style:{transformBox:"view-box",originX:"12px",originY:"12px"}}),n(o.path,{d:"M9 11.3333C9 11.3333 9.875 11.3333 10.75 13C10.75 13 13.5294 8.83333 16 8",strokeDasharray:"11",strokeDashoffset:"0",variants:L})]})})})});I.displayName="BookmarkCheckIcon";export{I as a};