Appearance

Web 组件函数：loadIcon ​

本教程属于 Iconify Icon Web 组件教程 的一部分。

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

它返回 Promise 实例，使其在异步代码中非常易于使用。

何时使用此函数：

  • 当你在异步函数内部需要获取图标数据时。

何时不应使用此函数：

  • 预加载多个稍后使用的图标。请改用 loadIcons()。

使用相同的图标名称多次调用该函数是安全的，组件不会从 Iconify API 重复加载图标数据。如果将 string 类型的图标名称作为参数传递，多次调用该函数将返回相同的 Promise 实例。

用法 ​

该函数包含以下参数：

该函数返回一个 Promise 实例，成功时将返回图标的 FullIconifyIcon 数据。

IconifyIconName 类型 ​

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

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

示例 ​

使用 Promise 语法：

jsimport { loadIcon } from 'iconify-icon';

const iconName = 'mdi:home';
loadIcon(iconName)
   .then((data) => {
       console.log(
           `Icon ${iconName} have been loaded and is ready to be renderered.`
       );
       console.log(data);
   })
   .catch((err) => {
       console.log(`Icon ${iconName} does not exist.`);
   });

Async/await 语法：

jsimport { loadIcon } from 'iconify-icon';

/**
* Usage example in async function
*/
async function test() {
   try {
       const data = await loadIcon('mdi:home');
       console.log('Loaded home icon!');
   } catch (err) {
       console.error('Failed to load home icon');
   }
}
test();

如果您想加载多个图标，请参阅 loadIcons()。