README.md

# PhoenixIconify

Phoenix components for [Iconify](https://iconify.design) icons with compile-time discovery.

Access 200,000+ icons from 150+ icon sets. Browse available icons at [icon-sets.iconify.design](https://icon-sets.iconify.design).

## Features

- **Compile-time discovery** - Icons are automatically detected from your templates
- **On-demand fetching** - Only icons you use are downloaded
- **Zero runtime overhead** - Icons are embedded at compile time
- **LiveView optimized** - Minimal diffs, only attributes change

## Installation

Add `phoenix_iconify` to your list of dependencies in `mix.exs`:

```elixir
def deps do
  [
    {:phoenix_iconify, "~> 0.1.0"}
  ]
end
```

Add the compiler to your project:

```elixir
def project do
  [
    compilers: Mix.compilers() ++ [:phoenix_iconify],
    # ...
  ]
end
```

## Usage

Import the component in your web module (`lib/my_app_web.ex`):

```elixir
defp html_helpers do
  quote do
    import PhoenixIconify, only: [icon: 1]
    # ...
  end
end
```

Use icons in your templates:

```heex
<.icon name="heroicons:user" />
<.icon name="heroicons:user" class="w-6 h-6 text-blue-500" />
<.icon name="lucide:home" id="home-icon" />
```

## How It Works

1. You use `<.icon name="heroicons:user" />` in your templates
2. During compilation, the compiler scans for icon component calls
3. It extracts literal icon names from the `name` attribute
4. Missing icons are fetched from the Iconify API
5. Icons are cached in `priv/iconify/manifest.etf`
6. At runtime, icons are loaded from the manifest

## Icon Names

Icons use the format `prefix:icon-name`:

- `heroicons:user` - Heroicons user icon
- `heroicons:user-solid` - Heroicons solid user
- `lucide:home` - Lucide home icon
- `mdi:account` - Material Design Icons account

Browse all icons at [icon-sets.iconify.design](https://icon-sets.iconify.design).

## Configuration

```elixir
# config/config.exs
config :phoenix_iconify,
  # Pre-register icons for dynamic usage (e.g., icons from database)
  extra_icons: ["heroicons:check", "heroicons:x-mark"],
  
  # Fallback icon when requested icon is not found
  fallback: "heroicons:question-mark-circle",
  
  # Log warnings when icons are not found (default: true)
  warn_on_missing: true
```

## Caching

Icon sets are cached locally in `priv/iconify/sets/` to avoid repeated downloads.

```bash
# Pre-fetch icon sets for faster subsequent compiles
mix phoenix_iconify.cache fetch

# List cached sets
mix phoenix_iconify.cache list

# Clear cache
mix phoenix_iconify.cache clear

# Show statistics
mix phoenix_iconify.stats
```

## Dynamic Icons

For icons that can't be discovered at compile time (e.g., from database):

```elixir
config :phoenix_iconify,
  extra_icons: [
    "heroicons:check",
    "heroicons:x-mark",
    "heroicons:exclamation-triangle"
  ]
```

## Mix Tasks

```bash
mix phoenix_iconify           # Show help
mix phoenix_iconify.stats     # Show statistics
mix phoenix_iconify.list      # List icons in manifest
mix phoenix_iconify.cache     # Cache management
```

## License

MIT