Appearance

IconifyAlias 类型 ​

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

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

本文介绍 IconifyAlias 类型。

IconifyAlias 类型 ​

IconifyAlias 类型表示图标的别名。它用于 Iconify JSON 文件中。

什么是别名？别名是复用另一个图标属性的图标。

arrow-left 可以是启用了水平翻转的 arrow-right 的别名。 当现有形状可以通过简单变换复用时，无需创建新形状。

battery-empty 可以是没有任何更改的 battery-0 的别名。 这使得为同一个图标分配多个名称成为可能。

结构 ​

IconifyAlias 类型与 IconifyIcon 类似。

属性：

  • parent，string。父图标的名称，必填。

其他属性来自 IconifyOptional 类型，它们与 IconifyIcon 类型共享。

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。

父图标 ​

父图标名称不应包含图标集前缀，且父图标必须存在于该图标集中。

如果使用另一个别名作为父级，请确保不存在循环依赖。 例如，如果 arrow-left 是 arrow-right（带水平翻转）的别名， 而 arrow-right 又是 arrow-up（旋转 90 度）的别名， 而 arrow-up 又是 arrow-down（带垂直翻转）的别名， 那么 arrow-down 就不能是 arrow-left 的别名，因为那样会形成循环。

为安全起见，请仅使用图标作为父级，不要使用其他别名。

合并图标和别名的属性 ​

如果在合并属性时，图标别名具有父图标也拥有的属性，则适用以下规则：

  • hFlip 和 vFlip。结果为 icon.hFlip !== alias.hFlip。这意味着如果图标和别名都进行了水平翻转，则结果将不会翻转（水平翻转 + 水平翻转相互抵消）。如果只有一项进行了水平翻转，则结果将翻转（水平翻转 + 无翻转 = 水平翻转）。
  • rotate。结果为旋转角度的总和。这意味着 90 度旋转 + 180 度旋转 = 270 度旋转。

对于所有其他属性，别名将覆盖父图标的值。

合并图标和别名的示例：

图标：
json{
   "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>",
   "width": 24,
   "height": 24,
   "hFlip": true
}
别名：
json{
   "parent": "icon1",
   "hFlip": true,
   "vFlip": true
}
合并后：
json{
   "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>",
   "width": 24,
   "height": 24,
   "parent": "icon1",
   "hFlip": false,
   "vFlip": true
}

在上面的示例中，hFlip + hFlip = false，!vFlip /* 默认值 */ + vFlip = true，图标别名覆盖了其他属性。

示例 ​

IconifyAlias：
json{
   "parent": "arrow-left",
   "hFlip": true
}
IconifyJSON：
json{
   "prefix": "bi",
   "icons": {
       "arrow-left": {
           "body": "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.854 4.646a.5.5 0 0 1 0 .708L3.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z\"/><path fill-rule=\"evenodd\" d=\"M2.5 8a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z\"/></g>",
           "width": 16,
           "height": 16
       }
   },
   "aliases": {
       "arrow-right": {
           "parent": "arrow-left",
           "hFlip": true
       }
   }
}
合并后的 "arrow-right" 图标（作为 IconifyIcon）：
json{
   "body": "<g fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M5.854 4.646a.5.5 0 0 1 0 .708L3.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z\"/><path fill-rule=\"evenodd\" d=\"M2.5 8a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z\"/></g>",
   "width": 16,
   "height": 16,
   "hFlip": true
}
IconifyAlias：
json{
   "parent": "house"
}
IconifyJSON：
json{
   "prefix": "mdi",
   "icons": {
       "house": {
           "body": "<path d=\"M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z\" fill=\"currentColor\"/>",
           "width": 24,
           "height": 24
       }
   },
   "aliases": {
       "home": {
           "parent": "house"
       }
   }
}
合并后的 "home" 图标（作为 IconifyIcon）：
json{
   "body": "<path d=\"M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z\" fill=\"currentColor\"/>",
   "width": 24,
   "height": 24
}
IconifyAlias：
json{
   "parent": "house",
   "width": 32,
   "height": 32,
   "left": -4,
   "top": -4
}
IconifyJSON：
json{
   "prefix": "mdi",
   "icons": {
       "house": {
           "body": "<path d=\"M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z\" fill=\"currentColor\"/>",
           "width": 24,
           "height": 24
       }
   },
   "aliases": {
       "house-32": {
           "parent": "house",
           "width": 32,
           "height": 32,
           "left": -4,
           "top": -4
       }
   }
}
合并后的 "house-32" 图标（作为 IconifyIcon）：
json{
   "body": "<path d=\"M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z\" fill=\"currentColor\"/>",
   "width": 32,
   "height": 32,
   "left": -4,
   "top": -4
}