Layout Icon
A contained icon to be used to differentiate layout components.
<x-layout.icon icon="heroicon-o-cube-transparent" />
| Attribute |
Default |
Description |
style |
primary |
string
Possible values primary, secondary or outline. |
size |
default |
string
Possible values default, xs, sm, or lg. |
Control the icon style by supplying the style="" attribute.
<div class="flex items-start justify-center gap-8 max-md:flex-col">
<x-layout.icon icon="heroicon-o-cube-transparent" />
<x-layout.icon icon="heroicon-o-cube-transparent" style="secondary" />
<x-layout.icon icon="heroicon-o-cube-transparent" style="outline" />
</div>
Control the icon size by supplying the size="" attribute.
<div class="flex items-start justify-center gap-8 max-md:flex-col">
<x-layout.icon icon="heroicon-o-cube-transparent" size="xs" />
<x-layout.icon icon="heroicon-o-cube-transparent" size="sm" />
<x-layout.icon icon="heroicon-o-cube-transparent" />
<x-layout.icon icon="heroicon-o-cube-transparent" size="lg" />
</div>