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.

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" />

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" />

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

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.