@layer components {
  .icon {
    background-color: var(--icon-color, currentColor);
    block-size: var(--icon-size, 1rem);
    display: inline-block;
    flex-shrink: 0;
    inline-size: var(--icon-size, 1rem);
    mask-image: var(--svg);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: var(--icon-size, 1rem);
    pointer-events: none;
    user-select: none;
  }

  img.icon {
    background: none;
  }

  .icon--loading {
    --svg: url("/assets/loading-b8fb367c.svg");
    animation: var(--animate-spin);
    animation-duration: 1s;
  }

  /****************************************************************
* Lucide (https://lucide.dev)
* Open-source icon library with a consistent style
*****************************************************************/
  .icon--camera {
    --svg: url("/assets/camera-d0824639.svg");
  }

  .icon--chevron-left {
    --svg: url("/assets/chevron-left-c0e2dc09.svg");
  }

  .icon--chevron-right {
    --svg: url("/assets/chevron-right-cefe893c.svg");
  }

  .icon--chevrons-up-down {
    --svg: url("/assets/chevrons-up-down-f4f3a04e.svg");
  }

  .icon--circle-alert {
    --svg: url("/assets/circle-alert-81b1618f.svg");
  }

  .icon--circle-check {
    --svg: url("/assets/circle-check-d3887b21.svg");
  }

  .icon--copy {
    --svg: url("/assets/copy-01e6c75f.svg");
  }

  .icon--download {
    --svg: url("/assets/download-e58535ee.svg");
  }

  .icon--ellipsis {
    --svg: url("/assets/ellipsis-ced9163f.svg");
  }

  .icon--minus {
    --svg: url("/assets/minus-45ea2d69.svg");
  }

  .icon--moon {
    --svg: url("/assets/moon-d3c54f2f.svg");
  }

  .icon--panel-left {
    --svg: url("/assets/panel-left-58d5a2c2.svg");
  }

  .icon--search {
    --svg: url("/assets/search-dd48e95f.svg");
  }

  .icon--share {
    --svg: url("/assets/share-5540b3f5.svg");
  }

  .icon--sun {
    --svg: url("/assets/sun-617e9d17.svg");
  }

  .icon--x {
    --svg: url("/assets/x-47ea5b4b.svg");
  }
}