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

demo - svgps.app

Install

npm install svelte-icomoon

yarn add svelte-icomoon

Usage

You can use svgps.app to access over 40,000 free icons and convert your own icons into selection.json.

Or you can use IcoMoon to generate the selection.json file.

Declare

// Icon.svelte
<script>
  import Icomoon from "svelte-icomoon";
  import iconSet from "./selection.json";
</script>

<Icomoon iconSet="{iconSet}" {...$$props} />

Use

<script>
  import Icon from "./Icon.svelte";
</script>

<Icon name="pencil" size="{30}" color="blue" />

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

{
  display: "inline-block",
  stroke: "currentColor",
  fill: "currentColor",
}

Related Links

• react-icomoon
• vue-icomoon
• preact-icomoon