Svelte - Material Design Icons

Using Material Design Icons in your Svelte projects.

npm install mdi-svelte --save-dev

Demo

Go to Demo page.

Usage

The example below uses the @mdi/js package which contains all the MDI icon's path data.

<script>
    import Icon from 'mdi-svelte';
    import { mdiCardsSpade } from '@mdi/js';
</script>

<Icon path={mdiCardsSpade} color="black" />

You can find icons names at materialdesignicons.com

Props

| Prop | PropTypes | Default | Details | |-------------|----------------|----------|---------| | path | string | required | SVG path data. Usually from @mdi/js | | size | number, string | null | {size * 1.5}rem, 1em, 48px | | flip | bool, string | false | h - flip horizontal, v - vertical, true - both | | rotate | number | 0 | degrees -360 to 360 | | color | string | color of the text | rgb() / rgba() / #000 | | spin | bool, number | false | true = 2s, -2 counterclockwise, {spin}s |

Inspiration

NPM @MDI Organization @MDI/React module