···1919 we build on. You will use it for layout, sizing, flexbox, grid, and
2020 spacing.
21212222- * [Heroicons](https://heroicons.com) - see `icon/1` for usage.
2323-2422 * [Phoenix.Component](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html) -
2523 the component system used by Phoenix. Some components, such as `<.link>`
2624 and `<.form>`, are defined there.
···6361 @kind == :info && "alert-info",
6462 @kind == :error && "alert-error"
6563 ]}>
6666- <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
6767- <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
6864 <div>
6965 <p :if={@title} class="font-semibold">{@title}</p>
7066 <p>{msg}</p>
7167 </div>
7268 <div class="flex-1" />
7369 <button type="button" class="group self-start cursor-pointer" aria-label="close">
7474- <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
7070+ x
7571 </button>
7672 </div>
7773 </div>
···298294 defp error(assigns) do
299295 ~H"""
300296 <p class="mt-1.5 flex gap-2 items-center text-sm text-error">
301301- <.icon name="hero-exclamation-circle" class="size-5" />
302297 {render_slot(@inner_block)}
303298 </p>
304299 """
···414409 </div>
415410 </li>
416411 </ul>
417417- """
418418- end
419419-420420- @doc """
421421- Renders a [Heroicon](https://heroicons.com).
422422-423423- Heroicons come in three styles – outline, solid, and mini.
424424- By default, the outline style is used, but solid and mini may
425425- be applied by using the `-solid` and `-mini` suffix.
426426-427427- You can customize the size and colors of the icons by setting
428428- width, height, and background color classes.
429429-430430- Icons are extracted from the `deps/heroicons` directory and bundled within
431431- your compiled app.css by the plugin in `assets/vendor/heroicons.js`.
432432-433433- ## Examples
434434-435435- <.icon name="hero-x-mark" />
436436- <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
437437- """
438438- attr :name, :string, required: true
439439- attr :class, :any, default: "size-4"
440440-441441- def icon(%{name: "hero-" <> _} = assigns) do
442442- ~H"""
443443- <span class={[@name, @class]} />
444412 """
445413 end
446414