<script>
export let size="24";
export let fill="none";
export let color="#1f314d";
export let light=false;
export let width="2";
export let linecap="round";
export let linejoin="round";
export let name;
export let responsive=false;
export let inactive=false;
export let tooltip="";
export let tooltip_right=false;
export let tooltip_bottom=false;
export let tooltip_left=false;
export let light_color="#f8f9f6";
</script>

<style lang="scss">
  @import 'sass/_variables';

  .inactive {
    stroke: $gray-color;
    fill: $gray-color-light;
  }
</style>

<span class:tooltip="{tooltip !== ''}"  class:tooltip-bottom="{ tooltip_bottom }" class:tooltip-left="{ tooltip_left }" class:tooltip-right={ tooltip_right } data-tooltip="{tooltip}">
  <svg class="icon-{name}" class:inactive="{inactive}" class:img-responsive="{responsive}" data-tooltip="{tooltip}"
  width="{size}"
  height="{size}"
  fill="{fill}"
  stroke="{light ? light_color : color}"
  stroke-width="{width}"
  stroke-linecap="{linecap}"
  stroke-linejoin="{linejoin}"
>
  <use xlink:href="/icons/feather-sprite.svg#{name}"/>
</svg>
</span>
