Create Svelte components from Iconify SVG icons with type-safe support. A simple CLI tool for generating Svelte icons.
- 🎯 Iconify Integration: Access and download icons from the Iconify collection.
- 🔍 Smart Search: Search through thousands of icons with interactive selection.
- 🚀 Batch Downloads: Download multiple icons at lightning speed with parallel processing.
- ⚡ Fast Conversion: Quickly convert SVG icons to Svelte components.
- 📦 TypeScript Support: Generate fully typed components with interfaces for Svelte TypeScript projects.
- ⚙️ Auto-Config Validation: Automatically checks and validates tsconfig.json path mappings.
- 🎨 Customizable Icons: Control icon size, display behavior, and spacing.
- 🛠️ Advanced CLI: Powerful command-line interface with progress tracking and error handling.
- 🔄 Flexible Output: Generate JavaScript or TypeScript Svelte components.
Svelicon streamlines the process of using Iconify icons in your Svelte projects, offering TypeScript support and flexible customization.
- Svelte 5
- Awesomeness
npx svelicon search "home" --collection mdiChoose from the search results using numbers, ranges, or "all"
Icons are downloaded with tsconfig validation and progress tracking
<script>
import HomeIcon from '$icons/MdiHome.svelte';
</script>
<HomeIcon size={1.5} class="text-blue-500" />Search through thousands of icons interactively:
# Search for icons
npx svelicon search "arrow"
# Search within a specific collection
npx svelicon search "home" --collection mdi
# Search and browse without downloading
npx svelicon search "user" --no-download
# Advanced search with filters
npx svelicon search "database" --collection lucide --limit 30npx svelicon download "mdi:home"# Download multiple icons at once
npx svelicon download "mdi:home,lucide:star,heroicons:user"
# Batch download with custom concurrency
npx svelicon download "mdi:home,mdi:user,lucide:star" --concurrent 20npx svelicon fluent/person-passkey-28-fillednpx svelicon search <query> [options]
Options:
-c, --collection <name> Filter by icon collection (e.g., mdi, lucide)
--category <name> Filter by category
-l, --limit <number> Number of results to show (default: 20)
-o, --output <dir> Output directory (default: "src/icons")
--withts Generate TypeScript version (default: true)
--withjs Generate JavaScript version
--concurrent <number> Concurrent downloads (default: 10)
--skip-tsconfig Skip tsconfig.json validation
--no-download Only search, don't downloadnpx svelicon download <icons> [options]
Arguments:
<icons> Icon name or comma-separated list
Options:
-o, --output <dir> Output directory (default: "src/icons")
--withts Generate TypeScript version (default: true)
--withjs Generate JavaScript version
-c, --concurrent <number> Concurrent downloads for batch (default: 10)
--skip-tsconfig Skip tsconfig.json validationSvelicon automatically validates your tsconfig.json and suggests the optimal configuration:
{
"compilerOptions": {
"paths": {
"$icons": ["src/icons"],
"$icons/*": ["src/icons/*"]
}
}
}This enables clean imports:
import HomeIcon from '$icons/MdiHome.svelte';All generated components accept these props:
interface IconProps {
size?: number; // Icon size in em units
class?: string; // Add custom CSS classes to the SVG element
}<script>
import HomeIcon from '$icons/MdiHome.svelte';
import StarIcon from '$icons/LucideStar.svelte';
</script>
<HomeIcon size={1.2} />
<StarIcon class="text-yellow-500" /><script lang="ts">
import HomeIcon, { type MdiHomeProps } from '$icons/MdiHome.svelte';
let iconProps: MdiHomeProps = {
size: 1.2,
class: 'my-custom-icon'
};
</script>
<HomeIcon {...iconProps} /><script>
import HomeIcon from './icons/MdiHome.svelte';
</script>
<HomeIcon size={1.2} />Generated components include:
<script lang="ts" module>
export interface MdiHomeProps {
size?: number;
class?: string;
}
</script>
<script lang="ts">
const { size = 0.7, class: className = '' }: MdiHomeProps = $props();
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
width="{size}em"
height="{size}em"
viewBox="0 0 24 24"
class="{className}">
<!-- optimized SVG path data -->
</svg>- 🔍 Smart Discovery: Search through 200,000+ icons with intelligent filtering
- ⚡ Lightning Fast: Parallel batch downloads with configurable concurrency
- 🎯 Zero Runtime Dependencies: Svelte icon components are standalone
- 🌲 Tree-Shakeable: Only import the Svelte icons you use
- 🔧 Auto-Configuration: Intelligent tsconfig.json validation and suggestions
- 📦 Type-Safe: Full TypeScript support with generated interfaces
- 📏 Small Bundle Size: Minimal impact on your Svelte app's size
- 🎨 Flexible: Use any Iconify icon in your Svelte project
- 📊 Progress Tracking: Real-time feedback during batch operations
- 🛡️ Error Resilient: Comprehensive error handling and retry logic
Contributions are welcome! Please read our Contributing Guide for details.
MIT © Friend of Svelte
If you find this Svelte icon library helpful, please consider:
- ⭐ Starring the GitHub repo
- 🐛 Creating issues for bugs and feature requests
- 🔀 Contributing to the code base
Made with ❤️ by Friend of Svelte