feat(core): implement type generation

apps/docs/pages/troubleshooting/typescript.mdx

@@ -0,0 +1,24 @@
+# Typescript
+
+Monicon uses TypeScript to generate types for the icons. To enable TypeScript type definitions for your icons, add the following configuration to your `tsconfig.json` file:
+
+```json filename="tsconfig.json" copy {2}
+{
+  "include": [".monicon/*.d.ts"]
+}
+```
+
+You can also use the `typesFileName` option to specify the name of the file to output the types to. If you want to disable the types file, you can set the `generateTypes` option to `false`.
+
+```ts filename="apps/vite-react/vite.config.ts" copy {8}
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import monicon from "@monicon/vite";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    monicon({ typesFileName: "types.d.ts", generateTypes: true }),
+  ],
+});
+```

apps/vite-react/tsconfig.app.json

@@ -20,5 +20,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src", ".monicon/*.d.ts"]
 }

packages/core/src/index.ts

@@ -54,6 +54,18 @@ export type MoniconOptions = {
    * @default process.cwd()
    */
   root?: string;
+  /**
+   * Whether to generate the types file.
+   *
+   * @default true
+   */
+  generateTypes?: boolean;
+  /**
+   * The name of the file to output the types to.
+   *
+   * @default "types.d.ts"
+   */
+  typesFileName?: string;
 };
 
 export type Icon = {
@@ -69,6 +81,8 @@ const defaultOptions: Required<MoniconOptions> = {
   collections: [],
   customCollections: {},
   root: process.cwd(),
+  generateTypes: true,
+  typesFileName: "types.d.ts",
 };
 
 export const getResolveAlias = () => {
@@ -102,6 +116,14 @@ export const getIconsFilePath = (opts?: MoniconOptions) => {
   );
 };
 
+const getTypesFilePath = (opts?: MoniconOptions) => {
+  const options: Required<MoniconOptions> = { ...defaultOptions, ...opts };
+
+  const autoGeneratedPath = getAutoGeneratedPath(options.root);
+
+  return path.resolve(autoGeneratedPath, options.typesFileName);
+};
+
 export const transformIcon = (svg: string) => {
   const svgObject = parseSync(svg);
 
@@ -205,9 +227,37 @@ export const loadIcons = async (opts?: MoniconOptions) => {
 
   writeIcons(loadedIcons, outputPath, options.type);
 
+  if (options.generateTypes) {
+    const typesOutputPath = getTypesFilePath(options);
+
+    const iconNames = Object.keys(loadedIcons);
+
+    writeTypes(iconNames, typesOutputPath);
+  }
+
   return loadedIcons;
 };
 
+const writeTypes = (iconNames: string[], outputPath: string) => {
+  const code = `// This file is automatically generated by Monicon. Do not edit this file directly.
+import "@monicon/react";
+
+declare module "@monicon/react" {
+  import { MoniconProps as IconProps } from "@monicon/icon-loader";
+  
+  export type MoniconIconName = ${iconNames.map((name) => `\n\t| "${name}"`).join("")};
+
+  export type MoniconProps = Omit<IconProps, "name"> & {
+    name: MoniconIconName;
+  };
+
+  export const Monicon: React.FC<MoniconProps>;
+}
+`;
+
+  fs.writeFileSync(outputPath, code);
+};
+
 const writeIcons = (
   icons: Record<string, Icon>,
   outputPath: string,