Improve types export for lucide-react (#1424)

* Add types plugin

* Add js doc comment

* Only enable dynamic imports for CJS and ESM builds

* Add documentation

* Adjust docs

* Add test for dynamic import

* Adjust note

* Adjustment in docs

packages/lucide-react/scripts/exportTemplate.mjs

@@ -1,7 +1,33 @@
-export default ({ componentName, children }) => `
+export default ({ componentName, iconName, children, getSvg }) => {
+  const svgContents = getSvg();
+
+  const svgBase64 = Buffer.from(
+    svgContents
+      .replace('\n', '')
+      .replace(
+        'stroke="currentColor"',
+        'stroke="#000" style="background-color: #fff; border-radius: 2px"',
+      ),
+  ).toString('base64');
+
+  // declarationFileContent += `\
+
+  return `
 import createLucideIcon from '../createLucideIcon';
 
+/**
+ * @component @name ${componentName}
+ * @description Lucide SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-react - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
 const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)});
 
 export default ${componentName};
 `;
+};