<script>
export let size="24";
export let fill="none";
export let color="var(--color)";
export let light=false;
export let width="2";
export let linecap="round";
export let linejoin="round";
export let name;
export let inactive=false;
export let light_color = 'var(--color)';
</script>

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

  .inactive {
    stroke: var(--color-inactive);
    fill: var(--color-bg);
  }
</style>

<span>
  <svg class="icon-{name}" class:inactive="{inactive}"
  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>
