Svelte Material Icons

Install

npm i svelte-material-icons

Usage

<script>
  import Check from "svelte-material-icons/Check.svelte";
</script>

<Check {color} {size} {width} {height} {viewBox} {title} {desc} {class} {ariaHidden} {ariaLabel} />

Search Icons

You can search icons at materialdesignicons.com

Icon names are PascalCased from the original name in the site

check-outline converts to CheckOutline.svelte

Icon Example

<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>

Notes

If you wrap the icon into other element set the display of the parent element to flex to avoid extra whitespace

Types

This package provides typescript definitions

Contribute

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