mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
38 lines
888 B
Svelte
38 lines
888 B
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>
|