//$bootstrap-icons: "circle-half", "moon-stars-fill", "brightness-high", "gear", "sun-fill", "tv";

.bi {
  display: inline-block;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;

  mask-size: contain;
  mask-position: 50%;
  mask-repeat: no-repeat;
  background-color: currentColor;

  //@each $icon in $bootstrap-icons {
  //  &.bi-#{$icon} {
  //    mask-image: url("bootstrap-icons/icons/#{$icon}.svg");
  //  }
  ///

  &.bi-circle-half {
    mask-image: url(bootstrap-icons/icons/circle-half.svg);
  }
  &.bi-moon-stars-fill {
    mask-image: url(bootstrap-icons/icons/moon-stars-fill.svg);
  }
  &.bi-brightness-high {
    mask-image: url(bootstrap-icons/icons/brightness-high.svg);
  }
  &.bi-gear {
    mask-image: url(bootstrap-icons/icons/gear.svg);
  }
  &.bi-sun-fill {
    mask-image: url(bootstrap-icons/icons/sun-fill.svg);
  }
  &.bi-tv {
    mask-image: url(bootstrap-icons/icons/tv.svg);
  }
}