npm i svelte-material-icons
<script>
import Check from "svelte-material-icons/Check.svelte";
</script>
<Check {color} {size} {width} {height} {viewBox} {title} {desc} {class} {ariaHidden} {ariaLabel} />
You can search icons at materialdesignicons.com
Icon names are PascalCased from the original name in the site
check-outline converts to CheckOutline.svelte
<script>
// all properties are optional
export let size = "1em"; // string | number
export let width = size; // string | number
export let height = size; // string | number
export let color = "currentColor"; // string
export let viewBox = "0 0 24 24"; // string
export let class = undefined; // string
export let ariaLabel = undefined; // string
export let ariaHidden = undefined; // boolean
export let desc = undefined; // string
export let title = undefined; // string
</script>
<svg {class} {width} {height} {viewBox} aria-label={ariaLabel} aria-hidden={ariaHidden}>
{#if title} <title>{title}</title> {/if}
{#if desc} <desc>{desc}</desc> {/if}
<path d="..." fill={color} />
</svg>
If you wrap the icon into other element set the display of the parent element to flex to avoid extra whitespace
This package provides typescript definitions
This is a simple source to source compiler that transforms the svg files from https://github.com/Templarian/MaterialDesign to svelte components using cheerio
To develop you can do
git clone https://github.com/ramiroaisen/svelte-material-icons
cd svelte-material-icons
npm i
npm run build