Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelicon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Svelte Icon Library - Svelicon 🎨

Create Svelte components from Iconify SVG icons with type-safe support. A simple CLI tool for generating Svelte icons.

Features ✨

🎯 Iconify Integration: Access and download icons from the Iconify collection.
⚡ Fast Conversion: Quickly convert SVG icons to Svelte components.
📦 TypeScript Support: Generate fully typed components with interfaces for Svelte TypeScript projects.
🎨 Customizable Icons: Control icon size, display behavior, and spacing.
🛠️ CLI Tool: Easy-to-use command-line interface for Svelte icon generation.
🔄 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.

Requirements 🗒️

Svelte 5
Awesomeness

Usage 🚀

Basic Usage

npx svelicon fluent/person-passkey-28-filled

This command downloads the person-passkey-28-filled icon from the fluent collection and creates a TypeScript Svelte component at

src/icons/FluentPersonPasskey28Filled.svelte

CLI Options

npx svelicon [options] [collection]/[icon]

Options:
  -o, --output <dir>  Output directory (default: "src/icons")
  --withts            Generate TypeScript version (default: true)
  --withjs            Generate JavaScript version
  -h, --help         Display help for command

Example:

npx svelicon --withjs fluent/person-passkey-28-filled

Component Props 🎛️

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
}

Examples 📝

JavaScript Usage

<script>
  import FluentPersonPasskey28Filled from './icons/FluentPersonPasskey28Filled.svelte';
</script>

<FluentPersonPasskey28Filled size={1.2} />

TypeScript Usage

<script lang="ts">
  import FluentPersonPasskey28Filled, { type FluentPersonPasskey28FilledProps } from './icons/FluentPersonPasskey28Filled.svelte';
  
  let iconProps: FluentPersonPasskey28FilledProps = {
    size: 1.2,
    class: 'my-custom-icon'
  };
</script>

<FluentPersonPasskey28Filled {...iconProps} />

Component Output Structure 🏗️

Generated components include:

<script lang="ts" module>
  export interface FluentPersonPasskey28FilledProps {
    size?: number;
    class?: string;
  }
</script>

<script lang="ts">
  const { size = 0.7, class: className = '' }: FluentPersonPasskey28FilledProps = $props();
</script>

<svg class={className}><!-- icon content --></svg>

Benefits 🌟

Zero Runtime Dependencies: Svelte icon components are standalone.
Tree-Shakeable: Only import the Svelte icons you use.
Type-Safe Svelte: Full TypeScript support for Svelte projects.
Small Bundle Size: Minimal impact on your Svelte app's size.
Flexible Svelte Icons: Use any Iconify icon in your Svelte project.

https://youtu.be/6cpXq1MHg-A

Contributing 🤝

Contributions are welcome! Please read our Contributing Guide for details.

License 📄

Support 💖

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

svelicon