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.

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 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

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

Why not store entire <svg>? 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 <svg> tag.
  • 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.

What if you need to set custom attributes to <svg>? You shouldn't need to do that. Components should have full control over <svg>, setting all events, ids, titles, customizing viewBox, appending additional shapes. If you want to set something like fill or stroke, wrap contents in <g> tag with those attributes.

Optional properties

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

IconifyOptional is a simple object with the following properties, all properties are optional:

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:

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