x
1
2
3
4
5
6
<div class="midwest-icon text-6xl text-theme-6 theme-blue"> <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="Alert for the Experience"><title>Alert for the Experience</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(:'warning', "Alert for the Experience", class: "text-6xl text-theme-#{params[:color_step] || 6} theme-#{params[:theme] || "blue"}" ) %>Recoloring Icons
Recoloring iconography
| Param | Description | Input |
|---|---|---|
|
The Color Step used in text-theme-${step} |
|
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Color System/recoloring_icons
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."