@import "_icons-feather";

@function icon($name: "feather", $style: ""){
  $filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white) !default;
  $stroke-width: 2 !default;
  $stroke-linecap: round !default;
  $stroke-linejoin: round !default;
  $fill: none !default;
  $stroke: currentColor !default;
  $width: 24 !default;
  $height: 24 !default;
  $viewBox: 0 0 $width $height !default;
  $xmlns: "http://www.w3.org/2000/svg" !default;
  $style: "filter: #{$filter}; stroke-width: #{$stroke-width}; stroke-linecap: #{$stroke-linecap}; stroke-linejoin: #{$stroke-linejoin}; fill: none; stroke: #{$stroke};#{$style}";
  $icon-uri: url('data:image/svg+xml;utf8,<svg xmlns="#{$xmlns}" width="#{$width}" height="#{$height}" viewBox="#{$viewBox}" style="#{$style}">#{map-get($icon-svg-contents,$name)}</svg>');
  @return $icon-uri

}

// Can add any names from here -> https://feathericons.com/ 
$iconNames: ( "download", "bell", "filter", "log-in", "log-out", "mail", "map", "minus-square", "plus-square", "sun", "moon" );

:root {
  @each $iconName in $iconNames {
    --icon-uri-#{$iconName}: #{icon($name: $iconName)};
  }
  --icon-uri-external-link: #{icon($name: "feather", $style: "rotate: 270deg;")};
}