@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--arrow-left { --svg: url("/assets/arrow-left-4a332d5a.svg"); }
  .icon--home { --svg: url("/assets/home-e0420e78.svg"); }
  .icon--plus { --svg: url("/assets/plus-fb96df8f.svg"); }
  .icon--search { --svg: url("/assets/search-93f7ab6a.svg"); }
  .icon--bar-chart { --svg: url("/assets/bar-chart-18b33228.svg"); }
  .icon--log-out { --svg: url("/assets/log-out-1d2caf85.svg"); }
  .icon--more-vertical { --svg: url("/assets/more-vertical-67929ea8.svg"); }
  .icon--x { --svg: url("/assets/x-3838d839.svg"); }
  .icon--tv { --svg: url("/assets/tv-89e5a30c.svg"); }
  .icon--star { --svg: url("/assets/star-6e0b636c.svg"); }
}