svelte-icomoon Svelte Themes

Svelte Icomoon

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

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",
}

Top categories

Loading Svelte Themes