Svelte Icon Library - Svelicon 🎨

#svelte #webdev #javascript

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--withts fluent/person-passkey-28-filled

This command downloads theperson-passkey-28-filled icon from thefluent 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--withjs            Generate JavaScript version(default:true)-h,--help         Displayhelpforcommand

Component Props 🎛️

All generated components accept these props:

interfaceIconProps{display?:boolean;// Whether to display the iconoccupy?:boolean;// Whether to occupy space when hiddensize?:number;// Icon size in em unitsclass?:string;// Add custom CSS classes to the SVG element}

Examples 📝

JavaScript Usage

<script>importFluentPersonPasskey28Filledfrom'./icons/FluentPersonPasskey28Filled.svelte';</script><FluentPersonPasskey28Filleddisplay={true}size={1.2}/>

TypeScript Usage

<scriptlang="ts">importFluentPersonPasskey28Filled,{typeFluentPersonPasskey28FilledProps}from'./icons/FluentPersonPasskey28Filled.svelte';leticonProps:FluentPersonPasskey28FilledProps={display:true,size:1.2,class:'my-custom-icon'};</script><FluentPersonPasskey28Filled{...iconProps}/>

Component Output Structure 🏗️

Generated components include:

<scriptlang="ts"module>exportinterfaceFluentPersonPasskey28FilledProps{display?:boolean;occupy?:boolean;size?:number;class?:string;}</script><scriptlang="ts">const{display=false,occupy=true,size=0.7,class:className=''}:FluentPersonPasskey28FilledProps=$props();</script>{#ifdisplay}<svgclass={className}><!-- icon content --></svg>{:elseifoccupy}<divstyle="height: {size}em; width: {size}em;"/>{/if}