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.
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.
Why not store entire? Because:
- Contents can be manipulated, such as rotating or flipping an icon. This is much easier to do when there is no need to strip tag.
- 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.
What if you need to set custom attributes to viewBox, appending additional shapes. If you want to set something like fill or stroke, wrap contents in tag with those attributes.? You shouldn't need to do that. Components should have full control over , setting all events, ids, titles, customizing
There are several properties that are shared in multiple types. They are described intype.
is a simple object with the following properties, all properties are optional:
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\"/>",