All Iconify libraries share common object structures. They are described as types inNPM package.
For description of types and short explanation of TypeScript see types documentation.
This article describestype.
Icon data intype is usually extracted from icon set.
Typeis a simple object. It has two parts:
- body, contains icon content, mandatory.
- Optional 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, without tag.
It does not includetag 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 .
- It gives components full control over tag, allowing addition/removal of custom attributes.
- Makes it easy to use in various frameworks (such as React, Vue, Svelte), where 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 intype.
Properties for viewBox:
- left, . Left position of viewBox. Default value is 0.
- top, . Top position of viewBox. Default value is 0.
- width, . Width of viewBox. Default value is 16.
- height, . Height of viewBox. Default value is 16.
- rotate, . Number of 90 degrees rotations. Default value is 0.
- hFlip, . Horizontal flip. Default value is false.
- vFlip, . 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.