@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;
  }

  /* Register icons here, one line each. The SVG goes in app/assets/images/
     and is painted with currentColor via the mask, so it needs no fill.

     .icon--check { --svg: url("check.svg"); }
     .icon--close { --svg: url("close.svg"); }

     Non-square marks override the mask size individually:

     .icon--wordmark {
       --svg: url("wordmark.svg");
       inline-size: 1.14em;
       mask-size: 1.14em var(--icon-size, 1em);
     }
  */
  .icon--church {
    --svg: url("/assets/church-33fa3b97.svg");
  }

  .icon--logout {
    --svg: url("/assets/logout-95daeb21.svg");
  }

  .icon--menu {
    --svg: url("/assets/menu-ba8040a4.svg");
  }
}