57 lines
1.1 KiB
Svelte
57 lines
1.1 KiB
Svelte
<svelte:options accessors={true} />
|
|
|
|
<script>
|
|
const types = {
|
|
mdi: {
|
|
size: 24,
|
|
viewbox: "0 0 24 24",
|
|
},
|
|
"simple-icons": {
|
|
size: 24,
|
|
viewbox: "0 0 24 24",
|
|
},
|
|
default: {
|
|
size: 0,
|
|
viewbox: "0 0 0 0",
|
|
},
|
|
};
|
|
|
|
export let type = null;
|
|
export let path;
|
|
export let size = null;
|
|
export let viewbox = null;
|
|
export let flip = "none";
|
|
export let rotate = 0;
|
|
export let padding = 0;
|
|
|
|
// Reactive statements to set default values based on type
|
|
$: defaults = types[type] || types.default;
|
|
$: sizeValue = size || defaults.size;
|
|
$: viewboxValue = viewbox || defaults.viewbox;
|
|
$: sx = ["both", "horizontal"].includes(flip) ? "-1" : "1";
|
|
$: sy = ["both", "vertical"].includes(flip) ? "-1" : "1";
|
|
$: r = isNaN(rotate) ? rotate : rotate + "deg";
|
|
|
|
export let svgElement; // To expose the reference
|
|
</script>
|
|
|
|
<svg
|
|
bind:this={svgElement}
|
|
width={sizeValue}
|
|
height="auto"
|
|
viewBox={viewboxValue}
|
|
style="--sx: {sx}; --sy: {sy}; --r: {r}; padding: {padding}px"
|
|
{...$$restProps}
|
|
>
|
|
<path d={path} />
|
|
</svg>
|
|
|
|
<style>
|
|
svg {
|
|
transform: rotate(var(--r, 0deg)) scale(var(--sx, 1), var(--sy, 1));
|
|
}
|
|
|
|
path {
|
|
fill: currentColor;
|
|
}
|
|
</style>
|