Props - Svelte Remix v2

Props #

- size = ctx.size || '24'
- role = ctx.role || 'img'
- color = ctx.color || 'currentColor'
- title
- desc
- ariaLabel =  "wheelchair fill Others"
- class, id, name, role, and all other props from SVGAttributes

Types #

All icons are extended SVGAttributes from svelte/elements.

import type { SVGAttributes } from 'svelte/elements';
type TitleType = {
  id?: string;
  title?: string;
};

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

interface BaseProps extends SVGAttributes<SVGElement>{
  size?: string;
  role?: string;
  color?: string;
}

export interface CtxType extends BaseProps {}

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

Size #

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

<AttachmentLineBusiness size="40" />

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

<AttachmentLineBusiness class="h-24 w-24" />

Colors #

Use the color props to change colors with HEX color code or HTML color names:

<AttachmentLineBusiness color="#ff0000" />
<AttachmentLineBusiness color="green" />

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 #

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

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

Bootstrap #

<AttachmentLineBusiness 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.

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

A11y #

All icons have aria-label. For example AttachmentLineBusiness has aria-label="attachment line business". Use ariaLabel prop to modify the aria-label value.

<AttachmentLineBusiness ariaLabel="business attachement icon with blue color" color="blue"/>

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

<AttachmentLineBusiness
  title={{ id: 'my-title', title: 'A blue attachment icon' }}
  desc={{ id: 'my-descrip', desc: 'A business attachement icon with blue color' }}
  ariaLabel="attachement icon"
  color="blue"
/>

Passing down other attributes #

As default all icons are extend SVGAttributes SVGElement. You can add all the events and other props described in the type.

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