https://github.com/metonym/svelte-bootstrap-icons

Bootstrap SVG icons as Svelte components
https://github.com/metonym/svelte-bootstrap-icons

bootstrap bootstrap-icons icon-library icons svelte svelte-component svelte-components svg twbs-icons typescript

Last synced: 11 days ago
JSON representation

Bootstrap SVG icons as Svelte components

• Host: GitHub
• URL: https://github.com/metonym/svelte-bootstrap-icons
• Owner: metonym
• License: mit
• Created: 2020-05-04T22:50:59.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-10T21:07:13.000Z (about 2 months ago)
• Last Synced: 2024-10-20T09:09:49.129Z (17 days ago)
• Topics: bootstrap, bootstrap-icons, icon-library, icons, svelte, svelte-component, svelte-components, svg, twbs-icons, typescript
• Language: HTML
• Homepage: https://metonym.github.io/svelte-bootstrap-icons/
• Size: 8.54 MB
• Stars: 30
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-bootstrap-icons

[![NPM][npm]][npm-url]

> [Bootstrap SVG icons](https://github.com/twbs/icons) as Svelte components with zero dependencies.

This package uses [svelvg](https://github.com/metonym/svelvg) to convert source SVG files into Svelte components.

Try it in the [Svelte REPL](https://svelte.dev/repl/9a0e245df66248d59fadbbf007c06124).

---

## Installation

```bash

# NPM

npm i svelte-bootstrap-icons

# pnpm

pnpm i svelte-bootstrap-icons

# Bun

bun add svelte-bootstrap-icons

# Yarn

yarn add svelte-bootstrap-icons

```

## Usage

See [ICON_INDEX.md](./ICON_INDEX.md) for a list of supported icons.

### Base import

```svelte

  import { Alarm, Bank, CloudMoon } from "svelte-bootstrap-icons";

```

### Direct import (recommended)

Import the icon directly for faster compiling during development.

```html

  import Alarm from "svelte-bootstrap-icons/lib/Alarm.svelte";

```

### Custom size

`$$restProps` are forwarded to the `svg` element.

Use the `width` and `height` attributes to customize the icon size. The default is 16px.

```svelte

```

### Custom color

Use the `fill` attribute to specify a custom color.

```svelte

```

## Changelog

[Changelog](CHANGELOG.md)

## Contributing

See the [contributing guidelines](./CONTRIBUTING.md).

## License

[MIT](LICENSE)

[npm]: https://img.shields.io/npm/v/svelte-bootstrap-icons.svg?color=%237952b3&style=for-the-badge

[npm-url]: https://npmjs.com/package/svelte-bootstrap-icons