Iconify for Vue 函数：iconLoaded

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

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

用法

该函数包含以下参数：

• name，string。图标名称。

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

示例

jsimport { iconLoaded } from "@iconify/vue";

const icon = "bi:arrow-left";
console.log(`Is ${icon} available?`, iconLoaded(icon) ? "yes" : "no");

此示例在图标加载期间动态加载图标数据并渲染 <slot />。由于 Vue 组件本身已经实现了该功能，因此这显得有些多余，但此处用于展示如何使用 iconLoaded() 和 loadIcons()。不过，相较于使用 iconLoaded()，使用 getIcon() 会是更好的做法。

jsimport { Icon, iconLoaded, loadIcons } from "@iconify/vue";
import { h, defineComponent, ref } from "vue";

export default defineComponent({
 components: {
   Icon,
 },
 props: ["icon"],
 setup() {
   // 用于存储取消加载函数的变量
   const loader = ref(null);

   // 图标状态
   const loaded = ref(null);

   // 检查图标数据是否可用的函数
   const check = (icon: string) => {
     const isLoaded = (loaded.value = iconLoaded(icon));

     // 取消旧的加载器
     if (loader.value) {
       loader.value();
       loader.value = null;
     }

     if (!isLoaded) {
       loader.value = loadIcons([icon], () => {
         loaded.value = iconLoaded(icon);
       });
     }
   };
   return {
     loader,
     loaded,
     check,
   };
 },
 watch: {
   icon: {
     immediate: true,
     handler(value) {
       // 检查新值
       this.check(value);
     },
   },
 },
 // 停止加载
 unmounted() {
   const loader = this.loader.value;
   if (loader) {
     loader();
   }
 },
 render() {
   const loaded = this.loaded;
   if (loaded) {
     return h(Icon, {
       icon: this.icon,
     });
   }
   return this.$slots.default ? this.$slots.default() : null;
 },
});

旧版

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

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

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