boredgame/src/lib/components/Icon.svelte

<script lang="ts">
  import feather from 'feather-icons';
  export const directions: string[] = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];

  export let name: string;
  export let direction: string = 'n';
  export let strokeWidth: string | number;
  export let stroke: string | number;
  export let width: string = '1em';
  export let height: string = '1em';

  $: icon = feather.icons[name];
  $: rotation = directions.indexOf(direction) * 45;
  $: if (icon) {
    if (stroke) icon.attrs['stroke'] = stroke;
    if (strokeWidth) icon.attrs['stroke-width'] = strokeWidth;
  }
</script>

{#if icon}
  <svg {...icon.attrs} style="width: {width}; height: {height}; transform: rotate({rotation}deg);">
    <g>
      {@html icon.contents}
    </g>
  </svg>
{/if}

<style>
  svg {
    width: 1em;
    height: 1em;
    overflow: visible;
    transform-origin: 50% 50%;
  }
</style>