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
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
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:
icons/
folder.svg
files to .svelte
componentsindex.ts
)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>
The script uses pnpm prettier
to auto-format your generated files.
Make sure Prettier is installed in your monorepo.
Note
The
icons
directory and theicon-pack/index.ts
file are not included in the repository because they are auto-generated each time you run thegenerate: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.
Built by Peyman Naderi
Feel free to share or fork โ credit is appreciated ๐