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

  img.icon {
    background: none;
  }

  .icon--add { --svg: url("/assets/add-880260c1.svg"); }
  .icon--arrow-left { --svg: url("/assets/arrow-left-abe40556.svg"); }
  .icon--arrow-right { --svg: url("/assets/arrow-right-61dca488.svg"); }
  .icon--arrow-up { --svg: url("/assets/arrow-up-f96b3895.svg"); }
  .icon--bell { --svg: url("/assets/bell-cde41b14.svg"); }
  .icon--caret-down { --svg: url("/assets/caret-down-b59252bf.svg"); }
  .icon--check { --svg: url("/assets/check-611182fc.svg"); }
  .icon--close { --svg: url("/assets/close-b9e837a5.svg"); }
  .icon--logout { --svg: url("/assets/logout-a6131db1.svg"); }
  .icon--marker { --svg: url("/assets/marker-04289650.svg"); }
  .icon--person { --svg: url("/assets/person-01c1c915.svg"); }
  .icon--settings { --svg: url("/assets/settings-aee56972.svg"); }
}