Iconify for Svelte 函数：iconLoaded

本教程属于 Iconify for Svelte 函数教程 的一部分。

函数 iconLoaded() 检查图标数据是否可用于渲染。

用法

该函数包含以下参数：

• name，string。图标名称。

该函数返回 boolean 值：如果图标数据可用，则返回 true；如果图标数据不可用，则返回 false。

示例

此示例在图标加载期间渲染 fallback 代码片段。

svelte<script lang="ts">
   import Icon, { iconLoaded, loadIcons, type IconifyIconLoaderAbort }from '@iconify/svelte';
   import{ onDestroy }from 'svelte';

   // Icon to render and fallback children
   let{ icon, fallback } = $props();

   // Icon status and cleanup function
   let loaded = $state(false);
   let cleanup: IconifyIconLoaderAbort | null = null;
   let update = $state(0);

   $effect(() =>{
       // Mention update to re-run this effect when state changes
       update;

       // Get icon data
       loaded = iconLoaded(icon);

       // Cancel previous callback
       if (cleanup) {
           cleanup();
           cleanup = null;
       }

       // Load icon
       if (!loaded) {
           cleanup = loadIcons([icon], () => {
               // Trigger re-running of code above
               update ++;
           });
       }
   })

   // Cleanup
   onDestroy(() =>{
       if (cleanup) {
           cleanup();
       }
   })
</script>

{#if loaded}
   <Icon icon={icon} />
{:else}
   {@render fallback?.()}
{/if}


使用示例：

svelte<IconWrapper icon="mdi-light:alert">
   {#snippet fallback()}
       <small>!</small>
   {/snippet}
</IconWrapper>


此示例使用 iconLoaded() 来展示该函数，但为此目的，最好使用 getIcon()。有关更好的示例，请参阅 getIcon() 文档。

旧版

注意：在组件的旧版本中，此函数名为 iconExists()。它是同一个函数，只是命名不当。

由于命名不当，部分开发者误以为该函数会检查图标是否存在于 Iconify API 中。事实并非如此。它所做的仅仅是检查组件的存储。

为避免混淆，该函数已被重命名。