x
1
2
3
4
5
6
<div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Warning"><title>Warning</title> <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg> </div></div>1
<%= midwest_icon(params[:icon] || :warning, params[:label], class: params[:text_size]) %>Playground
This example uses dynamic preview parameters which can be edited live in the Lookbook UI
| Param | Description | Input |
|---|---|---|
|
The list of available icons. |
|
|
|
The text displayed to screen readers. |
|
|
|
Icons and their sizes are controlled by the font-size css rule. Use these Tailwind configured classes! |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Icon/playground
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."