Svelte Bootstrap SVG Icons

Svelte-Bootstrap-SVG-Icons

1950+ SVG file icon components for Svelte. Svelte-bootstrap-svg-icons support major CSS frameworks using the class props.

To improve compilation speed, import the icon directly. This can help reduce processing time and improve overall performance.

Thank you for considering my open-source package. If you use it in a commercial project, please support me by sponsoring me on GitHub: https://github.com/sponsors/shinokada. Your support helps me maintain and improve this package for the benefit of the community.

Installation

npm i -D svelte-bootstrap-svg-icons

REPL

Demo

Icon name list

Icon list

Icon images

Usages

In a svelte file:

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

<BadgeAr />

Faster compiling

If you need only a few icons from this library in your Svelte app, import them directly. This can optimize compilation speed and improve performance by reducing the amount of code processed during compilation.

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

<BadgeAr />

If you are a TypeScript user, install typescript version 5.0.0 or above.

As of March 2023, the typescript@beta version is now available:

pnpm i -D typescript@beta

To avoid any complaints from the editor, add node16 or nodenext to moduleResolution in your tsconfig.json file.

{
  //...
  "compilerOptions": {
    // ...
    "moduleResolution": "nodenext"
  }
}

Props

size = '16';
role = 'img';
color = 'currentColor';
ariaLabel = '0 circle fill';

IDE support

If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, props, and events.

Size

Use the size prop to change the size of icons.

<BadgeAr size="40" />

CSS HEX Colors

Use the color prop to change colors with HEX color code.

<BadgeAr color="#c61515" />

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" />

Unfocusable icon

If you want to make an icon unfocusable, add tabindex="-1".

<BadgeAr tabindex="-1" />

Events

All icons have the following events:

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

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" />

Original source

twbs/icons

Other icons

Svelte-Icon-Sets

PWA: Fast & Offline

This website can be downloaded and installed on your device for offline access as a Progressive Web App.

To install a PWA, look for the "Add to Home Screen" option in the browser's menu or settings. On most mobile devices, this option can be found by visiting the website, then selecting the "Options" or "Menu" button in the browser, and looking for the "Add to Home Screen" option. On some desktop browsers, right-click on the page and select "Install".

npm