DÁP Design System - Icon webcomponent

Icon

Icon component is a web component that displays an icon.

Examples

Default Icon

<dap-ds-icon name="arrow-down-line" />

Sizes

Icon component has built in sizes. Can be xs, sm, md, lg, xl, xxl. Default is md. You can also set the size in pixels using the staticSize attribute.

<dap-ds-stack direction="row">
    <dap-ds-icon name="arrow-down-line" size="xs" />
    <dap-ds-icon name="arrow-down-line" size="sm" />
    <dap-ds-icon name="arrow-down-line" />
    <dap-ds-icon name="arrow-down-line" size="lg" />
    <dap-ds-icon name="arrow-down-line" size="xl" />
    <dap-ds-icon name="arrow-down-line" size="xxl" />
    <dap-ds-icon name="arrow-down-line" staticSize="70" />
  </dap-ds-stack>

Custom icon

You can also use custom icons by adding the svg code inside the icon tag. The easiest way to do this is to copy the svg code from the icon you want to use from the Remix Icon website.

<dap-ds-icon size="lg">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor">
      <path
        d="M4 12H7C8.10457 12 9 12.8954 9 14V19C9 20.1046 8.10457 21 7 21H4C2.89543 21 2 20.1046 2 19V12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12V19C22 20.1046 21.1046 21 20 21H17C15.8954 21 15 20.1046 15 19V14C15 12.8954 15.8954 12 17 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12Z"></path>
    </svg>
  </dap-ds-icon>

Dedicated icon components

All the built in icons have their own dedicated components. You can use them like this:

<dap-ds-icon-xxx />

<dap-ds-stack direction="row" >
  <dap-ds-icon-checkbox-circle-fill />
  <dap-ds-icon-arrow-down-line size="70" />
</dap-ds-stack>

Available icons

Arrows

Buildings

Document

Others

System

Importing

import { DapDSIcon } from 'dap-design-system/dist/dds'

Importing React

import { DapDSIconReact } from 'dap-design-system/dist/react'

Slots

Name	Description
`(default)`	The content of the icon for custom svg icons.

Attributes

Property	Type	Default	Description
`name`	`string`		The name of the icon.
`size`	`IconSize`	`'md'`	The size of the icon. Default is `md`. Can be `lg`, `md`, `sm`, or `xs`.
`focusable`	`boolean`	`false`	Whether the icon is focusable. Default is false.
`ariaHidden`	`boolean`		Whether the icon is hidden from the accessibility tree. Default is true.
`staticSize`	`number`		The size of the icon in pixels. This overrides the size attribute.

Events

No custom events available.

CSS Parts

No CSS parts available.