Appearance

SVG 框架函数 ​

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

Iconify SVG 框架提供了许多函数，你可以在脚本中使用它们来调用 SVG 框架。

使用方法 ​

有两种使用 SVG 框架函数的方法：

  • 通过使用 Iconify 全局变量。
  • 如果你将 SVG 框架与脚本一起打包，可以从 @iconify/iconify 导入 Iconify（或你想导入的具名函数）。

使用 loadIcon 函数的示例：

Browser:
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>
Node.js:
js// Default import for everything
// import Iconify from '@iconify/iconify';

// Named import for specific function
import { loadIcon } from '@iconify/iconify';

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

即使你使用打包方式（如第二个示例所示），Iconify 全局变量依然可用，因为无论以何种方式使用，SVG 框架都会导出函数并创建全局变量。这意味着无论你如何导入 SVG 框架，都可以使用第一个示例中展示的方法。

函数 ​

函数分为以下几组：

点击函数名称查看更多详情和示例。

通用函数 ​

本节仅包含一个函数：

  • getVersion()。此函数返回 SVG 框架的版本字符串。"3.1.1"

获取图标 ​

本节包含以下几个函数：

添加图标 ​

用于向组件添加图标的函数：

注意：通过这些函数添加到组件的图标不会存储在图标数据缓存中。组件仅缓存从 API 获取的图标。

渲染图标 ​

用于生成 SVG 或数据的函数：

扫描和监听 DOM ​

每当 DOM 发生变化时，SVG 框架都会自动进行扫描。但是，存在一些限制：

  • 监听器只能监听 document.body 的子元素。
  • SVG 框架会在每次更改后扫描 DOM（尽管扫描会进行节流处理，以避免过于频繁）。

在某些情况下，你可能希望暂时禁用监听器，或扫描不属于 DOM 的元素（例如 Shadow DOM）。你可以使用以下函数：

辅助函数 ​

公开了一些辅助函数，因为在创建图标选择器等工具时它们可能会很有用：

  • calculateSize()。用于计算图标尺寸的辅助函数。当仅设置 height 时用于计算 width，反之亦然。
  • replaceIDs(html)。随机化生成字符串中的 ID。当基于 renderIcon() 或 getIcon 返回的数据渲染图标时，应使用此函数以确保每个图标内部的元素具有唯一的 ID。对于由 renderSVG() 和 renderHTML() 生成的图标，不需要此函数。

API 函数 ​

内部 API 函数 ​

公开了若干内部 API 函数。它们旨在供需要对组件进行更多控制的开发人员使用。例如，它们被用于 Sketch 和 Figma 插件中。请谨慎使用。

所有内部 API 函数都作为 Iconify._api 对象的属性公开，并且仅在包含 API 时可用：

  • getAPI()。返回内部 API 模块。
  • getAPIConfig()。返回 API 配置。
  • setAPIModule(provider)。为提供商设置 API 模块。这是一个实验性函数，旨在用于自定义 API 提供商。API 提供商功能正在开发中。