Iconify for Vue function: iconLoaded

This tutorial is part of Iconify for Vue functions tutorial.

The function iconLoaded() checks if icon data is available for rendering.

Usage

The function has the following parameter:

• name, string. Icon name.

The function returns boolean value: true if icon data is available, false if icon data is not available.

Example

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

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

This example dynamically loads icon data and renders <slot /> while icon is being loaded. It is redundant because Vue component already does that, but it is used to show how to use iconLoaded() and loadIcons(), though instead of iconLoaded() it is better done with getIcon().

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

export default defineComponent({
 components: {
   Icon,
 },
 props: ["icon"],
 setup() {
   // Variable to store function to cancel loading
   const loader = ref(null);

   // Icon status
   const loaded = ref(null);

   // Function to check if icon data is available
   const check = (icon: string) => {
     const isLoaded = (loaded.value = iconLoaded(icon));

     // Cancel old loder
     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) {
       // Check new value
       this.check(value);
     },
   },
 },
 // Stop loading
 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;
 },
});

Legacy

Note: in old versions of component, this function was named iconExists(). It was the same function, but with bad name.

Because of bad name, some developers assumed it checks if icon exists on Iconify API. It does not. All it does is checks component's storage.

To avoid confusion, function was renamed.