setVariation()

此函数属于 Iconify Tools 中的 IconSet 类。

函数 setVariation() 向图标集添加新的图标变体，或覆盖现有项。

变体

图标变体是基于其他图标创建的项，但至少应用了一种变换。

例如，在启用 hFlip 的情况下，"arrow-left" 可以是 "arrow-right" 的变体。

变体使得维护基于其他图标的图标变得更加容易，并减少内容重复。

用法

该函数具有以下参数：

• name，string。图标名称。
• parent，string。父项名称。
• props，CommonIconProps。图标变换。

函数在成功时返回简单的 true，失败时返回 false。

示例

example.ts

tsimport { blankIconSet } from '@iconify/tools';

// Create icon set, add few icons
const iconSet = blankIconSet('test-prefix');
iconSet.setIcon('add', {
   body: '<path d="M17 15V8h-2v7H8v2h7v7h2v-7h7v-2z" fill="currentColor"/>',
   width: 32,
   height: 32,
});

iconSet.setIcon('caret-down', {
   body: '<path d="M24 12l-8 10l-8-10z" fill="currentColor"/>',
   width: 32,
   height: 32,
});
iconSet.setVariation('caret-up', 'caret-down', {
   vFlip: true,
});

iconSet.setAlias('plus', 'add');

// Export icon set
const data = iconSet.export();
console.log(JSON.stringify(data, null, '\t'));

Result:

json{
   "prefix": "test-prefix",
   "icons": {
       "add": {
           "body": "<path d=\"M17 15V8h-2v7H8v2h7v7h2v-7h7v-2z\" fill=\"currentColor\"/>"
       },
       "caret-down": {
           "body": "<path d=\"M24 12l-8 10l-8-10z\" fill=\"currentColor\"/>"
       }
   },
   "aliases": {
       "caret-up": {
           "parent": "caret-down",
           "vFlip": true
       },
       "plus": {
           "parent": "add"
       }
   },
   "width": 32,
   "height": 32
}