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
