Icon Component

An icon component is an SVG component that:

• is styled to be seen as a character with our icon class.
• accept a size attribute to set the width and height at once

And it's one way of rendering an icon.

Example / Usage

• Store your icon in the image directory
• Use the Icon element

markdown⎘ Copy
A right arrow circle <Icon src="arrow-right-circle.svg" size="20"/>

Output:

A right arrow circle

Props

All standard SVG attributes can be applied as props. See the list of SVG Presentation Attributes on MDN.

Markdown Support

This component is registered as Markdown component and can be used in a markdown page

Vertical Alignement

By default, the vertical alignment is set to baseline but you can change it with any vertical-align tailwind class

markdown⎘ Copy
Bottom Aligned Arrow  <Icon src="arrow-right-circle.svg" class="align-bottom" size="20"/>

Output:

Bottom Aligned Arrow

Why another styling?

By default, styling systems set the svg as being a block image and not as a character. Example with preflight preset

The icon component makes it a character by applying the following properties:

css⎘ Copy
.icon {
    display: inline-block;
    vertical-align: baseline;
}