Skip to content

ramiroaisen/svelte-material-icons

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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

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>
  export let size = "1em";
  export let width = size;
  export let height = size;
  export let color = "currentColor";
  export let viewBox = "0 0 24 24";
</script>

<svg {width} {height} {viewBox}>
  <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