svelte-icon-pack-generator Svelte Themes

Svelte Icon Pack Generator

๐Ÿงฉ Icon Pack Generator for Svelte

This utility script converts raw SVG files into reusable Svelte components and auto-generates a barrel export for clean and easy imports.

โœจ Created by Peyman Naderi
๐Ÿ“ข Telegram Channel: https://t.me/svelte_ch


๐Ÿ“ Directory Structure

You must place this folder in the following path:

src/lib/icon-pack/

Recommended structure:

icon-pack/
โ”œโ”€โ”€ svg/              # Raw SVG files (input)
โ”œโ”€โ”€ icons/            # Generated .svelte components (output)
โ”œโ”€โ”€ index.ts          # Barrel export (auto-generated)
โ”œโ”€โ”€ script/
โ”‚   โ”œโ”€โ”€ convert-svgs-to-svelte.ts
โ”‚   โ””โ”€โ”€ tsconfig.scripts.json

โš™๏ธ Setup in package.json

Add the following script to your root package.json:

"scripts": {
  "generate:icon-pack": "tsc --project src/lib/icon-pack/script/tsconfig.scripts.json && node src/lib/icon-pack/script/convert-svgs-to-svelte.js"
}

Then run it using:

pnpm generate:icon-pack

This will:

  • Clean the icons/ folder
  • Convert all .svg files to .svelte components
  • Create barrel exports (index.ts)
  • Format everything using Prettier

To simplify icon imports, add this to your svelte.config.js:

kit: {
  alias: {
    $icons: './src/lib/icon-pack'
  }
}

Then import icons like this:

<script>
  import { ArrowLeft, PlusCircle } from '$icons';
</script>

๐Ÿงผ Prettier

The script uses pnpm prettier to auto-format your generated files.
Make sure Prettier is installed in your monorepo.


Note

The icons directory and the icon-pack/index.ts file are not included in the repository because they are auto-generated each time you run the generate:icon-pack script. To avoid tracking generated files in Git, these paths are excluded via .gitignore.

Make sure to run the generation script after adding or updating any SVG icons to regenerate the missing files.


โœ… Credits

Built by Peyman Naderi

Feel free to share or fork โ€” credit is appreciated ๐Ÿ™

Top categories

Loading Svelte Themes