.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.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-a65898c7.svg"); }
.icon--chevron-right { --svg: url("/assets/chevron-right-63c462ab.svg"); }
.icon--ellipsis { --svg: url("/assets/ellipsis-a6a4aa61.svg"); }
.icon--chevrons-up-down { --svg: url("/assets/chevrons-up-down-dc468896.svg"); }
.icon--menu { --svg: url("/assets/menu-5b8caef9.svg"); }
.icon--x { --svg: url("/assets/x-2fabf707.svg"); }
.icon--search { --svg: url("/assets/search-fe0b57ec.svg"); }
.icon--copy { --svg: url("/assets/copy-6b663b6e.svg"); }
.icon--download { --svg: url("/assets/download-608a6c77.svg"); }
.icon--share { --svg: url("/assets/share-163488c0.svg"); }
.icon--camera { --svg: url("/assets/camera-84102100.svg"); }
.icon--minus { --svg: url("/assets/minus-b71b2ac1.svg"); }
.icon--sun { --svg: url("sun.svg"); }
.icon--moon { --svg: url("moon.svg"); }

/****************************************************************
* Showcase icons
*****************************************************************/
.icon--terminal { --svg: url("terminal.svg"); }
.icon--circle-alert { --svg: url("circle-alert.svg"); }
.icon--grip-vertical { --svg: url("grip-vertical.svg"); }
.icon--circle-plus { --svg: url("circle-plus.svg"); }
.icon--calendar { --svg: url("calendar.svg"); }
.icon--smile { --svg: url("smile.svg"); }
.icon--calculator { --svg: url("calculator.svg"); }
.icon--user { --svg: url("user.svg"); }
.icon--credit-card { --svg: url("credit-card.svg"); }
.icon--settings { --svg: url("/assets/settings-4fb8e0ad.svg"); }
.icon--circle-check { --svg: url("circle-check.svg"); }
.icon--circle-user { --svg: url("circle-user.svg"); }
.icon--sliders-vertical { --svg: url("sliders-vertical.svg"); }
.icon--zap { --svg: url("zap.svg"); }
.icon--app-window { --svg: url("app-window.svg"); }
.icon--code { --svg: url("code.svg"); }
.icon--italic { --svg: url("italic.svg"); }
.icon--bold { --svg: url("bold.svg"); }
.icon--circle-slash { --svg: url("/assets/circle-slash-0a841062.svg"); }
.icon--gallery-vertical-end { --svg: url("gallery-vertical-end.svg"); }
.icon--square-terminal { --svg: url("/assets/square-terminal-76ac3793.svg"); }
.icon--bot { --svg: url("/assets/bot-c9a2d0cd.svg"); }
.icon--book-open { --svg: url("/assets/book-open-f712ff45.svg"); }
.icon--settings-2 { --svg: url("/assets/settings-2-5b29fbba.svg"); }
.icon--frame { --svg: url("/assets/frame-f4f76e6f.svg"); }
.icon--chart-pie { --svg: url("/assets/chart-pie-5d101e1e.svg"); }
.icon--map { --svg: url("/assets/map-226e585f.svg"); }
.icon--timer { --svg: url("timer.svg"); }
.icon--circle-check-big { --svg: url("circle-check-big.svg"); }
.icon--circle-question-mark { --svg: url("circle-question-mark.svg"); }
.icon--circle { --svg: url("circle.svg"); }
.icon--circle-off { --svg: url("circle-off.svg"); }
.icon--arrow-up { --svg: url("arrow-up.svg"); }
.icon--arrow-down { --svg: url("arrow-down.svg"); }
.icon--arrow-right { --svg: url("/assets/arrow-right-2e20af60.svg"); }
.icon--chevrons-right { --svg: url("/assets/chevrons-right-41fb50f2.svg"); }
.icon--chevrons-left { --svg: url("/assets/chevrons-left-5426e988.svg"); }