48 lines
965 B
Svelte
48 lines
965 B
Svelte
<script lang="ts">
|
|
import {replaceIcons, isLucideIcon} from "../../ts/icons.js";
|
|
import {afterUpdate, onMount} from "svelte";
|
|
|
|
export let name: string;
|
|
|
|
onMount(() => {
|
|
replaceIcons(true);
|
|
});
|
|
|
|
afterUpdate(() => {
|
|
replaceIcons(false);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
:global(.icon) {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
flex-shrink: 0;
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
|
|
--icon-size: 16px;
|
|
font-size: var(--icon-size);
|
|
stroke: currentColor;
|
|
stroke-width: 2;
|
|
stroke-linecap: square;
|
|
stroke-linejoin: miter;
|
|
fill: none;
|
|
vertical-align: middle;
|
|
|
|
h1 > &, h2 > &, h3 > & {
|
|
--icon-size: 24px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
{#if name}
|
|
{#if isLucideIcon(name) >= 0 }
|
|
<i icon-name="{name}" class="icon" aria-hidden="true" {...$$restProps}></i>
|
|
{:else}
|
|
<i class="{name} icon" aria-hidden="true" {...$$restProps}></i>
|
|
{/if}
|
|
{/if}
|