npm package: @noughts/svelte-material-symbols
Description: A Svelte library for displaying Google Material Symbols as SVG icons.
Latest version: 1.3.3

# 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

```bash
npm install @noughts/svelte-material-symbols
```

## Basic Usage

```svelte
<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

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

### Color and Size Customization

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

### Dark Mode Support

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

### Using in Buttons

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

### Star Rating Implementation

```svelte
<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](https://fonts.google.com/icons).

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](https://github.com/google/material-design-icons). 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

```bash
npm run dev
```

### Build Library

```bash
npm run package
```

### Build for Production

```bash
npm run build
```

## License

This project is released under the MIT License.