It makes it very simple to use SVG icons in your Svelte
projects.
npm install svelte-icomoon
yarn add svelte-icomoon
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.
// Icon.svelte
<script>
import Icomoon from "svelte-icomoon";
import iconSet from "./selection.json";
</script>
<Icomoon iconSet="{iconSet}" {...$$props} />
<script>
import Icon from "./Icon.svelte";
</script>
<Icon name="pencil" size="{30}" color="blue" />
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 |
{
display: "inline-block",
stroke: "currentColor",
fill: "currentColor",
}