# @thesvg/svelte
Typed Svelte SVG components for all 4000+ brand icons from [thesvg.org](https://thesvg.org).
- Zero runtime dependencies (Svelte is a peer dep)
- TypeScript support with full `SVGAttributes` types
- Tree-shakeable ESM - import only what you use
- Individual icon imports for maximum bundle efficiency
- Works with Svelte 4 and Svelte 5
## Installation
```bash
npm install @thesvg/svelte
# or
pnpm add @thesvg/svelte
# or
yarn add @thesvg/svelte
```
Svelte 4 or later is required as a peer dependency.
## Usage
### Named import from barrel (convenient, relies on tree-shaking)
```svelte
```
### Individual icon import (best for bundle size)
```svelte
```
Each icon is a separate module so bundlers that do not support tree-shaking
will still include only the icons you import.
## Props
Every component accepts all standard SVG attributes via `$$restProps` (Svelte 4) or spread props (Svelte 5):
| Prop | Type | Default | Description |
| ------------ | ------------------ | ----------------- | ------------------------------ |
| `width` | `number \| string` | (SVG default) | Icon width |
| `height` | `number \| string` | (SVG default) | Icon height |
| `class` | `string` | - | CSS class name |
| `style` | `string` | - | Inline styles (prefer class) |
| `fill` | `string` | `"none"` | SVG fill color |
| `viewBox` | `string` | from original SVG | Override the viewBox |
| `aria-label` | `string` | - | Accessible label |
| ... | ... | - | Any other SVG attribute |
### Sizing example
```svelte
```
### Accessibility
```svelte
```
## Component names
Slugs are converted to PascalCase component names:
| Slug | Component name |
| -------------------- | ------------------ |
| `github` | `Github` |
| `visual-studio-code` | `VisualStudioCode` |
| `figma` | `Figma` |
| `01dotai` | `I01Dotai` |
| `dotnet` | `Dotnet` |
Slugs that start with a digit are prefixed with `I` to produce a valid
JavaScript identifier.
## Tree-shaking
When using SvelteKit or Vite, named imports from the barrel (`@thesvg/svelte`)
are tree-shaken automatically - only the icons you import are included in the
final bundle.
For maximum control, use individual icon imports:
```svelte
```
## Available icons
Over 4000 brand icons are available. Browse the full list at
[thesvg.org](https://thesvg.org).
## License
MIT - see [LICENSE](./LICENSE).
Brand icons and logos are the property of their respective trademark holders. See [thesvg.org](https://thesvg.org) for details.