Build d.ts for use in typescript

[SMAH1]

How to use

in html file:

  <div id="ico"></div>
  <i icon-lucide="menu"></i>
  <i icon-lucide="circle"></i>

in ts file:

import { createIcons, createElement, Menu, ArrowRight, Circle, icons } from 'lucide';
...
const svg = createElement(ArrowRight);
svg.setAttribute('color', 'red');

const elm = document.getElementById('ico');
elm?.appendChild(svg);

createIcons({
  icons: { Menu, Circle },
  attrs: {
    fill: 'green',
    stroke: 'blue',
    'stroke-width': 5
  },
  nameAttr: 'icon-lucide'
});

and for use all icons:

...
icons: icons,
...

I test it in Angular App and without app (typescript + webpack)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/lucide/lucide/ECoAj4NgQAR1XvXTZK1umDQwbGx5
✅ Preview: Canceled

[Deployment for 9ca395c canceled]

[ericfennis]

@SMAH1 Thank you very much, very nice work!
I will test it, I will let you know if I found some issues.

[ericfennis]

Couple of days ago I tried to fix this issue as well.
I came with this solution.

The attrs object you can pass in the createIcon function is also able to use other attributes then the attributes we commonly use in our icons. See comment at the createIconsOptions type.

The icons data is for this package is a bit different then we use for the framework packages.
We use: [tag, attrs, children] for the icons, in framework packages: [iconName, children], I tried to make it the same but for createElement we use an recursive function to render the svgs, so it was not possible to use the [iconName, children] format.

I'm curious what think of the additions what I made.

[SMAH1]

And change export type Icons = { [key: string]: IconData } to export type Icons = { [key: string]: IconNode }.
I test it. it work but I think we need two items IconData and IconNode for show correct structure of icon data.
for example:

Activity = ['svg', defaultAttributes, [['polyline', {
    points: '22 12 18 12 15 21 9 3 6 12 2 12'
  }]]];

define three sections: 1) string, 2) defaultAttributes, 3) Array of data that is not same three sections

[ericfennis]

@SMAH1 Nice work. Can you maybe remove the code for the angular-package. I makes it easier to review the code.

[SMAH1]

I test release 0.15.1. It is fine.