Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="flex items-end gap-4 p-8">
  <div class="flex flex-col items-center gap-1">
    <div class="midwest-icon size-xs">
      <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="Star"><title>Star</title>
          <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z"></path></svg>
      </div>
    </div>
    <span class="text-xs text-gray-500">xs</span>
  </div>
  <div class="flex flex-col items-center gap-1">
    <div class="midwest-icon size-sm">
      <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="Star"><title>Star</title>
          <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z"></path></svg>
      </div>
    </div>
    <span class="text-xs text-gray-500">sm</span>
  </div>
  <div class="flex flex-col items-center gap-1">
    <div class="midwest-icon size-default">
      <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="Star"><title>Star</title>
          <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z"></path></svg>
      </div>
    </div>
    <span class="text-xs text-gray-500">default</span>
  </div>
  <div class="flex flex-col items-center gap-1">
    <div class="midwest-icon size-lg">
      <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="Star"><title>Star</title>
          <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z"></path></svg>
      </div>
    </div>
    <span class="text-xs text-gray-500">lg</span>
  </div>
  <div class="flex flex-col items-center gap-1">
    <div class="midwest-icon size-xl">
      <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="Star"><title>Star</title>
          <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z"></path></svg>
      </div>
    </div>
    <span class="text-xs text-gray-500">xl</span>
  </div>
  <div class="flex flex-col items-center gap-1">
    <div class="midwest-icon size-2xl">
      <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="Star"><title>Star</title>
          <path d="M394 480a16 16 0 01-9.39-3L256 383.76 127.39 477a16 16 0 01-24.55-18.08L153 310.35 23 221.2a16 16 0 019-29.2h160.38l48.4-148.95a16 16 0 0130.44 0l48.4 149H480a16 16 0 019.05 29.2L359 310.35l50.13 148.53A16 16 0 01394 480z"></path></svg>
      </div>
    </div>
    <span class="text-xs text-gray-500">2xl</span>
  </div>
</div>
1
2
3
4
5
6
7
8
<div class="flex items-end gap-4 p-8">
  <% %i[xs sm default lg xl 2xl].each do |s| %>
    <div class="flex flex-col items-center gap-1">
      <%= midwest_icon(:star, size: s) %>
      <span class="text-xs text-gray-500"><%= s %></span>
    </div>
  <% end %>
</div>

Sizes

Use size: to set the icon to a predefined scale rather than relying on inherited font-size. Available sizes: xs, sm, default, lg, xl, 2xl.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Icon/sizes

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."