Appearance

IconifyIcon 类型 ​

所有 Iconify 库都共享通用的对象结构。它们在 @iconify/types NPM 包中被定义为类型。

有关类型的描述和 TypeScript 的简要说明，请参阅类型文档。

本文介绍了包含单个图标数据的 IconifyIcon 类型。

用法 ​

IconifyIcon 类型中的图标数据通常从 IconifyJSON 图标集中提取。

要在代码中提取图标数据，请使用 Iconify Utils 中的 getIconData() 函数。Iconify Utils 可在任何环境中使用。

要将 SVG 转换为 IconifyIcon，你可以使用 Iconify Tools 中 SVG 实例的 getIcon() 函数。Iconify Tools 是一个用于导入和解析图标的 Node.js 包。在导出之前，请确保清理图标。

结构 ​

IconifyIcon 类型是一个简单的对象。它包含两部分：

  • body，string 类型，包含图标内容，必填。
  • 可选的 IconifyOptional 属性，包含图标尺寸和基本变换。

基础图标示例：

json{
 "body": "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 9.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3z\"/>"
}

主体 ​

主体包含 <svg> 的内容，但不包含 <svg> 标签本身。

不包含 <svg> 标签的原因如下：

  • 可以对内容进行操作，例如旋转或翻转图标。当无需解析整个 <svg> 时，这会容易得多。
  • 它使组件能够完全控制 <svg> 标签，允许添加/移除自定义属性。
  • 便于在各种框架（如 React、Vue、Svelte）中使用，这些框架中 <svg> 元素是使用框架的原生代码创建的，内容则作为其属性进行设置。

可选属性 ​

有多个属性在多种类型中共享。它们在 IconifyOptional 类型中进行了描述。

viewBox 的属性：

  • left，number。viewBox 的左侧位置。默认值为 0。
  • top，number。viewBox 的顶部位置。默认值为 0。
  • width，number。viewBox 的宽度。默认值为 16。
  • height，number。viewBox 的高度。默认值为 16。

变换：

  • rotate，number。90 度旋转的次数。默认值为 0。
  • hFlip，boolean。水平翻转。默认值为 false。
  • vFlip，boolean。垂直翻转。默认值为 false。

典型图标数据示例：

json{
 "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>",
 "width": 24,
 "height": 24
}

在你的代码中，你可以从 Iconify Utils 的 defaultIconProps 常量中获取默认值。