agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-07 15:44:05 +00:00
Code Issues Releases Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/svelte/package.json
View File

@ -12,9 +12,9 @@
"directory": "packages/svelte" "directory": "packages/svelte"
}, },
"svelte": "dist/Icon.svelte", "svelte": "dist/Icon.svelte",
"module": "dist/bundle.mjs", "module": "dist/index.mjs",
"main": "dist/bundle.js", "main": "dist/index.js",
"types": "dist/bundle.d.ts", "types": "dist/index.d.ts",
"scripts": { "scripts": {
"build": "node build", "build": "node build",
"build:tsc": "tsc -b", "build:tsc": "tsc -b",

4
packages/svelte/src/Icon.svelte
View File

@ -63,8 +63,8 @@ export {
// Generate data // Generate data
$: { $: {
counter; counter;
const iconData = checkIconState($$props.icon, state, loaded, $$props.onLoad); const iconData = checkIconState($$props.icon, state, mounted, loaded, $$props.onLoad);
data = mounted && iconData ? generateIcon(iconData.data, $$props) : null; data = iconData ? generateIcon(iconData.data, $$props) : null;
if (data && iconData.classes) { if (data && iconData.classes) {
// Add classes // Add classes
data.attributes['class'] = (typeof $$props['class'] === 'string' ? $$props['class'] + ' ' : '') + iconData.classes.join(' '); data.attributes['class'] = (typeof $$props['class'] === 'string' ? $$props['class'] + ' ' : '') + iconData.classes.join(' ');

4
packages/svelte/src/functions.ts
View File

@ -330,6 +330,7 @@ export interface CheckIconStateResult {
export function checkIconState( export function checkIconState(
icon: string | IconifyIcon, icon: string | IconifyIcon,
state: IconState, state: IconState,
mounted: boolean,
callback: IconStateCallback, callback: IconStateCallback,
onload?: IconifyIconOnLoad onload?: IconifyIconOnLoad
): CheckIconStateResult | null { ): CheckIconStateResult | null {
@ -367,7 +368,8 @@ export function checkIconState(
const data = getIconData(iconName); const data = getIconData(iconName);
if (data === null) { if (data === null) {
// Icon needs to be loaded // 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 // New icon to load
abortLoading(); abortLoading();
state.name = ''; state.name = '';