@layer components {
  .icon--arrow-down { --svg: url("/assets/arrow-down-0757f7cc.svg"); }
  .icon--books { --svg: url("/assets/books-75f5090c.svg"); }
  .icon--cancel { --svg: url("/assets/cancel-c6dfeb78.svg"); }
  .icon--download { --svg: url("/assets/download-6d5843c7.svg"); }
  .icon--link { --svg: url("/assets/link-e546a5df.svg"); }
  .icon--messages-outlined { --svg: url("/assets/messages-outlined-87ff0331.svg"); }
  .icon--office { --svg: url("/assets/office-69ba5668.svg"); }
  .icon--page-text { --svg: url("/assets/page-text-a0385e9e.svg"); }
  .icon--people { --svg: url("/assets/people-869df5fe.svg"); }
  .icon--reply { --svg: url("/assets/reply-edb77e33.svg"); }
  .icon--transfer { --svg: url("/assets/transfer-3ec4f61b.svg"); }

  /* buttons.css sizes a plain button's icon to the whole button. In a text link the icon sits beside the words, at their size. */
  .btn--plain.txt-link {
    --btn-icon-size: 1em;
  }
}