2
0
mirror of https://github.com/iconify/iconify.git synced 2025-01-06 07:20:40 +00:00

Render Svelte component immediately if icon data is available, fix typos in Svelte component's package.json

This commit is contained in:
Vjacheslav Trushkin 2021-05-14 22:29:43 +03:00
parent 93c93a3330
commit 60e48a82e0
3 changed files with 8 additions and 6 deletions

View File

@ -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",

View File

@ -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(' ');

View File

@ -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 = '';