minifyIconSet()

This function is part of Iconify Utils package.

Function minifyIconSet() optimises icon set, reducing file size.

Usage

Function has only one parameter:

• data, IconifyJSON. Icon set data.

Function does not create a new object, it modifies object passed to function.

What exactly does it do?

Icons in icon set have common properties, such as width and height:

json{
   "prefix": "foo",
   "icons": {
       "icon1": {
           "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>",
           "width": 24,
           "height": 24
       },
       "icon2": {
           "body": "<path d=\"M5 13v-1h6V6h1v6h6v1h-6v6h-1v-6H5z\" fill=\"currentColor\"/>",
           "width": 24,
           "height": 24
       },
       "icon3": {
           "body": "<path d=\"M10 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0z\" fill=\"currentColor\"/>",
           "width": 16,
           "height": 16
       }
   }
}

In example above, icons "icon1" and "icon2" have identical width and height. To avoid duplication, these values can be moved to root object:

json{
   "prefix": "foo",
   "icons": {
       "icon1": {
           "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>"
       },
       "icon2": {
           "body": "<path d=\"M5 13v-1h6V6h1v6h6v1h-6v6h-1v-6H5z\" fill=\"currentColor\"/>"
       },
       "icon3": {
           "body": "<path d=\"M10 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0z\" fill=\"currentColor\"/>",
           "width": 16,
           "height": 16
       }
   },
   "width": 24,
   "height": 24
}

Function minifyIconSet() finds common properties in icon set and moves them to root object.

What properties can be minified? Properties defined in IconifyDimensions type: left, top, width and height.

See IconifyJSON type for more information.

In this example difference between original and minified files isn't big, but for large icon sets with thousands of icons it does make a big difference in file size.

Example

usage.ts

tsimport type { IconifyJSON } from '@iconify/types';
import { minifyIconSet } from '@iconify/utils';

// Original data
const data: IconifyJSON = {
   prefix: 'foo',
   icons: {
       icon1: {
           body: '<path d="M7 6v12l10-6z" fill="currentColor"/>',
           width: 24,
           height: 24,
       },
       icon2: {
           body: '<path d="M5 13v-1h6V6h1v6h6v1h-6v6h-1v-6H5z" fill="currentColor"/>',
           width: 24,
           height: 24,
       },
       icon3: {
           body: '<path d="M10 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0z" fill="currentColor"/>',
           width: 16,
           height: 16,
       },
   },
};

// Minify it
minifyIconSet(data);

// Log data
console.log(data);

Result:

json{
   "prefix": "foo",
   "icons": {
       "icon1": {
           "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>"
       },
       "icon2": {
           "body": "<path d=\"M5 13v-1h6V6h1v6h6v1h-6v6h-1v-6H5z\" fill=\"currentColor\"/>"
       },
       "icon3": {
           "body": "<path d=\"M10 8a2 2 0 1 1-4 0a2 2 0 0 1 4 0z\" fill=\"currentColor\"/>",
           "width": 16,
           "height": 16
       }
   },
   "width": 24,
   "height": 24
}