@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;
    position: relative;
    user-select: none;
  }

  img.icon {
    background: none;
  }

  .icon--add { --svg: url("/assets/add-d84a6b01.svg"); }
  .icon--add-image { --svg: url("/assets/add-image-abde26c5.svg"); }
  .icon--arrow-down { --svg: url("/assets/arrow-down-378ff34b.svg"); }
  .icon--arrow-left { --svg: url("/assets/arrow-left-43e8ce87.svg"); }
  .icon--arrow-right { --svg: url("/assets/arrow-right-482b4493.svg"); }
  .icon--arrow-up { --svg: url("/assets/arrow-up-a4174cea.svg"); }
  .icon--check { --svg: url("/assets/check-ae0ed96f.svg"); }
  .icon--chevron-right { --svg: url("/assets/chevron-right-e4def9c8.svg"); }
  .icon--delete { --svg: url("/assets/delete-db365552.svg"); }
  .icon--draw { --svg: url("/assets/draw-82368b53.svg"); }
  .icon--edit { --svg: url("/assets/edit-7b733c1b.svg"); }
  .icon--eraser { --svg: url("/assets/eraser-1f5d9127.svg"); }
  .icon--logout { --svg: url("/assets/logout-c639a105.svg"); }
  .icon--person-add { --svg: url("/assets/person-add-09df645f.svg"); }
  .icon--play { --svg: url("/assets/play-a8508daf.svg"); }
  .icon--print { --svg: url("/assets/print-a0ad6e21.svg"); }
  .icon--remove { --svg: url("/assets/remove-dfc80bb0.svg"); }
  .icon--settings { --svg: url("/assets/settings-241dc6f2.svg"); }
  .icon--undo { --svg: url("/assets/undo-85eb8fd6.svg"); }
  .icon--upload { --svg: url("/assets/upload-5b237c39.svg"); }
  .icon--zoom-in { --svg: url("/assets/zoom-in-60ffa719.svg"); }
  .icon--zoom-out { --svg: url("/assets/zoom-out-f3c7a011.svg"); }
}