svelte-material-symbols

A Svelte library for displaying Google Material Symbols as SVG icons.

Features

• Lightweight: No font files required, dynamically loads only the SVGs you need
• Dark Mode Support: Automatically detects system settings and switches colors
• Layout Stable: Prevents layout shifts during icon loading
• Highly Customizable: Supports all Material Symbols options

Installation

npm install @noughts/svelte-material-symbols

Basic Usage

<script>
  import { MaterialSymbol } from '@noughts/svelte-material-symbols';
</script>

<!-- Basic usage -->
<MaterialSymbol icon="home" />

<!-- Customized icon -->
<MaterialSymbol icon="star" fill color="gold" size={32} />

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | icon | string | Required | Icon name to display | | fill | boolean | false | Whether to fill the icon | | weight | number | 400 | Font weight (200-700) | | grade | -25 \| 0 \| 200 | 0 | Grade adjustment | | opticalSize | 20 \| 24 \| 40 \| 48 | 24 | Optical size | | color | string | "#000000" | Color in light mode | | darkColor | string | value of color | Color in dark mode | | opacity | number | 1 | Opacity (0-1) | | size | number \| undefined | undefined | Size in pixels (defaults to 1em if unspecified) |

Usage Examples

Basic Icons

<MaterialSymbol icon="check_circle" />
<MaterialSymbol icon="favorite" fill />
<MaterialSymbol icon="settings" weight={700} />

Color and Size Customization

<MaterialSymbol icon="star" color="orange" size={48} />
<MaterialSymbol icon="error" color="red" size={24} />

Dark Mode Support

<!-- Black in light mode, white in dark mode -->
<MaterialSymbol icon="brightness_6" color="#333333" darkColor="#eeeeee" />

Using in Buttons

<button>
  <MaterialSymbol icon="add" />
  Add Item
</button>

Star Rating Implementation

<div class="rating">
  <MaterialSymbol icon="star" fill color="gold" />
  <MaterialSymbol icon="star" fill color="gold" />
  <MaterialSymbol icon="star" fill color="gold" />
  <MaterialSymbol icon="star" color="gold" />
  <MaterialSymbol icon="star" color="gold" />
</div>

Available Icons

All icons provided by Google Material Symbols are available. You can find icon names on the Material Symbols official site.

Examples: home, star, favorite, settings, menu, search, add, delete, edit, check, close, etc.

Technical Details

SVG Loading Method

This library loads SVG files directly from the official Google Material Design Icons GitHub repository. It uses CSS mask to colorize SVGs with background colors, enabling lightweight and flexible color changes.

Dark Mode Detection

Uses the prefers-color-scheme: dark media query to automatically detect system dark mode settings and apply appropriate colors.

Development

Start Development Server

npm run dev

Build Library

npm run package

Build for Production

npm run build

License

This project is released under the MIT License.