IconifyIcon type

All Iconify libraries share common object structures. They are described as types in @iconify/types NPM package.

For description of types and short explanation of TypeScript see types documentation.

This article describes IconifyIcon type that contains data for one icon.

Usage

Icon data in IconifyIcon type is usually extracted from IconifyJSON icon set.

To extract icon data in your code, use getIconData() function from Iconify Utils. Iconify Utils can be used in any environment.

To convert SVG to IconifyIcon, you can use getIcon() function of SVG instance from Iconify Tools. Iconify Tools is a Node.js package for importing and parsing icons. Make sure you clean up icon before exporting it.

Structure

Type IconifyIcon is a simple object. It has two parts:

• body, string contains icon content, mandatory.
• Optional IconifyOptional properties that contain icon dimensions and basic transformations.

Example of a basic icon:

json{
 "body": "<path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8 9.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3z\"/>"
}

Body

Body contains contents of <svg>, without <svg> tag.

It does not include <svg> tag because:

• Contents can be manipulated, such as rotating or flipping an icon. This is much easier to do when there is no need to parse an entire <svg>.
• It gives components full control over <svg> tag, allowing addition/removal of custom attributes.
• Makes it easy to use in various frameworks (such as React, Vue, Svelte), where <svg> element is created using framework's native code and content is set as its property.

Optional properties

There are several properties that are shared in multiple types. They are described in IconifyOptional type.

Properties for viewBox:

• left, number. Left position of viewBox. Default value is 0.
• top, number. Top position of viewBox. Default value is 0.
• width, number. Width of viewBox. Default value is 16.
• height, number. Height of viewBox. Default value is 16.

Transformations:

• rotate, number. Number of 90 degrees rotations. Default value is 0.
• hFlip, boolean. Horizontal flip. Default value is false.
• vFlip, boolean. Vertical flip. Default value is false.

Example of typical icon data:

json{
 "body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>",
 "width": 24,
 "height": 24
}

In your code you can get default values from defaultIconProps constant from Iconify Utils.