@layer components {
  /* A one-color icon drawn in currentColor: the SVG file is only its mask. */
  .icon {
    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);
  }

  .icon--tick { --svg: url("/assets/icons/tick-688080a7.svg"); }
  .icon--search { --svg: url("/assets/icons/search-2cda009d.svg"); }
  .icon--camera { --svg: url("/assets/icons/camera-da8f9879.svg"); }
  .icon--upload { --svg: url("/assets/icons/upload-3a26be2a.svg"); }
  .icon--download { --svg: url("/assets/icons/download-36836e12.svg"); }
}