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.
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.
Type IconifyIcon is a simple object. It has two parts:
- body, string contains icon content, mandatory.
- Optional IconifyOptional properties that contain icon dimensions and transformations.
Example of a basic icon:
"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 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.
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.
- 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:
"body": "<path d=\"M7 6v12l10-6z\" fill=\"currentColor\"/>",
In your code you can get default values from defaultIconProps constant from Iconify Utils.