- 1.5.0

Icon Sprite

Renders an icon using an SVG sprite.

Read more Read less

Maturity: Refining

Usage

Render an icon with visually hidden text:

<.icon name="arrow-left" text="Go back" />

To display the text visibly:

<.icon name="arrow-left" text="Go back" text_position={:right} />
Default
Open in playground 
<.icon_sprite name="user" />
<.icon_sprite name="heart" />
<.icon_sprite name="settings" />
With text (ltr)
Open in playground
text after icon text before icon text hidden 
<.icon_sprite name="user" text="text after icon" text_position="after" />
<.icon_sprite name="heart" text="text before icon" text_position="before" />
<.icon_sprite name="settings" text="text hidden" text_position="hidden" />
With text (rtl)
Open in playground
متن بعد از نماد
متن قبل از نماد
متن مخفی 
<div dir="rtl">
  <.icon_sprite name="user" text="متن بعد از نماد" text_position="after" />
</div>

<div dir="rtl">
  <.icon_sprite name="heart" text="متن قبل از نماد" text_position="before" />
</div>

<div dir="rtl">
  <.icon_sprite name="settings" text="متن مخفی" text_position="hidden" />
</div>