LUCIDE ICONS WITH ASP .NET CORE

Today, i going to show you how to implement LUCIDE with ASP .NET CORE, we going suppose the project its already created.

1- Create package.json

In case you still no have package.json first you must create the file with the next command
npm init -y

2- Open Terminal Inside Visual Studio

Go to View in the top and click on Terminal or Ctrl+`

will appear this windows in the right bottom

3- Install Lucide

In the terminale write the next command
npm install lucide
then press enter.

After install, you can see in your package.json the next json.

4- Usage

Now we're going to use the icons, let's see an example.

<i data-lucide="save"></i>
Its simple right?

Ok now let see in a input button with style

<div class="flex flex-row gap-2 hover:cursor-pointer max-w-fit px-2 py-1 rounded shadow drop-shadow-md bg-blue-800 transform duration-300 hover:bg-blue-700 font-semibold font-mono text-white">
**<i data-lucide="save"></i>**
<input
type="submit"
value="Guardar"
class="hover:cursor-pointer"
/>
</div>

as you can see its very simple to use, you can customize the color, size, etc.

<i class="w-10 h-10" data-lucide="save"></i>

<i data-lucide="save"></i>

We have reached the end of this post, I invite you to try this simple method, in which it will give a better appearance to your web application.