Props - Flowbite Svelte Icons v2

Outline/Solid Icons #

All icons are extended SVGAttributes from svelte/elements.

- size?: "xs" | "sm" | "md" | "lg" | "xl" = ctx.size || 'md';
- role?: string = ctx.role || 'img';
- color?: string;
- strokeWidth?: string = ctx.strokeWidth || '2'; // only for Outline icons
- title?: TitleType;
- desc?: DescType;
- ariaLabel?: string ="<icon file name>"
- class?: string;
- ...restProps

Types #

type TitleType = {
  id?: string;
  title?: string;
};
type DescType = {
  id?: string;
  desc?: string;
};

interface BaseProps {
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  color?: string;
  strokeWidth?: string; // only for Outline icons
  class?: string;
}

interface CtxType extends BaseProps {}
interface Props extends BaseProps{
  title?: TitleType;
  desc?: DescType;
  ariaLabel?: string;
}

Size #

The following table provides details about the available sizes for icons:

Size  CSS classes
xs    'w-3 h-3'
sm    'w-4 h-4'
md    'w-5 h-5'
lg    'w-6 h-6'
xl    'w-8 h-8'

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

<AddressBookOutline size="md" />

If you want to override the preconfigured size, you can add a custom size using Tailwind CSS by including the desired classes in the class prop. For example:

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

Color #

You can apply Tailwind CSS color directly to the icon component or its parent tag using the class prop.

<AddressBookOutline 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">
  <AddressBookOutline size="md" />
</div>

CSS HEX Colors #

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

<HeartSolid color="#17d336" size="md"/>

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.

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

A11y #

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

<AddressBookOutline ariaLabel="address card outline" />

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

<HeartSolid
  title={{ id: 'my-title', title: 'Red heart' }}
  desc={{ id: 'my-descrip', desc: 'The shape of a red heart' }}
  ariaLabel="red heart"
  color="red"
/>

Passing down other attributes #

Since all icons have ...restProps, you can pass other SVGAttributes.

<AddressBookOutline id="my-svg" transform="rotate(45)" class='dark:text-white hover:cursor-pointer' onclick={() => alert('hello')}/>