.icon1 {
  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-position: center;
  mask-repeat: no-repeat;
  mask-size: var(--icon-size, 1rem);
  pointer-events: none;
  user-select: none;
}

/* img.icon { */
/*   background: none; */
/* } */

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

/****************************************************************
* Lucide (https://lucide.dev)
* Open-source icon library with a consistent style
*****************************************************************/
.icon--camera { --svg: url("camera.svg"); }
.icon--chevron-left { --svg: url("chevron-left.svg"); }
.icon--chevron-right { --svg: url("chevron-right.svg"); }
.icon--chevrons-up-down { --svg: url("chevrons-up-down.svg"); }
.icon--circle-alert { --svg: url("circle-alert.svg"); }
.icon--circle-check { --svg: url("circle-check.svg"); }
.icon--copy { --svg: url("copy.svg"); }
.icon--download { --svg: url("download.svg"); }
.icon--ellipsis { --svg: url("ellipsis.svg"); }
.icon--minus { --svg: url("minus.svg"); }
.icon--moon { --svg: url("moon.svg"); }
.icon--panel-left { --svg: url("panel-left.svg"); }
.icon--search { --svg: url("search.svg"); }
.icon--share { --svg: url("share.svg"); }
.icon--sun { --svg: url("sun.svg"); }
.icon--x { --svg: url("x.svg"); }

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}