32 lines
854 B
Svelte
32 lines
854 B
Svelte
<script lang="ts">
|
|
/** Class name for additional CSS styling */
|
|
export let clazz = '';
|
|
export { clazz as class };
|
|
|
|
/** Icon color. */
|
|
export let color = 'currentColor';
|
|
|
|
/** Material Design Icons icon name */
|
|
export let mdi: string;
|
|
|
|
/** Icon size. Numbers are treated as `<value>em`, strings as `<value>`. */
|
|
export let size: number | string = 1;
|
|
|
|
let mdiOld = '';
|
|
let path = '';
|
|
|
|
$: loadIcon(mdi);
|
|
|
|
$: width = size ? (typeof size === 'number' || !Number.isNaN(Number(size)) ? `${size}em` : size) : '1em';
|
|
|
|
/** Load the icon from the `$lib/icons` folder. */
|
|
async function loadIcon(mdi: string) {
|
|
if (mdi === mdiOld) return;
|
|
path = (await import(`$lib/icons/${mdi}.ts`)).default;
|
|
}
|
|
</script>
|
|
|
|
<svg class={clazz} viewBox="0 0 24 24" style="width: {width}; height: {width}">
|
|
<path fill={color} d={path} />
|
|
</svg>
|