setVariation()

This function is part of IconSet class in Iconify Tools.

Function setVariation() adds new icon variation to icon set or overwrites existing item.

Variation

Icon variation is an item that is based on different icon, but has at least one transformation applied to it.

For example, "arrow-left" can be a variation of "arrow-right" with hFlip enabled.

Variations make it easier to maintain icons that are based on other icons and reduce content duplication.

Usage

Function has the following parameters:

• name, string. Icon name.
• parent, string. Parent item name.
• props, CommonIconProps. Icon transformations.

Function returns a simple true on success, false on failure.

Example

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
}