# `LineaUI.Components.Icon`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/icon.ex#L1)

Icons: Hugeicons Stroke Rounded by name, and the small glyphs LineaUI's own components draw (the cross of a
toast, the chevron of a select, the check of a checkbox, the tools of the text editor).

    <.icon name="huge-search-01" class="size-4" />
    <.glyph name={:chevron_down} class="size-4" />

`icon/1` draws `huge-*` classes from Hugeicons (the free Stroke Rounded set, which the app vendors and
`assets/css/hugeicons.cjs` turns into classes; see the README) and passes any other class name through, so
`name="fa-solid fa-house"` works with Font Awesome. Write the name in full, never interpolated, or Tailwind
cannot see the class.

`glyph/1` is for the components: it draws LineOne's own SVG by default and the matching Hugeicons icon when the
app sets

    config :linea_ui, :icons, :hugeicons

The setting is read when the page renders; the hooks that draw glyphs in the browser read it from the
`data-icons` attribute of their element (see `icon_set/0`). The table below is mirrored in
`assets/js/linea_ui/lib/glyphs.js` for the glyphs those hooks draw, and a test keeps the two equal.

The big two-tone icons of the sidebar, the arrows of tooltips and popovers and the spinner are artwork, not
glyphs, and stay as they are in every set.

# `glyph`

One of the glyphs LineaUI's components draw, in the icon set of the app.

    <.glyph name={:chevron_down} class="size-4" />
    <.glyph name={:calendar} class="size-5" stroke_width="1.5" />

## Attributes

* `name` (`:atom`) (required) - Must be one of `:close`, `:editor_picker_background`, `:editor_bold`, `:check`, `:plus`, `:moon`, `:editor_script_super`, `:calendar`, `:editor_list_bullet`, `:editor_align_justify`, `:editor_align_right`, `:editor_list_ordered`, `:editor_indent_plus1`, `:editor_direction_active`, `:apps`, `:editor_italic`, `:angle_left`, `:editor_clean`, `:editor_code`, `:chevron_up`, `:editor_script_sub`, `:angle_right`, `:editor_direction`, `:editor_align_left`, `:chevron_right_solid`, `:sun`, `:bell`, `:editor_dropdown`, `:editor_link`, `:editor_blockquote`, `:search`, `:clock`, `:chevron_right`, `:chevron_down_solid`, `:editor_underline`, `:editor_header_2`, `:search_solid`, `:close_solid`, `:chevron_down`, `:carousel_arrow`, `:editor_strike`, `:editor_header_1`, `:editor_code_block`, `:filter`, `:editor_picker_align`, `:dots_horizontal`, `:editor_indent_minus1`, `:chevron_left`, `:editor_align_center`, `:dots_vertical`, `:editor_picker_color`, or `:minus`.
* `class` (`:any`) - Defaults to `"size-4"`.
* `stroke_width` (`:any`) - Only for LineOne's stroked SVGs; Hugeicons draw their own. Defaults to `"2"`.
* Global attributes are accepted.

# `glyph_names`

```elixir
@spec glyph_names() :: [atom()]
```

The glyph names `glyph/1` knows.

# `glyph_table`

```elixir
@spec glyph_table(:lineone | :hugeicons) :: %{required(atom()) =&gt; map() | String.t()}
```

The glyph table of an icon set: `:lineone` maps names to `%{view, paint, body}`, `:hugeicons` to class names.

# `icon`

A Hugeicons icon by class name, or any other icon font class.
## Attributes

* `name` (`:string`) (required) - `huge-search-01`, or any class such as `fa-solid fa-house`.
* `class` (`:any`) - Defaults to `"size-5"`.
* Global attributes are accepted.

# `icon_set`

```elixir
@spec icon_set() :: :lineone | :hugeicons
```

The icon set the app asked for: `:lineone` (the default) or `:hugeicons`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*