https://github.com/metonym/svelte-iconoir

Iconoir SVG icons as Svelte components
https://github.com/metonym/svelte-iconoir

icon icon-library iconoir svelte svelte-components

Last synced: 26 days ago
JSON representation

Iconoir SVG icons as Svelte components

• Host: GitHub
• URL: https://github.com/metonym/svelte-iconoir
• Owner: metonym
• License: mit
• Created: 2022-01-22T17:32:15.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-31T16:13:25.000Z (10 months ago)
• Last Synced: 2024-08-09T02:57:58.361Z (3 months ago)
• Topics: icon, icon-library, iconoir, svelte, svelte-components
• Language: Svelte
• Homepage: https://metonym.github.io/svelte-iconoir
• Size: 789 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svelte-iconoir

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

> [Iconoir SVG icons](https://github.com/lucaburgio/iconoir) as Svelte components.

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

---

## Installation

```bash

# Yarn

yarn add -D svelte-iconoir

# npm

npm i -D svelte-iconoir

# pnpm

pnpm i -D svelte-iconoir

```

## Usage

### Basic

```svelte

  import { Activity, BubbleStar, Camera } from "svelte-iconoir";

```

Refer to [ICON_INDEX.md](ICON_INDEX.md) for a list of supported icons.

### Direct import

Use the direct import for faster compiling during development.

**Note:** even if using base imports, unused imports are still tree shakeable by application bundlers like Rollup or webpack.

```html

  import AddPage from "svelte-iconoir/lib/AddPage.svelte";

```

## Using `svelte:component`

```svelte

  import * as icons from "svelte-iconoir";

{#each Object.entries(icons) as [icon, component]}

  


    

    {icon}

  

{/each}

```


## TypeScript

Svelte version 3.31 or greater is required to use this library with TypeScript.

## [Changelog](CHANGELOG.md)

## License

[MIT](LICENSE)

[npm]: https://img.shields.io/npm/v/svelte-iconoir.svg?color=%230969da&style=for-the-badge

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