The component does not make assumptions about the icon library. Instead, it allows you to reference functions from libraries or custom functions that render SVG icons.

Maturity: Refining

Usage

Configuration

For icon libraries that define a separate function component for each individual icon such as heroicons, you need to set the icon_module option.

defmodule MyAppWeb.CoreComponents do
  use Doggo.Components
  use Phoenix.Component

  build_icon(icon_module: Heroicons)
end

The name attribute passed to the generated icon component needs to reference a function component in the configured module.

<.icon name="bug_ant" text="report bug" />

In this example, the icon component will use Heroicons.bug_ant/1 to render the SVG icon in its inner markup.

Names are internally normalized by replacing dashes with underscores. Therefore, both name="bug_ant" and name="bug-ant" will work.

For icon libraries that expose a single function component, you can additionally set the icon_fun option.

build_icon(icon_module: MyIcons, icon_fun: :render)

In that case, the generated icon component will pass the name attribute on to the referenced function component.

<.icon name="circle-question" text="help" />

In this example, the generated markup will be similar to:

<span class="icon">
  <MyIcons.render name="circle-question" />
</span>

Text display

Render an icon with visually hidden text:

<.icon name="bug_ant" text="report bug" />

To display the text visibly:

<.icon name="bug_ant" text="report bug" text_position="after" />

Or:

<.icon name="bug_ant" text="report bug" text_position="before" />

The text_position attribute values are chosen to work with both left-to-right and right-to-left languages. Refer to the CSS example for applying the position correctly.

aria-hidden {: .info}

Not all icon libraries set the aria-hidden attribute by default. Always make sure that it is set on the <svg> element that the library renders.