Appearance

SVG 框架函数：loadIcons ​

本教程是 Iconify SVG 框架函数教程 的一部分。

函数 loadIcons() 从 Iconify API 检索图标。

何时使用此函数：

  • 预加载多个稍后将使用的图标。这将确保在需要时图标数据已可用，并且加载速度更快。
  • 如果你需要在图标数据可用后立即获取。例如，在渲染自定义组件时。但是，如果你只需要加载单个图标，还有更易用的 loadIcon()。

此函数是预加载已知将来会用到的图标的最有效方式。它会批量从 Iconify API 加载图标数据，从而减少查询次数。

使用相同的图标名称多次调用该函数是安全的，组件不会从 Iconify API 重复加载图标数据。如果你设置了回调参数，即使图标是通过其他 loadIcons() 调用加载的，回调也会被正确触发，从而确保回调的可靠性。

用法 ​

该函数包含以下参数：

  • icons，(string|IconifyIconName)[]。要加载的图标列表。
  • callback，function。可选的回调函数。该回调不仅在所有图标获取完成时调用，在部分图标获取完成时也会调用。

该函数返回一个 function，你可以使用它来停止加载图标。例如，当你在自定义组件中加载图标，但图标尚未加载完成时组件的生命周期就已结束，此时就需要使用它来移除回调。

图标列表 ​

图标列表是一个数组。每个元素可以是字符串，例如 mdi:home，或 IconifyIconName 对象。

回调函数 ​

可选回调函数包含以下参数：

  • loaded，IconifyIconName[]。已加载的图标列表。
  • missing，IconifyIconName[]。API 上不可用的图标列表。
  • pending，IconifyIconName[]。仍在加载中的图标列表。
  • unsubscribe，function。用于取消加载的函数。它与调用 loadIcons() 的返回值相同。

IconifyIconName 类型 ​

IconifyIconName 是一个简单的对象，包含以下属性，所有属性均为必填：

  • provider，string。API 提供商。对于公共 Iconify API，该值为空字符串 ""。
  • prefix，string。图标集前缀。
  • name，string。图标名称。

示例 ​

加载单个图标的简单回调：

jsconst iconName = 'mdi:home';
Iconify.loadIcons([iconName], (loaded, missing, pending, unsubscribe) => {
   if (loaded.length) {
       console.log(
           `Icon ${iconName} have been loaded and is ready to be renderered.`
       );
       return;
   }

   if (missing.length) {
       console.log(`Icon ${iconName} does not exist.`);
       return;
   }

   if (pending.length) {
       // 在此示例中，待处理的图标列表为空。
       // 如果使用多个图标调用 loadIcons()，待处理列表可能不为空，但对于单个图标，它始终为空。
       //
       // 当发生某些变化时会调用回调函数，对于 1 个图标，只有 2 种变化类型：图标已加载或图标缺失。
   }
});

loadIcons() 的异步版本：

js/**
* 加载图标的函数，返回 Promise
*/
function loadIcons(icons) {
   return new Promise((fulfill, reject) => {
       Iconify.loadIcons(icons, (loaded, missing, pending, unsubscribe) => {
           if (pending.length) {
               // 图标正在处理中，等待全部加载成功或失败
               return;
           }
           if (missing.length) {
               reject({
                   loaded,
                   missing,
               });
           } else {
               fulfill({
                   loaded,
               });
           }
       });
   });
}

/**
* 在异步函数中的使用示例
*/
async function test() {
   await loadIcons(['jam:info', 'cil:locomotive', 'cil:paper-plane']).catch(
       (err) => {
           console.error('Failed to load icons:', err.missing);
       }
   );

   // 对已加载的图标进行操作
   console.log('Loaded!');
}
test();

如果你只想加载单个图标，还可以使用更易用的 loadIcon()。