Packages
corex
0.1.0-rc.1
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
lib/components/heroicon.ex
defmodule Corex.Heroicon do
@moduledoc """
Renders a [Heroicon](https://heroicons.com).
This component requires Tailwind and uses a Tailwind v4 plugin to generate
the `hero-*` utility classes. If you created your app with `mix corex.new` or
`phx.new` you should have it by default. If not, run:
mix corex.heroicon
That adds the plugin to `assets/vendor` and instructs adding to your `app.css`:
@plugin "../vendor/heroicons";
Ensure the `:heroicons` dependency is in your `mix.exs` (e.g.
`{:heroicons, github: "tailwindlabs/heroicons"}`).
"""
@doc type: :component
use Phoenix.Component
@doc """
Renders a Heroicon by class name.
Heroicons come in outline, solid, mini, and micro. Use the default (outline),
or add `-solid`, `-mini`, or `-micro` to the icon name. Customize size and
colors with Tailwind width, height, and color classes.
## Anatomy
<.heroicon name="hero-x-mark" />
<.heroicon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
"""
attr(:name, :string, required: true)
attr(:class, :any, default: "")
attr(:rest, :global)
def heroicon(%{name: "hero-" <> _} = assigns) do
~H"""
<span class={[@name, @class]} {@rest} />
"""
end
end