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.

Usage

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

See getIconData() function from Iconify Utils.

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.

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
}