6.8 KiB
title, summary, banner, description
| title | summary | banner | description |
|---|---|---|---|
| Switch icon | The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version. | icons | Transition between two icons smoothly. |
Default markup
The icon transition is triggered by adding an .active class to the switch-icon component.
{% capture html -%} {% include "ui/icon.html" icon="heart" %} {% include "ui/icon.html" icon="heart-filled" %} {%- endcapture %} {% include "docs/example.html" html=html %}
Switch animations
You can also add a fancy animation to add variety to your button. See demo below:
{% capture html -%} {% include "ui/icon.html" icon="circle" %} {% include "ui/icon.html" icon="circle-filled" %} {% include "ui/icon.html" icon="heart" %} {% include "ui/icon.html" icon="heart-filled" %} {% include "ui/icon.html" icon="star" %} {% include "ui/icon.html" icon="star-filled" %} {% include "ui/icon.html" icon="thumb-up" %} {% include "ui/icon.html" icon="thumb-up-filled" %} {%- endcapture %} {% include "docs/example.html" html=html %}