UNPKG

@animated-color-icons/lucide-wc

Version:

Animated Lucide icons as Web Components — CSS-only hover animations with two-tone color support. 1,933 icons.

animated-icons.vercel.app

gorkem-bwl/animated-icons

75 lines (64 loc) • 10 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/** * <animated-lucide-party-popper> Web Component * Usage: <animated-lucide-party-popper size="24" color="#0d9488"></animated-lucide-party-popper> */ class PartyPopperIcon extends HTMLElement { static get observedAttributes() { return ['size', 'color', 'primary-color', 'secondary-color', 'stroke-width', 'label']; } constructor() { super(); this.attachShadow({ mode: 'open' }); this._render(); } attributeChangedCallback() { this._render(); } _render() { const size = this.getAttribute('size') || '24'; const color = this.getAttribute('color') || 'currentColor'; const primaryColor = this.getAttribute('primary-color') || color; const secondaryColor = this.getAttribute('secondary-color') || color; const strokeWidth = this.getAttribute('stroke-width') || '2'; const iconLabel = this.getAttribute('label') || 'party popper'; // Build SVG using DOM APIs for safe rendering const style = document.createElement('style'); style.textContent = ':host { display: inline-flex; } ' + "\n .al-delay-0 { --al-delay: 0ms; }\n .al-delay-1 { --al-delay: 80ms; }\n .al-delay-2 { --al-delay: 160ms; }\n .al-delay-3 { --al-delay: 240ms; }\n .al-delay-4 { --al-delay: 320ms; }\n .al-delay-5 { --al-delay: 400ms; }\n .al-delay-6 { --al-delay: 480ms; }\n .al-delay-7 { --al-delay: 560ms; }\n\n .al-primary { stroke: var(--animated-lucide-primary, var(--al-primary, currentColor)); }\n .al-secondary { stroke: var(--animated-lucide-secondary, var(--al-secondary, currentColor)); }\n\n .al-anim-fill {\n fill: currentColor;\n fill-opacity: 0;\n transition: fill-opacity 500ms ease var(--al-delay, 0ms);\n }\n .animated-lucide-icon:hover .al-anim-fill,\n .al-icon-wrapper:hover .al-anim-fill { fill-opacity: 0.18; }\n\n .al-anim-draw { }\n .animated-lucide-icon:hover .al-anim-draw,\n .al-icon-wrapper:hover .al-anim-draw { animation: al-draw-in 600ms ease var(--al-delay, 0ms) both; }\n @keyframes al-draw-in { 0% { stroke-dashoffset: var(--al-dash-len, 50); } 100% { stroke-dashoffset: 0; } }\n\n .al-anim-draw-line { }\n .animated-lucide-icon:hover .al-anim-draw-line,\n .al-icon-wrapper:hover .al-anim-draw-line { animation: al-draw-line 500ms ease var(--al-delay, 0ms) both; }\n @keyframes al-draw-line { 0% { stroke-dashoffset: var(--al-dash-len, 20); } 100% { stroke-dashoffset: 0; } }\n\n .al-anim-fade { }\n .animated-lucide-icon:hover .al-anim-fade,\n .al-icon-wrapper:hover .al-anim-fade { animation: al-fade-pop 500ms ease var(--al-delay, 0ms) both; }\n @keyframes al-fade-pop { 0% { opacity: 0.3; transform: scale(0.92); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }\n\n .al-anim-dot-appear { }\n .animated-lucide-icon:hover .al-anim-dot-appear,\n .al-icon-wrapper:hover .al-anim-dot-appear { animation: al-dot-pop 500ms ease 200ms both; }\n @keyframes al-dot-pop { 0% { transform: scale(1); } 40% { transform: scale(0.3); } 70% { transform: scale(1.3); } 100% { transform: scale(1); } }\n\n .al-anim-bar { transform-origin: center bottom; }\n .animated-lucide-icon:hover .al-anim-bar,\n .al-icon-wrapper:hover .al-anim-bar { animation: al-bar-grow 600ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--al-delay, 0ms) both; }\n @keyframes al-bar-grow { 0% { transform: scaleY(0.2); } 60% { transform: scaleY(1.08); } 100% { transform: scaleY(1); } }\n\n .al-anim-scale-pop { transform-origin: center; }\n .animated-lucide-icon:hover .al-anim-scale-pop,\n .al-icon-wrapper:hover .al-anim-scale-pop { animation: al-scale-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--al-delay, 0ms) both; }\n @keyframes al-scale-pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }\n\n .al-anim-pulse-element { }\n .animated-lucide-icon:hover .al-anim-pulse-element,\n .al-icon-wrapper:hover .al-anim-pulse-element { animation: al-pulse 0.7s ease-in-out; }\n @keyframes al-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }\n\n .al-anim-gear { transform-origin: 12px 12px; transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--al-delay, 0ms); }\n .animated-lucide-icon:hover .al-anim-gear,\n .al-icon-wrapper:hover .al-anim-gear { transform: rotate(var(--al-rotation, 90deg)); }\n\n .al-anim-nudge { transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--al-delay, 0ms); }\n .animated-lucide-icon:hover .al-anim-nudge,\n .al-icon-wrapper:hover .al-anim-nudge { transform: translate(var(--al-tx, 0px), var(--al-ty, 0px)); }\n\n .al-anim-bell-ring { transform-origin: 12px 3px; }\n .animated-lucide-icon:hover .al-anim-bell-ring,\n .al-icon-wrapper:hover .al-anim-bell-ring { animation: al-bell-ring 0.7s ease; }\n @keyframes al-bell-ring { 0% { transform: rotate(0deg); } 12% { transform: rotate(14deg); } 24% { transform: rotate(-12deg); } 36% { transform: rotate(8deg); } 48% { transform: rotate(-5deg); } 60% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } }\n\n .al-anim-heart-beat { transform-origin: 12px 13px; }\n .animated-lucide-icon:hover .al-anim-heart-beat,\n .al-icon-wrapper:hover .al-anim-heart-beat { animation: al-heart-beat 0.8s ease; }\n @keyframes al-heart-beat { 0% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } 60% { transform: scale(1); } }\n\n .al-anim-rocket-lift { transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--al-delay, 0ms); }\n .animated-lucide-icon:hover .al-anim-rocket-lift,\n .al-icon-wrapper:hover .al-anim-rocket-lift { transform: translate(1px, -1.5px); }\n\n .al-anim-handle-lift { transition: transform 500ms ease var(--al-delay, 0ms); }\n .animated-lucide-icon:hover .al-anim-handle-lift,\n .al-icon-wrapper:hover .al-anim-handle-lift { transform: translateY(-1.5px); }\n\n .al-anim-page-turn { transform-origin: left center; transition: transform 500ms ease var(--al-delay, 0ms); }\n .animated-lucide-icon:hover .al-anim-page-turn,\n .al-icon-wrapper:hover .al-anim-page-turn { transform: rotateY(-12deg); }\n\n .al-anim-menu-line { transform-origin: left center; transition: transform 400ms ease var(--al-delay, 0ms); }\n .animated-lucide-icon:hover .al-anim-menu-line,\n .al-icon-wrapper:hover .al-anim-menu-line { transform: scaleX(var(--al-scale-x, 0.7)); }\n\n .al-anim-mail-flap { transform-origin: center top; }\n .animated-lucide-icon:hover .al-anim-mail-flap,\n .al-icon-wrapper:hover .al-anim-mail-flap { animation: al-mail-flap 700ms ease var(--al-delay, 0ms) both; }\n @keyframes al-mail-flap { 0% { transform: rotateX(0deg); } 40% { transform: rotateX(-30deg); } 70% { transform: rotateX(5deg); } 100% { transform: rotateX(0deg); } }\n\n .al-anim-shake { transform-origin: center; }\n .animated-lucide-icon:hover .al-anim-shake,\n .al-icon-wrapper:hover .al-anim-shake { animation: al-shake 600ms ease var(--al-delay, 0ms) both; }\n @keyframes al-shake { 0% { transform: translateX(0) rotate(0deg); } 15% { transform: translateX(-1.5px) rotate(-3deg); } 30% { transform: translateX(1.5px) rotate(3deg); } 45% { transform: translateX(-1px) rotate(-2deg); } 60% { transform: translateX(1px) rotate(2deg); } 75% { transform: translateX(-0.5px) rotate(-1deg); } 100% { transform: translateX(0) rotate(0deg); } }\n\n .al-anim-spin { transform-origin: 12px 12px; }\n .animated-lucide-icon:hover .al-anim-spin,\n .al-icon-wrapper:hover .al-anim-spin { animation: al-spin 700ms cubic-bezier(0.4, 0, 0.2, 1) var(--al-delay, 0ms) both; }\n @keyframes al-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n"; const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); svg.setAttribute('width', size); svg.setAttribute('height', size); svg.setAttribute('viewBox', '0 0 24 24'); svg.setAttribute('fill', 'none'); svg.setAttribute('stroke', color); svg.setAttribute('stroke-width', strokeWidth); svg.setAttribute('stroke-linecap', 'round'); svg.setAttribute('stroke-linejoin', 'round'); svg.setAttribute('class', 'animated-lucide-icon animated-lucide-icon-party-popper'); svg.setAttribute('style', '--al-primary: ' + primaryColor + '; --al-secondary: ' + secondaryColor); svg.setAttribute('role', 'img'); svg.setAttribute('aria-label', iconLabel); const title = document.createElementNS('http://www.w3.org/2000/svg', 'title'); title.textContent = iconLabel; svg.appendChild(title); // Static SVG elements from build output — trusted content const template = document.createElement('template'); template.innerHTML = ` <path d="M5.8 11.3 2 22l10.7-3.79" class="al-primary al-anim-scale-pop al-delay-0" /> <path d="M4 3h.01" class="al-secondary al-anim-scale-pop al-delay-1" /> <path d="M22 8h.01" class="al-secondary al-anim-scale-pop al-delay-2" /> <path d="M15 2h.01" class="al-secondary al-anim-scale-pop al-delay-3" /> <path d="M22 20h.01" class="al-secondary al-anim-scale-pop al-delay-4" /> <path d="m22 2-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10" class="al-secondary al-anim-scale-pop al-delay-5" /> <path d="m22 13-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17" class="al-secondary al-anim-scale-pop al-delay-6" /> <path d="m11 2 .33.82c.34.86-.2 1.82-1.11 1.98C9.52 4.9 9 5.52 9 6.23V7" class="al-secondary al-anim-scale-pop al-delay-7" /> <path d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z" class="al-secondary al-anim-scale-pop al-delay-7" /> `; svg.appendChild(template.content); this.shadowRoot.replaceChildren(style, svg); } } if (!customElements.get('animated-lucide-party-popper')) { customElements.define('animated-lucide-party-popper', PartyPopperIcon); } export { PartyPopperIcon }; export default PartyPopperIcon;