Appearance

IconifyIconCustomisations 类型 ​

IconifyIconCustomisations 类型用于 Iconify Utils 中生成 SVG 的函数。

你可以在 Iconify Utils 源代码 的 src/customisations/defaults.ts 文件中找到此类型。

该类型是一个对象，包含以下属性，已按组划分：

尺寸 ​

图标尺寸的类型为 IconifyIconSizeCustomisations，包含 2 个属性：

类型 IconifyIconSize 是 null|string|number 的别名。可能的值包括：

  • number 以像素为单位的数值。
  • string 带单位的数值，例如 "1em"。

有几个特殊关键字：

  • "auto" 将尺寸设置为图标 viewBox 中的值。因此，如果图标的 viewBox="0 0 24 24"，将 width 设置为 "auto" 会将其设为 24。
  • "unset" 和 "none" 指示函数跳过该属性。这使得在 CSS 中使用 width 和 height 变得很容易。

在计算图标尺寸时，通常只需设置一个尺寸（通常是 height）。另一个尺寸将根据图标的比例自动计算。

如果 width 和 height 均未设置或为 null，默认情况下 height 将设置为 "1em"。

变换 ​

图标可以进行变换。变换是通过旋转或翻转 SVG 内部的内容来完成的，这些不是 CSS 变换。用于变换图标的属性包括：

  • hFlip，boolean。水平翻转图标。
  • vFlip，boolean。垂直翻转图标。
  • rotate，number。以 90 度为步长旋转图标。1 表示 90deg，2 表示 180deg，3 表示 270deg。旋转仅限于这些角度，因为这些角度能保证图标内容不会超出 viewBox 边界。如果你想使用其他角度旋转，请使用 CSS 旋转来旋转包含边界框的整个图标。

如果你只想从自定义配置中提取变换属性，请使用类型 IconifyTransformations。

FullIconifyIconCustomisations 类型 ​

类型 FullIconifyIconCustomisations 与 IconifyIconCustomisations 相同，但所有属性都是必需的。

使用 defaultIconCustomisations 常量获取所有默认值，并将其与你的值合并：

example.ts
tsimport { defaultIconCustomisations } from '@iconify/utils';
import type {
   IconifyIconCustomisations,
   FullIconCustomisations,
} from '@iconify/utils';

// Partial customisations
const customisations: IconifyIconCustomisations = {
   hFlip: true,
};

// Merge with defaults to get full customisations
const fullCustomisations: FullIconCustomisations = {
   ...defaultIconCustomisations,
   ...customisations,
};

console.log(fullCustomisations);

然后，结果可以与 mergeCustomisations() 函数一起使用。

另请参阅 defaultIconCustomisations 常量。