\n Monicon is an easy-to-use icon library that makes adding icons to your projects simple. It works with popular frameworks like React, React Native, Next.js, Vue, Nuxt, Svelte and more. It's provides 200,000+ icons from popular sets like Material Design, Feather, and Font Awesome.\n
\n\n\n Documentation\n ·\n Explore Icons\n ·\n Issues\n
\n![\"Home\"](\"/icons/mdi/home.svg\"){kind=icon}
\n\n\n\n```\n"
},
{
"path": "apps/docs/content/docs/plugins/vue.mdx",
"content": "---\ntitle: Vue\ndescription: Generate Vue components for your icons\n---\n\nThe Vue plugin generates Vue 3 Single File Components (SFC) from your SVG icons.\n\n## Usage\n\n```ts twoslash title=\"monicon.config.ts\"\nimport { vue } from \"@monicon/core/plugins\";\nimport { MoniconConfig } from \"@monicon/core\";\n\nexport default {\n icons: [\"mdi:home\", \"lucide:heart\"],\n plugins: [\n vue({\n outputPath: \"src/components/icons\",\n template: \"ts\",\n suffix: \"Icon\",\n }),\n ],\n} satisfies MoniconConfig;\n```\n\n## Options\n\n### `outputPath`\n\nThe directory where icon components will be generated.\n\n- **Type:** `string | ((icon: Icon) => string | undefined)`\n- **Default:** `\"src/components/icons\"`\n\n```ts twoslash\nimport { vue } from \"@monicon/core/plugins\";\n\n// Static path\nvue({ outputPath: \"components/icons\" })\n\n// Dynamic path based on icon\nvue({\n outputPath: (icon) => {\n if (icon.name.startsWith(\"mdi:\")) {\n return \"components/icons/mdi\";\n }\n return \"components/icons\";\n },\n})\n```\n\n### `template`\n\nThe script template type for generated components.\n\n- **Type:** `\"js\" | \"ts\"`\n- **Default:** `\"ts\"`\n\n```ts twoslash\nimport { vue } from \"@monicon/core/plugins\";\n\n// TypeScript setup (default)\nvue({ template: \"ts\" })\n\n// JavaScript setup\nvue({ template: \"js\" })\n```\n\n### `componentName`\n\nCustomize the component name.\n\n- **Type:** `(icon: Icon) => string | undefined`\n- **Default:** `${icon.name}Icon`\n\n```ts twoslash\nimport { vue } from \"@monicon/core/plugins\";\n\nvue({\n componentName: (icon) => {\n return `Custom${icon.name}`;\n },\n})\n```\n\n### `fileName`\n\nCustomize the file name.\n\n- **Type:** `(icon: Icon) => string | undefined`\n- **Default:** Slugified icon name\n\n```ts twoslash\nimport { vue } from \"@monicon/core/plugins\";\n\nvue({\n fileName: (icon) => {\n return icon.name.toLowerCase().replace(\":\", \"-\");\n },\n})\n```\n\n### `prefix`\n\nAdd a prefix to component names.\n\n- **Type:** `string | ((icon: Icon) => string | undefined)`\n- **Default:** `\"\"`\n\n```ts twoslash\nimport { vue } from \"@monicon/core/plugins\";\n\n// Static prefix\nvue({ prefix: \"Icon\" })\n\n// Dynamic prefix\nvue({\n prefix: (icon) => {\n return icon.name.startsWith(\"mdi:\") ? \"Mdi\" : \"\";\n },\n})\n```\n\n### `suffix`\n\nAdd a suffix to component names.\n\n- **Type:** `string | ((icon: Icon) => string | undefined)`\n- **Default:** `\"Icon\"`\n\n```ts twoslash\nimport { vue } from \"@monicon/core/plugins\";\n\n// Static suffix\nvue({ suffix: \"Component\" })\n\n// No suffix\nvue({ suffix: \"\" })\n```\n\n## Generated Output\n\nFor an icon `mdi:home`, the plugin generates:\n\n```vue title=\"src/components/icons/mdi/home.vue\"\n\n\n\n \n\n\n\n```\n\n## Usage in Components\n\n```vue title=\"src/App.vue\"\n\n\n\n \n Monicon is an easy-to-use icon orchestration tool that makes adding\n icons to your projects simple. Access 200,000+ icons from popular sets\n like Material Design, Feather, and Font Awesome.\n
\n\n Define your configuration and select the icons you need. Monicon will\n automatically generate optimized icon components tailored to your\n framework.\n
\n\n Made by{\" \"}\n
MIT {new Date().getFullYear()} © Monicon
,\n },\n};\n\nexport default config;\n" }, { "path": "apps/legacy-docs/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": false,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"incremental\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\"\n },\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\"],\n \"exclude\": [\"node_modules\"]\n}\n" }, { "path": "examples/next/.eslintrc.json", "content": "{\n \"extends\": \"next/core-web-vitals\"\n}\n" }, { "path": "examples/next/.gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n" }, { "path": "examples/next/README.md", "content": "## Getting Started\n\nFirst, run the development server:\n\n```bash\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.\n\nTo create [API routes](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) add an `api/` directory to the `app/` directory with a `route.ts` file. For individual endpoints, create a subfolder in the `api` directory, like `api/hello/route.ts` would map to [http://localhost:3000/api/hello](http://localhost:3000/api/hello).\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n" }, { "path": "examples/next/app/layout.tsx", "content": "import \"../styles/global.css\";\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n return (\n \n {children}\n \n );\n}\n" }, { "path": "examples/next/app/page.tsx", "content": "import styles from \"../styles/index.module.css\";\n\nimport BadgeCheckIcon from \"../components/icons/lucide/badge-check\";\nimport CloudDownloadIcon from \"../components/icons/lucide/cloud-download\";\nimport AccountIcon from \"../components/icons/mdi/account\";\nimport HomeIcon from \"../components/icons/mdi/home\";\nimport AtomIcon from \"../components/icons/logos/atom-icon\";\nimport ApacheLogo from \"../components/icons/logos/apache\";\n\nexport default function Web() {\n return (\n