.icon {
  background-color: var(--icon-color, currentColor);
  block-size: var(--icon-size, 1rem);
  display: inline-block;
  flex-shrink: 0;
  inline-size: var(--icon-size, 1rem);
  mask-image: var(--svg);
  mask-repeat: no-repeat;
  mask-size: cover;
  pointer-events: none;
  user-select: none;
}

img.icon {
  background: none;
}

.icon--loading {
  --svg: url("/assets/loading-b8fb367c.svg");
  animation: var(--animate-spin);
  animation-duration: 1s;
}

/****************************************************************
* Lucide (https://lucide.dev)
* Open-source icon library with a consistent style
*****************************************************************/
.icon--chevron-left { --svg: url("/assets/chevron-left-c0e2dc09.svg"); }
.icon--chevron-right { --svg: url("/assets/chevron-right-cefe893c.svg"); }
.icon--ellipsis { --svg: url("/assets/ellipsis-ced9163f.svg"); }
.icon--chevrons-up-down { --svg: url("/assets/chevrons-up-down-f4f3a04e.svg"); }
.icon--menu { --svg: url("/assets/menu-eff967e6.svg"); }
.icon--x { --svg: url("/assets/x-47ea5b4b.svg"); }
.icon--search { --svg: url("/assets/search-dd48e95f.svg"); }
.icon--copy { --svg: url("/assets/copy-01e6c75f.svg"); }
.icon--download { --svg: url("/assets/download-e58535ee.svg"); }
.icon--share { --svg: url("/assets/share-5540b3f5.svg"); }
.icon--camera { --svg: url("/assets/camera-d0824639.svg"); }
.icon--minus { --svg: url("/assets/minus-45ea2d69.svg"); }
.icon--sun { --svg: url("/assets/sun-617e9d17.svg"); }
.icon--moon { --svg: url("/assets/moon-d3c54f2f.svg"); }

/****************************************************************
* Showcase icons
*****************************************************************/
.icon--terminal { --svg: url("/assets/terminal-78f298be.svg"); }
.icon--circle-alert { --svg: url("/assets/circle-alert-c59e0a27.svg"); }
.icon--grip-vertical { --svg: url("/assets/grip-vertical-8e68e377.svg"); }
.icon--circle-plus { --svg: url("/assets/circle-plus-ed31158a.svg"); }
.icon--calendar { --svg: url("/assets/calendar-e7a6206b.svg"); }
.icon--smile { --svg: url("/assets/smile-b4120135.svg"); }
.icon--calculator { --svg: url("/assets/calculator-9139a339.svg"); }
.icon--user { --svg: url("/assets/user-1204c301.svg"); }
.icon--credit-card { --svg: url("/assets/credit-card-6c0b8cc2.svg"); }
.icon--settings { --svg: url("/assets/settings-8ef481f2.svg"); }
.icon--circle-check { --svg: url("/assets/circle-check-eb15357f.svg"); }
.icon--circle-user { --svg: url("/assets/circle-user-4a25d167.svg"); }
.icon--sliders-vertical { --svg: url("/assets/sliders-vertical-b805fe88.svg"); }
.icon--zap { --svg: url("/assets/zap-419493fe.svg"); }
.icon--app-window { --svg: url("/assets/app-window-a1ef0b76.svg"); }
.icon--code { --svg: url("/assets/code-9f82d1ea.svg"); }
.icon--italic { --svg: url("/assets/italic-55e943c7.svg"); }
.icon--bold { --svg: url("/assets/bold-9c85b01f.svg"); }
.icon--circle-slash { --svg: url("/assets/circle-slash-a8fa8c71.svg"); }
.icon--gallery-vertical-end { --svg: url("/assets/gallery-vertical-end-974e2946.svg"); }
.icon--square-terminal { --svg: url("/assets/square-terminal-a4b5ce2c.svg"); }
.icon--bot { --svg: url("/assets/bot-ec041f08.svg"); }
.icon--book-open { --svg: url("/assets/book-open-1a9a0d1d.svg"); }
.icon--settings-2 { --svg: url("/assets/settings-2-f810850f.svg"); }
.icon--frame { --svg: url("/assets/frame-2e1258ea.svg"); }
.icon--chart-pie { --svg: url("/assets/chart-pie-394f6ce8.svg"); }
.icon--map { --svg: url("/assets/map-57ecd54b.svg"); }
.icon--timer { --svg: url("/assets/timer-25f61def.svg"); }
.icon--circle-check-big { --svg: url("/assets/circle-check-big-61473138.svg"); }
.icon--circle-question-mark { --svg: url("/assets/circle-question-mark-1ff9631c.svg"); }
.icon--circle { --svg: url("/assets/circle-bc70c1e3.svg"); }
.icon--circle-off { --svg: url("/assets/circle-off-c4c99bf0.svg"); }
.icon--arrow-up { --svg: url("/assets/arrow-up-5edc57b4.svg"); }
.icon--arrow-down { --svg: url("/assets/arrow-down-b72cd8e3.svg"); }
.icon--arrow-right { --svg: url("/assets/arrow-right-2c379837.svg"); }
.icon--chevrons-right { --svg: url("/assets/chevrons-right-fd90b412.svg"); }
.icon--chevrons-left { --svg: url("/assets/chevrons-left-bd1d76a7.svg"); }