@jetblack/svelte-material-icons
v0.2.0
Published
A svelte library for Material Design icons
Downloads
1
Readme
@jetblack/svelte-material-icons
Icons from Material Design imported as svelte components.
Installation
npm install --save @jetblack/svelte-material-icons
Getting Started
<script>
import Home from '@jetblack/svelte-material-icons/Home.svelte'
</script>
<div>
<Home />
</div>
Usage
Here is how an icon component is implemented.
<!-- Home -->
<script>
export let width = 24, height = 24, viewBox = [0, 0, 24, 24]
</script>
<svg {width} {height} viewBox={viewBox.join(" ")} {...$$restProps}>
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>
The icons have a native resolution of 24x24 which can be altered by the
width
and height
properties. For example:
<script>
import Home from '@jetblack/svelte-material-icons/Home.svelte'
</script>
<div>
<Home width={48} height={48} />
</div>
Other svg
properties will be passed on. For example:
<script>
import Home from '@jetblack/svelte-material-icons/Home.svelte'
</script>
<div>
<Home stroke="red" fill="blue" />
</div>
I don't have a good solution for classes at the moment. Class names will be propagated to the component, so global styles will work.