Appearance

SVG 框架函数：loadIcon ​

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

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

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

何时使用此函数：

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

何时不应使用此函数：

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

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

用法 ​

该函数包含以下参数：

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

IconifyIconName 类型 ​

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

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

示例 ​

使用 Promise 语法：

html<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
<script>
   Iconify.loadIcon('mdi:home')
       .then((data) => {
           console.log('Loaded home icon!');
       })
       .catch((err) => {
           console.error('Failed to load home icon');
       });
</script>

Async/await 语法：

jstry {
   const data = await Iconify.loadIcon('mdi:home');
   console.log('Loaded home icon!');
} catch (err) {
   console.error('Failed to load home icon');
}

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