Packages
mishka_chelekom
0.0.9
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
priv/components/icon.eex
defmodule <%= @module %> do
@moduledoc """
The `<%= @module %>` module provides a flexible and reusable icon
component for rendering various types of icons in a Phoenix LiveView application.
## Features:
- Supports multiple icon libraries (Hero Icons)
- Flexible size control with predefined and custom sizing options
- Customizable colors with theme integration
- Supports both filled and outlined icon variants
- Automatic accessibility attributes for better screen reader support
- Animatable with CSS classes
- Optional click handlers and interactive states
## Examples:
<.<%= @component_prefix %>icon name="hero-home" class="w-6 h-6" />
<.<%= @component_prefix %>icon name="fa-github" variant="brands" size="lg" />
<.<%= @component_prefix %>icon name="material-settings" color="primary" animate="spin" />
## Properties:
- `name` - Required. The identifier of the icon to display
- `variant` - Optional. The style variant of the icon (solid, outline, brands)
- `size` - Optional. Size of the icon (sm, md, lg, xl, or custom class)
- `color` - Optional. Theme color or custom color class
- `class` - Optional. Additional CSS classes
- `animate` - Optional. Animation class to apply
- `aria_label` - Optional. Accessibility label for screen readers
- `rest` - Additional HTML attributes passed to the icon element
"""
use Phoenix.Component
@doc """
Renders a [Heroicon](https://heroicons.com).
Heroicons come in three styles – outline, solid, and mini.
By default, the outline style is used, but solid and mini may
be applied by using the `-solid` and `-mini` suffix.
You can customize the size and colors of the icons by setting
width, height, and background color classes.
Icons are extracted from the `deps/heroicons` directory and bundled within
your compiled app.css by the plugin in your `assets/tailwind.config.js`.
## Examples
<.<%= @component_prefix %>icon name="hero-x-mark-solid" />
<.<%= @component_prefix %>icon name="hero-arrow-path" class="ml-1 w-3 h-3 animate-spin" />
"""
@doc type: :component
attr :name, :string, required: true
attr :class, :any, default: nil
attr :rest, :global,
doc:
"Global attributes can define defaults which are merged with attributes provided by the caller"
def <%= @component_prefix %>icon(%{name: "hero-" <> _} = assigns) do
~H"""
<span class={[@name, @class]} {@rest} />
"""
end
end