diff --git a/packages/svelte/package.json b/packages/svelte/package.json index e7f55ee..af625e9 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -12,9 +12,9 @@ "directory": "packages/svelte" }, "svelte": "dist/Icon.svelte", - "module": "dist/bundle.mjs", - "main": "dist/bundle.js", - "types": "dist/bundle.d.ts", + "module": "dist/index.mjs", + "main": "dist/index.js", + "types": "dist/index.d.ts", "scripts": { "build": "node build", "build:tsc": "tsc -b", diff --git a/packages/svelte/src/Icon.svelte b/packages/svelte/src/Icon.svelte index e792885..70012af 100644 --- a/packages/svelte/src/Icon.svelte +++ b/packages/svelte/src/Icon.svelte @@ -63,8 +63,8 @@ export { // Generate data $: { counter; - const iconData = checkIconState($$props.icon, state, loaded, $$props.onLoad); - data = mounted && iconData ? generateIcon(iconData.data, $$props) : null; + const iconData = checkIconState($$props.icon, state, mounted, loaded, $$props.onLoad); + data = iconData ? generateIcon(iconData.data, $$props) : null; if (data && iconData.classes) { // Add classes data.attributes['class'] = (typeof $$props['class'] === 'string' ? $$props['class'] + ' ' : '') + iconData.classes.join(' '); diff --git a/packages/svelte/src/functions.ts b/packages/svelte/src/functions.ts index 54ec884..0a2deb6 100644 --- a/packages/svelte/src/functions.ts +++ b/packages/svelte/src/functions.ts @@ -330,6 +330,7 @@ export interface CheckIconStateResult { export function checkIconState( icon: string | IconifyIcon, state: IconState, + mounted: boolean, callback: IconStateCallback, onload?: IconifyIconOnLoad ): CheckIconStateResult | null { @@ -367,7 +368,8 @@ export function checkIconState( const data = getIconData(iconName); if (data === null) { // Icon needs to be loaded - if (!state.loading || state.loading.name !== icon) { + // Do not load icon until component is mounted + if (mounted && (!state.loading || state.loading.name !== icon)) { // New icon to load abortLoading(); state.name = '';