How I built my first nuget package
Tags: csharp, dotnet, javascript, blazor
Published: 2020-06-21 16:57:55

As a lot of you guys know, Blazor is here, and it allows us to use C#  in frontend web development. After some time I made a decision to give it a shot and I really like it, so I started to develop the frontend of my "million dollar" idea in Blazor wasm. I really hate the idea of premade UI components, so I started to build my own components which went really well until a missing icon library hit me in the head.

So I decided to create a Blazor icon component library based on the [Feather icon set](https://github.com/feathericons/feather) , which has a lot of really nice icons well structured and it is opensource.

First step, I created a Razor class library project in visual Studio 2019

![Razor class library](https://dev-to-uploads.s3.amazonaws.com/i/54z060e3t445xoygovm8.PNG)

From the feather icon set playground I defined three main input parameters which a component can accept:
- color
- stroke width
- size

Based on these information I created a base icon component class (`Icon.cs`) in the root of the project which describes these parameters and sets some default values.

```csharp
namespace Feather.Blazor
{
    public class Icon : ComponentBase
    {
        [Parameter]
        public string Color { get; set; } = "#ffffff";
        [Parameter]
        public float StrokeWidth { get; set; } = 1.5f;
        [Parameter]
        public int Size { get; set; } = 24;
    }
}
```

In the `_Imports.razor` I registered the namespace of our project so the `Icon.cs` will be accessible for all the razor components.

```razor
@using Microsoft.AspNetCore.Components.Web
@using Feather.Blazor
```

Next I downloaded the Feather icon set and I copied the icons to a new folder which I named `IconsSource`. None of these files will copy to our output.

Thanks to the nice and even structure of the svg icons it was really easy to generate razor components from the svg files. For that generation I created a quick nodejs script which 
- creates a new component for every svg icon
- every component inherits the Icon basecomponent
- places the component parameters to the svg element attributes.

```javascript
const iconFolder = './IconsSource/';
const outputFolder = "./Icons/";

const fs = require('fs');

const icons = fs.readdirSync(iconFolder);

function toPascalCase(text) {
  return text.replace(/(^\w|-\w)/g, clearAndUpper);
}

function clearAndUpper(text) {
  return text.replace(/-/, "").toUpperCase();
}

icons.forEach(icon => {
  const newName = "Feather" + toPascalCase(icon).replace(".svg", ".razor");

  const fileContent = fs.readFileSync(iconFolder + icon, { encoding: "utf8" })
    .replace('width="24"', 'width="@Size"')
    .replace('height="24"', 'height="@Size"')
    .replace('stroke="#fff"', 'stroke="@Color"')
    .replace('stroke-width="1.5"', 'stroke-width="@StrokeWidth"');

  fs.writeFileSync(outputFolder + newName,
    `@inherits Icon
    
${fileContent}
`, { flag: 'w' });

  console.log(newName);
});
```

I know that script is not so optimized, but it has only one purpose, to generate razor components.

So after I run that script, I have fully generated and usable icon components for Blazor.

After that I set up some information in the `Project -> Properties -> Package` tab, and I change my build config to release.

I checked `Generate nuget package on build` in the package configuration, it is enough to build my project, otherwise I would have to use the following command:

```
dotnet pack
```

Both of the previous methods has the same result, in the `bin/Release` folder a new `.nupkg` file is generated, this is my nuget package.

If I want to know what is in the package I created, I just open it with `7zip` and I can find my `.dll` files there and some metadata etc.

Next I Logged in to [nuget](https://www.nuget.org/) and opened the user menu and I clicked on the `Upload package` option. Few minutes after the upload my package was available for the masses and we can find our package in the nuget package manager.

![Nuget package](https://dev-to-uploads.s3.amazonaws.com/i/vqeakc6vebcajjrrxrdk.png)

And this is how those icons look like in my side navigation component (Fluent UI inspired)

![Side navigation](https://dev-to-uploads.s3.amazonaws.com/i/ptzy4ct777erwmf91v8s.png)

Please support the creators of this nice icon set!
https://github.com/feathericons/feather

If you want to see the source code or use this Blazor package or support my work with a star, please visit

### github link
https://github.com/TheOnlyBeardedBeast/Feather.Blazor

### nuget link
https://www.nuget.org/packages/Feather.Blazor/

![Thank you](https://media.giphy.com/media/nU704Y2jeFOHm/giphy.gif)

English isn’t my first language, so please excuse any mistakes.