@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--clipboard {
    --svg: url("/assets/clipboard-778de348.svg");
  }

  .icon--globe {
    --svg: url("/assets/globe-b2f9d103.svg");
  }

  .icon--comment {
    --svg: url("/assets/comment-c5473e22.svg");
  }

  .icon--link {
    --svg: url("/assets/link-84374cd1.svg");
  }

  .icon--reload {
    --svg: url("/assets/reload-a76356de.svg");
  }

  .icon--alert {
    --svg: url("/assets/alert-e12684c8.svg");
  }

  .icon--info {
    --svg: url("/assets/info-4acc20a9.svg");
  }

  .icon--transition {
    --svg: url("/assets/arrow-right-d5ecd438.svg");
  }

  .icon--package {
    --svg: url("/assets/package-f2a6b9b9.svg");
  }

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

  .icon--system {
    --svg: url("/assets/system-b22338d8.svg");
  }
}