···19 we build on. You will use it for layout, sizing, flexbox, grid, and
20 spacing.
2122- * [Heroicons](https://heroicons.com) - see `icon/1` for usage.
23-24 * [Phoenix.Component](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html) -
25 the component system used by Phoenix. Some components, such as `<.link>`
26 and `<.form>`, are defined there.
···63 @kind == :info && "alert-info",
64 @kind == :error && "alert-error"
65 ]}>
66- <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
67- <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
68 <div>
69 <p :if={@title} class="font-semibold">{@title}</p>
70 <p>{msg}</p>
71 </div>
72 <div class="flex-1" />
73 <button type="button" class="group self-start cursor-pointer" aria-label="close">
74- <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
75 </button>
76 </div>
77 </div>
···298 defp error(assigns) do
299 ~H"""
300 <p class="mt-1.5 flex gap-2 items-center text-sm text-error">
301- <.icon name="hero-exclamation-circle" class="size-5" />
302 {render_slot(@inner_block)}
303 </p>
304 """
···414 </div>
415 </li>
416 </ul>
417- """
418- end
419-420- @doc """
421- Renders a [Heroicon](https://heroicons.com).
422-423- Heroicons come in three styles – outline, solid, and mini.
424- By default, the outline style is used, but solid and mini may
425- be applied by using the `-solid` and `-mini` suffix.
426-427- You can customize the size and colors of the icons by setting
428- width, height, and background color classes.
429-430- Icons are extracted from the `deps/heroicons` directory and bundled within
431- your compiled app.css by the plugin in `assets/vendor/heroicons.js`.
432-433- ## Examples
434-435- <.icon name="hero-x-mark" />
436- <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
437- """
438- attr :name, :string, required: true
439- attr :class, :any, default: "size-4"
440-441- def icon(%{name: "hero-" <> _} = assigns) do
442- ~H"""
443- <span class={[@name, @class]} />
444 """
445 end
446
···19 we build on. You will use it for layout, sizing, flexbox, grid, and
20 spacing.
210022 * [Phoenix.Component](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html) -
23 the component system used by Phoenix. Some components, such as `<.link>`
24 and `<.form>`, are defined there.
···61 @kind == :info && "alert-info",
62 @kind == :error && "alert-error"
63 ]}>
0064 <div>
65 <p :if={@title} class="font-semibold">{@title}</p>
66 <p>{msg}</p>
67 </div>
68 <div class="flex-1" />
69 <button type="button" class="group self-start cursor-pointer" aria-label="close">
70+ x
71 </button>
72 </div>
73 </div>
···294 defp error(assigns) do
295 ~H"""
296 <p class="mt-1.5 flex gap-2 items-center text-sm text-error">
0297 {render_slot(@inner_block)}
298 </p>
299 """
···409 </div>
410 </li>
411 </ul>
000000000000000000000000000412 """
413 end
414