Mdi Svelte
Svelte component for Material Design Icons
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
