@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--chevron-down { --svg: url("/assets/icons/chevron-down-6e9d715d.svg"); }
  .icon--home { --svg: url("/assets/icons/home-0dbc7221.svg"); }
  .icon--template { --svg: url("/assets/icons/template-4a5b3773.svg"); }
  .icon--settings { --svg: url("/assets/icons/settings-68936657.svg"); }
  .icon--logout { --svg: url("/assets/icons/logout-8fac3cfb.svg"); }
  .icon--arrow-left { --svg: url("/assets/icons/arrow-left-1ac3838b.svg"); }
  .icon--search { --svg: url("/assets/icons/search-b8ab709e.svg"); }
}