Props - Svelte Ant Design Icons v1

Props #

- size = ctx.size || '24';
- role = ctx.role || 'img';
- color = ctx.color || 'currentColor';
- ariaLabel = '<icon file name>';

Size #

To change the size of an icon, use the size prop and specify the desired size. For example:

<AppstoreAddOutlined size="40" />

Add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:

<AppstoreAddOutlined class="h-24 w-24 text-blue-700 mr-4" />

CSS HEX Color #

Use the color attribute to change colors with HEX color code for Filled and Outlined components.

<AppstoreAddOutlined color="#ff0000" size="md" />

CSS framework #

You can apply CSS framework color and other attributes directly to the icon component or its parent tag using the class prop.

Tailwind CSS #

<AppstoreAddOutlined size="md" class="text-red-700 dark:text-green-300 inline m-1" />

<div class="text-red-700 dark:text-green-300 inline m-1">
  <AppstoreAddOutlined size="md" />
</div>

Bootstrap #

<AppstoreAddOutlined class="position-absolute top-0 px-1" />

Dark mode #

If you are using the dark mode on your website with Tailwind CSS, add your dark mode class to the class prop.

Let's use dark for the dark mode class as an example.

<AppstoreAddOutlined class="text-blue-700 dark:text-red-500" />

A11y #

All icons have aria-label. For example AddressBookSolid has aria-label="addressbook solid". Use ariaLabel prop to modify the aria-label value.

<AppstoreAddOutlined ariaLabel="address card outline" />

Use title, desc, and ariaLabel props to make your icons accessible.

<AppstoreAddOutlined
title={{ id: 'my-title', title: 'Red app store icon' }}
desc={{ id: 'my-descrip', desc: 'The shape of three squares and a plus.' }}
ariaLabel="red app store icon"
color="red"
/>

withEvents #

As default all icons are unfocusable. However you can add withEvents prop to make your icons focusable.

<AppstoreAddOutlined withEvents on:click={handleClick}/>

It is possible to add tabindex="0", but it is not recommended for A11y. If you want to use it add withEvents prop as well.

<AppstoreAddOutlined tabindex="0" withEvents />

Events #

Use withEvents prop to use the following events:

- on:click
- on:keydown
- on:keyup
- on:focus
- on:blur
- on:mouseenter
- on:mouseleave
- on:mouseover
- on:mouseout

<AppstoreAddOutlined withEvents on:click={handleClick} />

Passing down other attributes #

Since all icons have ...$$restProps, you can pass other attibutes as well.

<AppstoreAddOutlined id="my-svg" transform="rotate(45)" />