@jprochazk/svelte-material-icons

svelte-material-icons

Wrapper over the MaterialDesign repository which transforms all .svg files to .svelte components.

File names are converted from kebab-case.svg to PascalCase.svelte, e.g. google-translate.svg to GoogleTranslate.svelte. Each file is self-contained, so the package is easily tree-shakeable.

Installation

$ npm install material-icons@npm:jprochazk/svelte-material-icons

Will install @jprochazk/svelte-material-icons under the material-icons alias

Usage

Search for icons at https://materialdesignicons.com/, then use them like so:

<script>
  // google-translate.svg
  import GoogleTranslateIcon from "material-icons/GoogleTranslate.svelte";
</script>

<a target="_blank" rel="noopener noreferrer" href="https://translate.google.com/">
  <GoogleTranslateIcon />
</a>

Every component follows this template:

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  version="1.1"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  {...$$props}
>
  <path d="..." />
</svg>

{...$$props} allows you to overwrite/add any props, such as width, height, class, on:click, etc.:

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

<TranslateIcon width="64" height="64" />