My first Svelte library

Recently, I made my portfolio site, of course you may think i use React or Nextjs to the development, well, let me tell you that i used Svelte for my site.

Why? Because I love using Svelte, every time i use it i like it more and more, is fast, easy to use, lightweight, is everything I wish React were haha,

When i was making my portfolio site, i got the idea of using little graphs for showing “percentages” of the different techs and skills that i have, and the result of that component was pretty nice, most of it is just css but pretty easy to use with different percentages and styles, and thats where i got an idea.

When you start a new Svelte project, Sveltekit ask you if the project that you are creating is for a library, i never look at it but when i was doing my little component i remember that and thats when i got the idea of making my component to a library; “maybe is easy to create and deploy a library with Svelte” I thought

And i wasn’t wrong

The experience was extremely easy

First as i said above, when you start creating the svelte project, sveltekit asks you if you want the library template, which is good cause you don’t need to configure anything extra

It will create a project struct similar to this one:

In the lib directory, you can add your component and export it from index.js. Here's an example:

You don’t need to change any code in your package.json or svelte.config.js files.

To publish your library, run the following two commands and you are done!:

You can check out the code for my svelte-percentage library on GitHub at https://github.com/JesusGerardoAguiar/svelte-percentage, and you can find it on NPM at https://www.npmjs.com/package/svelte-percentage.

Thanks for reading, and happy coding!