https://github.com/metonym/svelte-grommet-icons
Grommet SVG icons as Svelte components
https://github.com/metonym/svelte-grommet-icons
grommet icon-library icons svelte svelte-components svg
Last synced: 3 months ago
JSON representation
Grommet SVG icons as Svelte components
- Host: GitHub
- URL: https://github.com/metonym/svelte-grommet-icons
- Owner: metonym
- License: mit
- Created: 2021-08-25T01:56:16.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-11T20:45:03.000Z (over 2 years ago)
- Last Synced: 2025-03-23T11:47:30.664Z (3 months ago)
- Topics: grommet, icon-library, icons, svelte, svelte-components, svg
- Language: JavaScript
- Homepage: https://metonym.github.io/svelte-grommet-icons/
- Size: 920 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-grommet-icons
[![NPM][npm]][npm-url]
> [Grommet SVG icons](https://github.com/grommet/grommet-icons) as Svelte components.
Try it in the [Svelte REPL](https://svelte.dev/repl/dd12a60aba434d81b0cdea6e9e0aea45).
---
## Installation
```sh
# Yarn
yarn add -D svelte-grommet-icons
# npm
npm i -D svelte-grommet-icons
# pnpm
pnpm i -D svelte-grommet-icons
```
## Usage
### Basic
```svelte
import { Analytics, Camera, DocumentImage } from "svelte-grommet-icons";
```
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 Add from "svelte-grommet-icons/lib/Add.svelte";
```
## Using `svelte:component`
```svelte
import * as icons from "svelte-grommet-icons";
{#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-grommet-icons.svg?color=%237d4cdb&style=for-the-badge
[npm-url]: https://npmjs.com/package/svelte-grommet-icons