@animated-color-icons/lucide-wc/LayoutPanelTop.js

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

/**
 * <animated-lucide-layout-panel-top> Web Component
 * Usage: <animated-lucide-layout-panel-top size="24" color="#0d9488"></animated-lucide-layout-panel-top>
 */
class LayoutPanelTopIcon 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') || 'layout panel top';

    // 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-layout-panel-top');
    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 = `        <rect width="18" height="7" x="3" y="3" rx="1" class="al-primary al-anim-scale-pop al-delay-0" />
        <rect width="7" height="7" x="3" y="14" rx="1" class="al-secondary al-anim-scale-pop al-delay-1" />
        <rect width="7" height="7" x="14" y="14" rx="1" class="al-secondary al-anim-scale-pop al-delay-2" />
`;
    svg.appendChild(template.content);

    this.shadowRoot.replaceChildren(style, svg);
  }
}

if (!customElements.get('animated-lucide-layout-panel-top')) {
  customElements.define('animated-lucide-layout-panel-top', LayoutPanelTopIcon);
}

export { LayoutPanelTopIcon };
export default LayoutPanelTopIcon;