svelte-bootstrap-svg-icons

Svelte file icon components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
svelte-bootstrap-svg-icons
000.1.64 months ago4 months agoMinified + gzip package size for svelte-bootstrap-svg-icons in KB

Readme

Svelte-Bootstrap-SVG-Icons
npm version license
1660+ SVG file icon components for Svelte. Svelte-bootstrap-svg-icons support major CSS frameworks using the class props.

Original source

twbs/icons

Icon name list

Icon list

Installation

npm i -D svelte-bootstrap-svg-icons

REPL

Demo

Usages

In a svelte file:
<script>
	import { BadgeAr, ClipboardFill } from 'svelte-bootstrap-svg-icons';
</script>

<BadgeAr />
<ClipboardFill />

Size

Use the size prop to change the size of icons.
<BadgeAr size="40" /> <ClipboardFill size="40" />

CSS HEX Colors

Use the color prop to change colors with HEX color code.
<BadgeAr color="#c61515" /> <ClipboardFill color="#3759e5" />

CSS framworks suport

Use the class prop to change size, colors and add additional css.
Tailwind CSS example:
<BadgeAr class="h-24 w-24 text-blue-700 mr-4" />

Bootstrap examples:
<BadgeAr 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.
<BadgeAr class="text-blue-700 dark:text-red-500" />

aria-label

All icons have aria-label. For example BadgeAr has aria-label="badge ar". Use ariaLabel prop to modify the aria-label value.
<BadgeAr ariaLabel="Awesome Badge" />

Passing down other attributes

You can pass other attibutes as well.
<BadgeAr tabindex="0" />

Using svelte:component

<script>
	import { BadgeAr } from 'svelte-bootstrap-svg-icons';
</script>

<svelte:component this="{BadgeAr}" />

Using onMount

<script>
	import { BadgeAr } from 'svelte-bootstrap-svg-icons';
	import { onMount } from 'svelte';
	const props = {
		size: '50',
		color: '#ff0000'
	};
	onMount(() => {
		const icon = new BadgeAr({ target: document.body, props });
	});
</script>

Import all

Use import * as Icon from 'svelte-bootstrap-svg-icons.
<script>
	import * as Icon from 'svelte-bootstrap-svg-icons';
</script>

<Icon.BadgeAr />
<Icon.ClipboardFill />

<h1>Size</h1>
<Icon.BadgeAr size="30" />
<Icon.ClipboardFill size="40" />

<h1>CSS HEX color</h1>
<Icon.BadgeAr color="#c61515" size="40" />

<h1>Tailwind CSS</h1>
<Icon.BadgeAr class="text-blue-500" />
<Icon.ClipboardFill class="text-pink-700" />

Other icons