https://github.com/aykutkardas/svelte-icomoon

It makes it very simple to use SVG icons in your Svelte projects.
https://github.com/aykutkardas/svelte-icomoon

Last synced: 12 days ago
JSON representation

It makes it very simple to use SVG icons in your Svelte projects.

• Host: GitHub
• URL: https://github.com/aykutkardas/svelte-icomoon
• Owner: aykutkardas
• License: mit
• Created: 2021-11-10T14:46:47.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-10T21:35:53.000Z (over 1 year ago)
• Last Synced: 2024-09-23T06:16:30.844Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://svgps.app
• Size: 79.1 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte - svelte-icomoon - It makes it very simple to use SVG icons in your Svelte projects. (UI Components / Icons)

README

        
![Svelte-Icomoon Logo](./banner.png)

[![npm](https://img.shields.io/npm/v/svelte-icomoon?color=%234fc921)](https://www.npmjs.com/package/svelte-icomoon)

[![License](https://img.shields.io/badge/License-MIT-green.svg?color=%234fc921)](https://opensource.org/licenses/MIT)

It makes it very simple to use SVG icons in your `Svelte` projects.

## [demo](https://codesandbox.io/s/svelte-icomoon-demo-7ohyqm) - [svgps.app](https://svgps.app?ref=svelte-icomoon)

## Install

```

npm install svelte-icomoon

```

```

yarn add svelte-icomoon

```

## Usage

You can use [svgps.app](https://svgps.app/) to access over `40,000` free icons and convert your own icons into `selection.json`.

Or you can use [IcoMoon](https://icomoon.io/app/) to generate the `selection.json` file.

### Declare

```html

// Icon.svelte

  import Icomoon from "svelte-icomoon";

  import iconSet from "./selection.json";

```

### Use

```html

  import Icon from "./Icon.svelte";

```

## Props List

| Name              | Type          | Default | Sample                        |

| ----------------- | ------------- | ------- | ----------------------------- |

| iconSet           | Object        | -       | "selection.json file content" |

| name              | String        | -       | "home"                        |

| size              | Number,String | -       | "1em", 10, "100px"            |

| color             | String        | -       | "red", "#f00", "rgb(0,0,0)"   |

| style             | Object        | {...}   | { color: '#ff0'}              |

| title             | String        | -       | "Icon Title"                  |

| disableFill       | Boolean       | -       | true                          |

| removeInlineStyle | Boolean       | -       | true                          |

### Default Style

```js

{

  display: "inline-block",

  stroke: "currentColor",

  fill: "currentColor",

}

```

### Related Links

- [react-icomoon](https://github.com/aykutkardas/react-icomoon)

- [vue-icomoon](https://github.com/aykutkardas/vue-icomoon)

- [preact-icomoon](https://github.com/aykutkardas/react-icomoon)