2021-04-30 17:10:03 +00:00
|
|
|
<script>
|
2021-05-01 20:38:56 +00:00
|
|
|
import { onMount, onDestroy } from 'svelte';
|
|
|
|
import { checkIconState, generateIcon } from './functions';
|
|
|
|
|
|
|
|
// State
|
|
|
|
const state = {
|
|
|
|
// Last icon name
|
|
|
|
name: '',
|
|
|
|
|
|
|
|
// Loading status
|
|
|
|
loading: null,
|
2021-05-10 15:29:30 +00:00
|
|
|
|
|
|
|
// Destroyed status
|
|
|
|
destroyed: false,
|
2021-05-01 20:38:56 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// Mounted status
|
|
|
|
let mounted = false;
|
|
|
|
|
|
|
|
// Callback counter
|
|
|
|
let counter = 0;
|
2021-04-30 17:10:03 +00:00
|
|
|
|
|
|
|
// Generated data
|
|
|
|
let data;
|
|
|
|
|
2021-05-01 20:38:56 +00:00
|
|
|
// Generate data
|
2021-04-30 17:10:03 +00:00
|
|
|
$: {
|
2021-05-01 20:38:56 +00:00
|
|
|
counter;
|
2021-05-10 15:29:30 +00:00
|
|
|
data = mounted ? generateIcon(checkIconState($$props.icon, state, loaded, $$props.onLoad), $$props) : null;
|
2021-04-30 17:10:03 +00:00
|
|
|
}
|
2021-05-01 20:38:56 +00:00
|
|
|
|
|
|
|
// Increase counter when loaded to force re-calculation of data
|
|
|
|
function loaded() {
|
|
|
|
counter ++;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Force re-render
|
|
|
|
onMount(() => {
|
|
|
|
mounted = true;
|
|
|
|
});
|
|
|
|
|
|
|
|
// Abort loading when component is destroyed
|
|
|
|
onDestroy(() => {
|
2021-05-10 15:29:30 +00:00
|
|
|
state.destroyed = true;
|
2021-05-01 20:38:56 +00:00
|
|
|
if (state.loading) {
|
|
|
|
state.loading.abort();
|
|
|
|
state.loading = null;
|
|
|
|
}
|
|
|
|
})
|
2021-04-30 17:10:03 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
{#if data === null}
|
|
|
|
<slot />
|
|
|
|
{:else}
|
|
|
|
<svg {...data.attributes}>
|
|
|
|
{@html data.body}
|
|
|
|
</svg>
|
|
|
|
{/if}
|