Doggo Storybook 0.9.0

Icon

Renders a customizable icon using a slot for SVG content.

Read more Read less

This component does not bind you to a specific set of icons. Instead, it provides a slot for inserting SVG content from any icon library you choose.

Usage

Render an icon with visually hidden text using the heroicons library:

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

To display the text visibly:

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

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.

Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
rest :global Any additional HTML attributes.
text :string Text that describes the icon.
text_position :string Position of the text relative to the icon. If set to `"hidden"`, the `text` is visually hidden, but still accessible to screen readers. "hidden"
Required inner_block * :slot Slot for the SVG element. 
<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  class="lucide lucide-info"
  aria-hidden="true"
>
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 16v-4"/>
  <path d="M12 8h.01"/>
</svg>