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.
```
================================================
FILE: apps/docs/content/docs/plugins/vue.mdx
================================================
---
title: Vue
description: Generate Vue components for your icons
---
The Vue plugin generates Vue 3 Single File Components (SFC) from your SVG icons.
## Usage
```ts twoslash title="monicon.config.ts"
import { vue } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [
vue({
outputPath: "src/components/icons",
template: "ts",
suffix: "Icon",
}),
],
} satisfies MoniconConfig;
```
## Options
### `outputPath`
The directory where icon components will be generated.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `"src/components/icons"`
```ts twoslash
import { vue } from "@monicon/core/plugins";
// Static path
vue({ outputPath: "components/icons" })
// Dynamic path based on icon
vue({
outputPath: (icon) => {
if (icon.name.startsWith("mdi:")) {
return "components/icons/mdi";
}
return "components/icons";
},
})
```
### `template`
The script template type for generated components.
- **Type:** `"js" | "ts"`
- **Default:** `"ts"`
```ts twoslash
import { vue } from "@monicon/core/plugins";
// TypeScript setup (default)
vue({ template: "ts" })
// JavaScript setup
vue({ template: "js" })
```
### `componentName`
Customize the component name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** `${icon.name}Icon`
```ts twoslash
import { vue } from "@monicon/core/plugins";
vue({
componentName: (icon) => {
return `Custom${icon.name}`;
},
})
```
### `fileName`
Customize the file name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** Slugified icon name
```ts twoslash
import { vue } from "@monicon/core/plugins";
vue({
fileName: (icon) => {
return icon.name.toLowerCase().replace(":", "-");
},
})
```
### `prefix`
Add a prefix to component names.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `""`
```ts twoslash
import { vue } from "@monicon/core/plugins";
// Static prefix
vue({ prefix: "Icon" })
// Dynamic prefix
vue({
prefix: (icon) => {
return icon.name.startsWith("mdi:") ? "Mdi" : "";
},
})
```
### `suffix`
Add a suffix to component names.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `"Icon"`
```ts twoslash
import { vue } from "@monicon/core/plugins";
// Static suffix
vue({ suffix: "Component" })
// No suffix
vue({ suffix: "" })
```
## Generated Output
For an icon `mdi:home`, the plugin generates:
```vue title="src/components/icons/mdi/home.vue"
```
## Usage in Components
```vue title="src/App.vue"
Monicon is an easy-to-use icon orchestration tool that makes adding icons to your projects simple. Access 200,000+ icons from popular sets like Material Design, Feather, and Font Awesome.
Define your configuration and select the icons you need. Monicon will automatically generate optimized icon components tailored to your framework.
Made by{" "} @senkanoktay
MIT {new Date().getFullYear()} © Monicon
, }, }; export default config; ================================================ FILE: apps/legacy-docs/tsconfig.json ================================================ { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": false, "forceConsistentCasingInFileNames": true, "noEmit": true, "incremental": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve" }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] } ================================================ FILE: examples/next/.eslintrc.json ================================================ { "extends": "next/core-web-vitals" } ================================================ FILE: examples/next/.gitignore ================================================ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # next.js /.next/ /out/ # production /build # misc .DS_Store *.pem # debug npm-debug.log* yarn-debug.log* yarn-error.log* # local env files .env.local .env.development.local .env.test.local .env.production.local # vercel .vercel ================================================ FILE: examples/next/README.md ================================================ ## Getting Started First, run the development server: ```bash yarn dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. To 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). ## Learn More To learn more about Next.js, take a look at the following resources: - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. - [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! ## Deploy on Vercel The 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. Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. ================================================ FILE: examples/next/app/layout.tsx ================================================ import "../styles/global.css"; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ================================================ FILE: examples/next/app/page.tsx ================================================ import styles from "../styles/index.module.css"; import BadgeCheckIcon from "../components/icons/lucide/badge-check"; import CloudDownloadIcon from "../components/icons/lucide/cloud-download"; import AccountIcon from "../components/icons/mdi/account"; import HomeIcon from "../components/icons/mdi/home"; import AtomIcon from "../components/icons/logos/atom-icon"; import ApacheLogo from "../components/icons/logos/apache"; export default function Web() { return (