Showing preview only (795K chars total). Download the full file or copy to clipboard to get everything.
Repository: oktaysenkan/react-native-iconify
Branch: main
Commit: d5df1fb7ef86
Files: 478
Total size: 680.4 KB
Directory structure:
gitextract_nk4uenfv/
├── .changeset/
│ ├── README.md
│ └── config.json
├── .github/
│ ├── FUNDING.yml
│ ├── actions/
│ │ └── setup/
│ │ └── action.yml
│ └── workflows/
│ ├── ci.yml
│ └── release.yml
├── .gitignore
├── .nvmrc
├── .syncpackrc
├── LICENSE
├── README.md
├── apps/
│ ├── docs/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── content/
│ │ │ └── docs/
│ │ │ ├── architecture.mdx
│ │ │ ├── index.mdx
│ │ │ ├── installation/
│ │ │ │ ├── cli.mdx
│ │ │ │ ├── esbuild.mdx
│ │ │ │ ├── library.mdx
│ │ │ │ ├── meta.json
│ │ │ │ ├── nextjs.mdx
│ │ │ │ ├── nuxt.mdx
│ │ │ │ ├── qwik.mdx
│ │ │ │ ├── react-native.mdx
│ │ │ │ ├── react.mdx
│ │ │ │ ├── remix.mdx
│ │ │ │ ├── rollup.mdx
│ │ │ │ ├── rspack.mdx
│ │ │ │ ├── svelte.mdx
│ │ │ │ ├── universal-build-tool.mdx
│ │ │ │ ├── vue.mdx
│ │ │ │ └── webpack.mdx
│ │ │ ├── loaders/
│ │ │ │ ├── custom-loader.mdx
│ │ │ │ ├── json-collections.mdx
│ │ │ │ ├── local-collections.mdx
│ │ │ │ ├── meta.json
│ │ │ │ └── remote-collections.mdx
│ │ │ ├── meta.json
│ │ │ └── plugins/
│ │ │ ├── clean.mdx
│ │ │ ├── custom.mdx
│ │ │ ├── debugger.mdx
│ │ │ ├── generic.mdx
│ │ │ ├── meta.json
│ │ │ ├── qwik.mdx
│ │ │ ├── react-native.mdx
│ │ │ ├── react.mdx
│ │ │ ├── svelte.mdx
│ │ │ ├── svg.mdx
│ │ │ └── vue.mdx
│ │ ├── eslint.config.mjs
│ │ ├── next.config.mjs
│ │ ├── package.json
│ │ ├── postcss.config.mjs
│ │ ├── public/
│ │ │ └── browserconfig.xml
│ │ ├── source.config.ts
│ │ ├── src/
│ │ │ ├── app/
│ │ │ │ ├── (home)/
│ │ │ │ │ ├── layout.tsx
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── api/
│ │ │ │ │ └── search/
│ │ │ │ │ └── route.ts
│ │ │ │ ├── docs/
│ │ │ │ │ ├── [[...slug]]/
│ │ │ │ │ │ └── page.tsx
│ │ │ │ │ └── layout.tsx
│ │ │ │ ├── global.css
│ │ │ │ ├── layout.tsx
│ │ │ │ ├── llms-full.txt/
│ │ │ │ │ └── route.ts
│ │ │ │ ├── llms.mdx/
│ │ │ │ │ └── docs/
│ │ │ │ │ └── [[...slug]]/
│ │ │ │ │ └── route.ts
│ │ │ │ ├── manifest.ts
│ │ │ │ ├── og/
│ │ │ │ │ ├── docs/
│ │ │ │ │ │ └── [...slug]/
│ │ │ │ │ │ └── route.tsx
│ │ │ │ │ └── route.tsx
│ │ │ │ └── sitemap.ts
│ │ │ ├── components/
│ │ │ │ ├── ConfigDemo.tsx
│ │ │ │ ├── ai/
│ │ │ │ │ └── page-actions.tsx
│ │ │ │ └── mdx/
│ │ │ │ └── mermaid.tsx
│ │ │ ├── lib/
│ │ │ │ ├── cn.ts
│ │ │ │ ├── layout.shared.tsx
│ │ │ │ └── source.ts
│ │ │ └── mdx-components.tsx
│ │ └── tsconfig.json
│ └── legacy-docs/
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── LICENSE
│ ├── README.md
│ ├── next-env.d.ts
│ ├── next-sitemap.config.js
│ ├── next.config.mjs
│ ├── package.json
│ ├── pages/
│ │ ├── _app.tsx
│ │ ├── _meta.tsx
│ │ ├── api/
│ │ │ └── og.tsx
│ │ ├── customization/
│ │ │ ├── _meta.tsx
│ │ │ ├── custom-loader.mdx
│ │ │ ├── json-collections.mdx
│ │ │ ├── local-collections.mdx
│ │ │ └── remote-collections.mdx
│ │ ├── index.mdx
│ │ ├── installation/
│ │ │ ├── _meta.tsx
│ │ │ ├── nextjs.mdx
│ │ │ ├── nuxt.mdx
│ │ │ ├── qwik.mdx
│ │ │ ├── react-esbuild.mdx
│ │ │ ├── react-native.mdx
│ │ │ ├── react-rollup.mdx
│ │ │ ├── react-rspack.mdx
│ │ │ ├── react-webpack.mdx
│ │ │ ├── react.mdx
│ │ │ ├── remix.mdx
│ │ │ ├── svelte.mdx
│ │ │ └── vue.mdx
│ │ └── troubleshooting/
│ │ ├── _meta.tsx
│ │ ├── bundle-size.mdx
│ │ ├── module-resolution.mdx
│ │ ├── monorepo.mdx
│ │ └── typescript.mdx
│ ├── public/
│ │ ├── browserconfig.xml
│ │ ├── manifest.json
│ │ ├── robots.txt
│ │ ├── sitemap-0.xml
│ │ └── sitemap.xml
│ ├── theme.config.tsx
│ └── tsconfig.json
├── examples/
│ ├── next/
│ │ ├── .eslintrc.json
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── layout.tsx
│ │ │ └── page.tsx
│ │ ├── components/
│ │ │ └── icons/
│ │ │ ├── feather/
│ │ │ │ ├── activity.tsx
│ │ │ │ └── alert-circle.tsx
│ │ │ ├── logos/
│ │ │ │ ├── active-campaign.tsx
│ │ │ │ ├── apache.tsx
│ │ │ │ └── atom-icon.tsx
│ │ │ ├── lucide/
│ │ │ │ ├── badge-check.tsx
│ │ │ │ └── cloud-download.tsx
│ │ │ └── mdi/
│ │ │ ├── account-badge-outline.tsx
│ │ │ ├── account.tsx
│ │ │ └── home.tsx
│ │ ├── monicon.config.ts
│ │ ├── next-env.d.ts
│ │ ├── next.config.mjs
│ │ ├── package.json
│ │ ├── styles/
│ │ │ ├── global.css
│ │ │ └── index.module.css
│ │ └── tsconfig.json
│ ├── nuxt-app/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app.vue
│ │ ├── components/
│ │ │ └── icons/
│ │ │ ├── feather/
│ │ │ │ ├── activity.vue
│ │ │ │ └── alert-circle.vue
│ │ │ ├── logos/
│ │ │ │ ├── active-campaign.vue
│ │ │ │ ├── apache.vue
│ │ │ │ └── atom-icon.vue
│ │ │ ├── lucide/
│ │ │ │ ├── badge-check.vue
│ │ │ │ └── cloud-download.vue
│ │ │ └── mdi/
│ │ │ ├── account-badge-outline.vue
│ │ │ ├── account.vue
│ │ │ └── home.vue
│ │ ├── monicon.config.ts
│ │ ├── nuxt.config.ts
│ │ ├── package.json
│ │ ├── server/
│ │ │ └── tsconfig.json
│ │ └── tsconfig.json
│ ├── qwik-app/
│ │ ├── .eslintignore
│ │ ├── .eslintrc.cjs
│ │ ├── .gitignore
│ │ ├── .prettierignore
│ │ ├── README.md
│ │ ├── monicon.config.ts
│ │ ├── package.json
│ │ ├── public/
│ │ │ ├── manifest.json
│ │ │ └── robots.txt
│ │ ├── qwik.env.d.ts
│ │ ├── src/
│ │ │ ├── components/
│ │ │ │ ├── icons/
│ │ │ │ │ ├── feather/
│ │ │ │ │ │ ├── activity.tsx
│ │ │ │ │ │ └── alert-circle.tsx
│ │ │ │ │ ├── logos/
│ │ │ │ │ │ ├── active-campaign.tsx
│ │ │ │ │ │ ├── apache.tsx
│ │ │ │ │ │ └── atom-icon.tsx
│ │ │ │ │ ├── lucide/
│ │ │ │ │ │ ├── badge-check.tsx
│ │ │ │ │ │ └── cloud-download.tsx
│ │ │ │ │ └── mdi/
│ │ │ │ │ ├── account-badge-outline.tsx
│ │ │ │ │ ├── account.tsx
│ │ │ │ │ └── home.tsx
│ │ │ │ └── router-head/
│ │ │ │ └── router-head.tsx
│ │ │ ├── entry.dev.tsx
│ │ │ ├── entry.preview.tsx
│ │ │ ├── entry.ssr.tsx
│ │ │ ├── global.css
│ │ │ ├── root.tsx
│ │ │ └── routes/
│ │ │ ├── index.tsx
│ │ │ ├── layout.tsx
│ │ │ └── service-worker.ts
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── react-native-app/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── (tabs)/
│ │ │ │ ├── _layout.tsx
│ │ │ │ ├── explore.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── +not-found.tsx
│ │ │ └── _layout.tsx
│ │ ├── app.json
│ │ ├── components/
│ │ │ ├── Collapsible.tsx
│ │ │ ├── ExternalLink.tsx
│ │ │ ├── HapticTab.tsx
│ │ │ ├── HelloWave.tsx
│ │ │ ├── ParallaxScrollView.tsx
│ │ │ ├── ThemedText.tsx
│ │ │ ├── ThemedView.tsx
│ │ │ ├── icons/
│ │ │ │ ├── feather/
│ │ │ │ │ ├── activity.tsx
│ │ │ │ │ └── alert-circle.tsx
│ │ │ │ ├── logos/
│ │ │ │ │ ├── active-campaign.tsx
│ │ │ │ │ ├── apache.tsx
│ │ │ │ │ └── atom-icon.tsx
│ │ │ │ ├── lucide/
│ │ │ │ │ ├── badge-check.tsx
│ │ │ │ │ └── cloud-download.tsx
│ │ │ │ └── mdi/
│ │ │ │ ├── account-badge-outline.tsx
│ │ │ │ ├── account.tsx
│ │ │ │ └── home.tsx
│ │ │ └── ui/
│ │ │ ├── IconSymbol.ios.tsx
│ │ │ ├── IconSymbol.tsx
│ │ │ ├── TabBarBackground.ios.tsx
│ │ │ └── TabBarBackground.tsx
│ │ ├── constants/
│ │ │ └── Colors.ts
│ │ ├── eslint.config.js
│ │ ├── hooks/
│ │ │ ├── useColorScheme.ts
│ │ │ ├── useColorScheme.web.ts
│ │ │ └── useThemeColor.ts
│ │ ├── metro.config.js
│ │ ├── monicon.config.ts
│ │ ├── package.json
│ │ └── tsconfig.json
│ ├── remix/
│ │ ├── .eslintrc.cjs
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── app/
│ │ │ ├── components/
│ │ │ │ └── icons/
│ │ │ │ ├── feather/
│ │ │ │ │ ├── activity.tsx
│ │ │ │ │ └── alert-circle.tsx
│ │ │ │ ├── logos/
│ │ │ │ │ ├── active-campaign.tsx
│ │ │ │ │ ├── apache.tsx
│ │ │ │ │ └── atom-icon.tsx
│ │ │ │ ├── lucide/
│ │ │ │ │ ├── badge-check.tsx
│ │ │ │ │ └── cloud-download.tsx
│ │ │ │ └── mdi/
│ │ │ │ ├── account-badge-outline.tsx
│ │ │ │ ├── account.tsx
│ │ │ │ └── home.tsx
│ │ │ ├── entry.client.tsx
│ │ │ ├── entry.server.tsx
│ │ │ ├── root.tsx
│ │ │ ├── routes/
│ │ │ │ └── _index.tsx
│ │ │ └── tailwind.css
│ │ ├── monicon.config.ts
│ │ ├── package.json
│ │ ├── postcss.config.js
│ │ ├── tailwind.config.ts
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── rollup-react/
│ │ ├── .babelrc
│ │ ├── .gitignore
│ │ ├── monicon.config.js
│ │ ├── package.json
│ │ ├── public/
│ │ │ └── index.html
│ │ ├── rollup.config.mjs
│ │ └── src/
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── icons/
│ │ │ ├── feather/
│ │ │ │ ├── activity.jsx
│ │ │ │ └── alert-circle.jsx
│ │ │ ├── logos/
│ │ │ │ ├── active-campaign.jsx
│ │ │ │ ├── apache.jsx
│ │ │ │ └── atom-icon.jsx
│ │ │ ├── lucide/
│ │ │ │ ├── badge-check.jsx
│ │ │ │ └── cloud-download.jsx
│ │ │ └── mdi/
│ │ │ ├── account-badge-outline.jsx
│ │ │ ├── account.jsx
│ │ │ └── home.jsx
│ │ └── index.js
│ ├── rspack-react/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── index.html
│ │ ├── monicon.config.mjs
│ │ ├── package.json
│ │ ├── rspack.config.mjs
│ │ └── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── components/
│ │ │ └── icons/
│ │ │ ├── feather/
│ │ │ │ ├── activity.jsx
│ │ │ │ └── alert-circle.jsx
│ │ │ ├── logos/
│ │ │ │ ├── active-campaign.jsx
│ │ │ │ ├── apache.jsx
│ │ │ │ └── atom-icon.jsx
│ │ │ ├── lucide/
│ │ │ │ ├── badge-check.jsx
│ │ │ │ └── cloud-download.jsx
│ │ │ └── mdi/
│ │ │ ├── account-badge-outline.jsx
│ │ │ ├── account.jsx
│ │ │ └── home.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── svelte-app/
│ │ ├── .gitignore
│ │ ├── .npmrc
│ │ ├── .prettierignore
│ │ ├── .prettierrc
│ │ ├── README.md
│ │ ├── eslint.config.js
│ │ ├── monicon.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── app.d.ts
│ │ │ ├── app.html
│ │ │ ├── lib/
│ │ │ │ ├── components/
│ │ │ │ │ └── icons/
│ │ │ │ │ ├── feather/
│ │ │ │ │ │ ├── activity.svelte
│ │ │ │ │ │ └── alert-circle.svelte
│ │ │ │ │ ├── logos/
│ │ │ │ │ │ ├── active-campaign.svelte
│ │ │ │ │ │ ├── apache.svelte
│ │ │ │ │ │ └── atom-icon.svelte
│ │ │ │ │ ├── lucide/
│ │ │ │ │ │ ├── badge-check.svelte
│ │ │ │ │ │ └── cloud-download.svelte
│ │ │ │ │ └── mdi/
│ │ │ │ │ ├── account-badge-outline.svelte
│ │ │ │ │ ├── account.svelte
│ │ │ │ │ └── home.svelte
│ │ │ │ └── index.ts
│ │ │ └── routes/
│ │ │ └── +page.svelte
│ │ ├── svelte.config.js
│ │ ├── tsconfig.json
│ │ └── vite.config.ts
│ ├── vite-react/
│ │ ├── .gitignore
│ │ ├── README.md
│ │ ├── eslint.config.js
│ │ ├── index.html
│ │ ├── monicon.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── App.tsx
│ │ │ ├── __tests__/
│ │ │ │ ├── App.test.tsx
│ │ │ │ └── setup.ts
│ │ │ ├── components/
│ │ │ │ └── icons/
│ │ │ │ ├── feather/
│ │ │ │ │ ├── activity.tsx
│ │ │ │ │ └── alert-circle.tsx
│ │ │ │ ├── logos/
│ │ │ │ │ ├── active-campaign.tsx
│ │ │ │ │ ├── apache.tsx
│ │ │ │ │ └── atom-icon.tsx
│ │ │ │ ├── lucide/
│ │ │ │ │ ├── badge-check.tsx
│ │ │ │ │ └── cloud-download.tsx
│ │ │ │ ├── material-symbols/
│ │ │ │ │ └── 10k.tsx
│ │ │ │ └── mdi/
│ │ │ │ ├── account-badge-outline.tsx
│ │ │ │ ├── account.tsx
│ │ │ │ └── home.tsx
│ │ │ ├── index.css
│ │ │ ├── main.tsx
│ │ │ └── vite-env.d.ts
│ │ ├── tsconfig.app.json
│ │ ├── tsconfig.app.tsbuildinfo
│ │ ├── tsconfig.json
│ │ ├── tsconfig.node.json
│ │ ├── tsconfig.node.tsbuildinfo
│ │ ├── vite.config.ts
│ │ └── vitest.config.ts
│ └── vite-vue/
│ ├── .gitignore
│ ├── .vscode/
│ │ └── extensions.json
│ ├── README.md
│ ├── index.html
│ ├── monicon.config.ts
│ ├── package.json
│ ├── src/
│ │ ├── App.vue
│ │ ├── __tests__/
│ │ │ └── App.test.ts
│ │ ├── components/
│ │ │ └── icons/
│ │ │ ├── feather/
│ │ │ │ ├── activity.vue
│ │ │ │ └── alert-circle.vue
│ │ │ ├── json/
│ │ │ │ └── network.vue
│ │ │ ├── local/
│ │ │ │ ├── folder.vue
│ │ │ │ └── nested-folder.vue
│ │ │ ├── lucide/
│ │ │ │ ├── badge-check.vue
│ │ │ │ └── cloud-download.vue
│ │ │ ├── mdi/
│ │ │ │ ├── account-badge-outline.vue
│ │ │ │ ├── account.vue
│ │ │ │ └── home.vue
│ │ │ └── remote/
│ │ │ ├── attachment.vue
│ │ │ └── download.vue
│ │ ├── main.ts
│ │ ├── style.css
│ │ └── vite-env.d.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.app.tsbuildinfo
│ ├── tsconfig.json
│ ├── tsconfig.node.json
│ ├── tsconfig.node.tsbuildinfo
│ ├── vite.config.ts
│ └── vitest.config.ts
├── lefthook.yml
├── package.json
├── packages/
│ ├── cli/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── monicon.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── core/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── monicon.config.ts
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── index.ts
│ │ │ ├── loaders/
│ │ │ │ ├── index.ts
│ │ │ │ ├── json-collection.ts
│ │ │ │ ├── local-collection.ts
│ │ │ │ ├── remote-collection.ts
│ │ │ │ ├── types.ts
│ │ │ │ └── utils.ts
│ │ │ ├── plugins/
│ │ │ │ ├── clean/
│ │ │ │ │ ├── glob.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── plugin.ts
│ │ │ │ ├── debugger/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── plugin.ts
│ │ │ │ ├── generic/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── plugin.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── native/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── plugin.ts
│ │ │ │ │ └── templates.ts
│ │ │ │ ├── qwik/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── plugin.ts
│ │ │ │ │ └── template.ts
│ │ │ │ ├── react/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── plugin.ts
│ │ │ │ │ └── templates.ts
│ │ │ │ ├── svelte/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── plugin.ts
│ │ │ │ │ └── templates.ts
│ │ │ │ ├── svg/
│ │ │ │ │ ├── index.ts
│ │ │ │ │ └── plugin.ts
│ │ │ │ ├── types.ts
│ │ │ │ └── vue/
│ │ │ │ ├── index.ts
│ │ │ │ ├── plugin.ts
│ │ │ │ └── templates.ts
│ │ │ ├── types.ts
│ │ │ └── utils/
│ │ │ ├── config-loader.ts
│ │ │ ├── file-system.ts
│ │ │ ├── icon-processor.ts
│ │ │ ├── index.ts
│ │ │ ├── name.ts
│ │ │ ├── plugin-loader.ts
│ │ │ └── svg.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── esbuild/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── metro/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── nuxt/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── rollup/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── rspack/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ ├── typescript-config/
│ │ ├── CHANGELOG.md
│ │ ├── base.json
│ │ ├── nextjs.json
│ │ ├── package.json
│ │ ├── react-native-library.json
│ │ └── vue-library.json
│ ├── vite/
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── package.json
│ │ ├── src/
│ │ │ └── index.ts
│ │ ├── tsconfig.json
│ │ └── tsup.config.ts
│ └── webpack/
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── package.json
│ ├── src/
│ │ └── index.ts
│ ├── tsconfig.json
│ └── tsup.config.ts
└── turbo.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .changeset/README.md
================================================
# Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)
We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
================================================
FILE: .changeset/config.json
================================================
{
"$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
"changelog": [
"@changesets/changelog-github",
{ "repo": "oktaysenkan/monicon" }
],
"commit": false,
"fixed": [["@monicon/*"]],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": [
"@monicon/react-native-app",
"@monicon/next",
"@monicon/remix",
"@monicon/nuxt-app",
"@monicon/rollup-react",
"@monicon/rspack-react",
"@monicon/vite-react",
"@monicon/vite-vue",
"@monicon/svelte-app",
"@monicon/qwik-app",
"@monicon/docs"
]
}
================================================
FILE: .github/FUNDING.yml
================================================
github: oktaysenkan
================================================
FILE: .github/actions/setup/action.yml
================================================
name: Setup
description: Setup Node.js and install dependencies
runs:
using: composite
steps:
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version-file: .nvmrc
- name: Install dependencies
run: yarn install --immutable
shell: bash
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
pull_request:
branches:
- '**'
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup
uses: ./.github/actions/setup
- name: Clean
run: yarn clean
- name: Build all packages and apps
run: yarn build
================================================
FILE: .github/workflows/release.yml
================================================
name: Release
on:
push:
branches: [main]
jobs:
release:
if: github.repository == 'oktaysenkan/monicon'
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Setup
uses: ./.github/actions/setup
- name: Clean
run: yarn clean
- name: Build all packages and apps
run: yarn build
- name: Create Release Pull Request or Publish to npm
uses: changesets/action@v1
with:
publish: yarn release
version: yarn bump
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
================================================
FILE: .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/
.swc/
out/
build
# expo
.expo
# misc
.DS_Store
*.pem
dist
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local
# turbo
.turbo
# monicon
.monicon
================================================
FILE: .nvmrc
================================================
v22
================================================
FILE: .syncpackrc
================================================
{
"semverRange": "*",
"source": [
"packages/*/package.json"
]
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2025 Oktay Şenkan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
<a href="https://monicon-docs.vercel.app/" target="_blank" rel="noopener">
<picture>
<source srcset="https://github.com/user-attachments/assets/720e6358-9466-4992-8214-71aa7b65c723" />
<img alt="banner" src="https://github.com/user-attachments/assets/720e6358-9466-4992-8214-71aa7b65c723" />
</picture>
</a>
<h1 align="center">Monicon</h1>
<h3 align="center">
Universal Icon Library
</h3>
<div align="center">
<p>
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.
</p>
<p>
<strong><a href="https://monicon-docs.vercel.app">Documentation</a></strong>
·
<strong><a href="https://icones.js.org/">Explore Icons</a></strong>
·
<strong><a href="https://github.com/oktaysenkan/monicon/issues">Issues</a></strong>
</p>
</div>
================================================
FILE: apps/docs/.gitignore
================================================
# deps
/node_modules
# generated content
.source
# test & build
/coverage
/.next/
/out/
/build
*.tsbuildinfo
# misc
.DS_Store
*.pem
/.pnp
.pnp.js
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# others
.env*.local
.vercel
next-env.d.ts
================================================
FILE: apps/docs/README.md
================================================
# docs
This is a Next.js application generated with
[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
Run development server:
```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```
Open http://localhost:3000 with your browser to see the result.
## Explore
In the project, you can see:
- `lib/source.ts`: Code for content source adapter, [`loader()`](https://fumadocs.dev/docs/headless/source-api) provides the interface to access your content.
- `lib/layout.shared.tsx`: Shared options for layouts, optional but preferred to keep.
| Route | Description |
| ------------------------- | ------------------------------------------------------ |
| `app/(home)` | The route group for your landing page and other pages. |
| `app/docs` | The documentation layout and pages. |
| `app/api/search/route.ts` | The Route Handler for search. |
### Fumadocs MDX
A `source.config.ts` config file has been included, you can customise different options like frontmatter schema.
Read the [Introduction](https://fumadocs.dev/docs/mdx) for further details.
## Learn More
To learn more about Next.js and Fumadocs, 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) - an interactive Next.js tutorial.
- [Fumadocs](https://fumadocs.dev) - learn about Fumadocs
================================================
FILE: apps/docs/content/docs/architecture.mdx
================================================
---
title: Architecture
description: Understand Monicon's architecture, package structure, and how components work together
---
This guide explains Monicon's architecture, including package dependencies, the icon generation flow, and how different components work together.
## Overview
Monicon is built as a monorepo with multiple packages that work together to provide a flexible, framework-agnostic icon management system. The architecture is designed to be modular, extensible, and easy to integrate with different build tools and frameworks.
## Package Structure
<Mermaid chart={`
graph TD
A[@monicon/core] --> B[@monicon/cli]
A --> C[@monicon/vite]
A --> D[@monicon/webpack]
A --> E[@monicon/rollup]
A --> F[@monicon/esbuild]
A --> G[@monicon/rspack]
A --> H[@monicon/metro]
A --> I[@monicon/nuxt]
style A fill:#059669,stroke:#047857,color:#fff
style B fill:#2563eb,stroke:#1d4ed8,color:#fff
style C fill:#d97706,stroke:#b45309,color:#fff
style D fill:#d97706,stroke:#b45309,color:#fff
style E fill:#d97706,stroke:#b45309,color:#fff
style F fill:#d97706,stroke:#b45309,color:#fff
style G fill:#d97706,stroke:#b45309,color:#fff
style H fill:#d97706,stroke:#b45309,color:#fff
style I fill:#d97706,stroke:#b45309,color:#fff
`}/>
### Core Packages
#### @monicon/core (Core Engine)
The heart of Monicon, containing all the core functionality:
- **Bootstrap Function**: Entry point for icon generation
- **Loaders**: Fetch icons from different sources (remote, local, JSON)
- **Plugins**: Transform icons into framework-specific components
- **Utilities**: Config loading, file system operations, icon processing
#### @monicon/cli (Command Line Interface)
Command-line tool for generating icons outside of build processes. Uses `@monicon/core` to provide a CLI experience.
### Bundler Integration Packages
All bundler packages depend on `@monicon/core` and provide seamless integration:
- **@monicon/vite** - Vite plugin
- **@monicon/webpack** - Webpack plugin
- **@monicon/rollup** - Rollup plugin
- **@monicon/esbuild** - esbuild plugin
- **@monicon/rspack** - Rspack plugin
- **@monicon/metro** - Metro bundler plugin (React Native)
- **@monicon/nuxt** - Nuxt module
## Core Architecture
The `@monicon/core` package is structured into four main components:
<Mermaid
chart={`
graph LR
A[Bootstrap] --> B[Loaders]
A --> C[Plugins]
A --> D[Utils]
B --> B1[Remote Collection]
B --> B2[Local Collection]
B --> B3[JSON Collection]
C --> C0[Generic Plugin]
C --> C7[Clean Plugin]
C --> C8[Debugger Plugin]
C0 --> P1[React Plugin]
C0 --> P2[Vue Plugin]
C0 --> P3[Svelte Plugin]
C0 --> P4[Qwik Plugin]
C0 --> P5[React Native Plugin]
C0 --> P6[SVG Plugin]
D --> D1[Config Loader]
D --> D2[File System]
D --> D3[Icon Processor]
D --> D4[Plugin Loader]
D --> D5[SVG Utils]
style A fill:#059669,stroke:#047857,color:#fff
style B fill:#2563eb,stroke:#1d4ed8,color:#fff
style C fill:#d97706,stroke:#b45309,color:#fff
style D fill:#7c3aed,stroke:#6d28d9,color:#fff
`}
/>
### Components
#### Bootstrap
Entry point that orchestrates the entire icon generation process. It:
- Loads configuration
- Processes icons
- Runs plugins
- Writes output files
#### Loaders
Fetch icons from various sources:
- **Remote Collection**: Fetch from Iconify CDN
- **Local Collection**: Load from local file system
- **JSON Collection**: Load from JSON files
#### Plugins
Transform raw SVG icons into framework-specific components:
- **Generic Plugin**: Base plugin providing file generation capabilities (used internally by framework plugins)
- **React Plugin**: Generate React/JSX components (built on Generic Plugin)
- **Vue Plugin**: Generate Vue SFC components (built on Generic Plugin)
- **Svelte Plugin**: Generate Svelte components (built on Generic Plugin)
- **Qwik Plugin**: Generate Qwik components (built on Generic Plugin)
- **React Native Plugin**: Generate React Native components with react-native-svg (built on Generic Plugin)
- **SVG Plugin**: Generate plain SVG files (built on Generic Plugin)
- **Clean Plugin**: Clean output directories
- **Debugger Plugin**: Debug icon generation
#### Utils
Helper utilities for various operations:
- **Config Loader**: Load and watch configuration files
- **File System**: Handle file operations
- **Icon Processor**: Process and transform icons
- **Plugin Loader**: Load and execute plugins
- **SVG Utils**: Parse and manipulate SVG content
## Plugin System
Plugins are the core of Monicon's extensibility. Here's how the plugin system works:
<Mermaid
chart={`
flowchart LR
A[Icon Data] --> B[onPluginsLoad Hook]
B --> C[beforeGenerate Hook]
C --> D[Plugin 1]
C --> E[Plugin 2]
C --> F[Plugin N]
D --> D1[generate]
E --> E1[generate]
F --> F1[generate]
D1 --> G[Collect All Files]
E1 --> G
F1 --> G
G --> H[afterGenerate Hook]
H --> I[beforeWriteFiles Hook]
I --> J[Write to Disk]
J --> K[afterWriteFiles Hook]
style A fill:#059669,stroke:#047857,color:#fff
style G fill:#2563eb,stroke:#1d4ed8,color:#fff
style J fill:#d97706,stroke:#b45309,color:#fff
`}
/>
### Plugin Lifecycle
Each plugin can implement the following hooks:
1. **onPluginsLoad**: Called when plugins are loaded (optional)
2. **beforeGenerate**: Called before the generation process starts (optional)
3. **generate**: The main generation function that creates output files (required)
4. **afterGenerate**: Called after the generation process completes (optional)
5. **beforeWriteFiles**: Called before files are written to disk (optional)
6. **afterWriteFiles**: Called after files are written to disk (optional)
### Creating Custom Plugins
Plugins are functions that return a configuration object:
```ts twoslash
import { MoniconPlugin, MoniconPluginFile } from "@monicon/core/plugins";
export const txtPlugin: MoniconPlugin<void> = (options) => (payload) => {
return {
name: "monicon-txt-plugin",
generate: () => {
const files: MoniconPluginFile[] = [];
for (const icon of payload.icons) {
files.push({
path: `output/${icon.name}.txt`,
content: icon.svg,
});
}
return files;
},
};
};
```
### Generic Plugin Foundation
Most framework plugins (React, Vue, Svelte, Qwik, React Native, and SVG) are built on top of the **Generic Plugin**. The Generic Plugin provides a reusable foundation for file generation with flexible options:
- **outputPath**: Function or string to determine where files are generated
- **fileName**: Function or string to determine file names
- **extension**: Function or string to determine file extensions
- **content**: Function or string to generate file content
This architecture allows framework plugins to focus on their specific transformations (e.g., converting SVG to React JSX) while delegating file management to the generic plugin.
```ts twoslash
import {
generic,
GenericPluginOptions,
MoniconPlugin,
} from "@monicon/core/plugins";
type CustomPluginOptions = GenericPluginOptions<CustomPluginInternalOptions>;
type CustomPluginInternalOptions = {
foo?: string;
};
export const customPlugin: MoniconPlugin<CustomPluginOptions> = (options) =>
generic({
name: "my-custom-plugin",
extension: "custom",
content: (icon) => `/* Custom content for ${icon.name} */`,
...options,
});
```
## Bundler Integration Flow
Bundler packages integrate Monicon into the build process:
<Mermaid
chart={`
flowchart TD
A[Build Process Start] --> B[Bundler Plugin Initialized]
B --> C[Load Monicon Config]
C --> D[Watch Config File]
D --> E{Config File Changed?}
E -->|Yes| F[Trigger Icon Generation]
F --> G[Bootstrap Process]
G --> H[Generate Icon Components]
H --> I[Files Written]
style A fill:#059669,stroke:#047857,color:#fff
style G fill:#2563eb,stroke:#1d4ed8,color:#fff
`}
/>
### How Bundler Plugins Work
1. **Initialize**: Plugin is loaded by the bundler during startup
2. **Load Config**: Load Monicon configuration from `monicon.config.ts`
3. **Watch**: Watch the config file for changes
4. **Generate**: When changes are detected, trigger icon generation via `bootstrap()`
## Data Flow Example
Let's trace a complete example of generating a React icon component:
<Mermaid
chart={`
sequenceDiagram
participant User
participant CLI
participant Bootstrap
participant Loader
participant IconProcessor
participant ReactPlugin
participant FileSystem
User->>CLI: npx @monicon/cli generate
CLI->>Bootstrap: bootstrap(config)
Bootstrap->>Loader: Load icons ["mdi:home"]
Loader->>Loader: Fetch from Iconify CDN
Loader-->>Bootstrap: Raw SVG data
Bootstrap->>IconProcessor: Process icons
IconProcessor->>IconProcessor: Parse SVG
IconProcessor->>IconProcessor: Normalize dimensions
IconProcessor-->>Bootstrap: Processed icons
Bootstrap->>ReactPlugin: generate(icons)
ReactPlugin->>ReactPlugin: Transform to JSX
ReactPlugin->>ReactPlugin: Apply template
ReactPlugin-->>Bootstrap: File objects
Bootstrap->>FileSystem: Write files
FileSystem->>FileSystem: Create directories
FileSystem->>FileSystem: Write components
FileSystem-->>Bootstrap: Success
Bootstrap-->>CLI: Complete
CLI-->>User: Icons generated!
`}
/>
## Key Design Principles
### 1. Framework Agnostic
The core is framework-agnostic. Framework-specific logic is isolated in plugins, making it easy to support new frameworks.
### 2. Build Tool Independent
Bundler integration packages are separate, allowing users to choose their preferred build tool or use the CLI.
### 3. Extensible
The plugin system allows users to create custom transformations and integrations.
### 4. Type Safe
Full TypeScript support with exported types for configuration and plugins.
## Examples
### Using Core Directly
```ts twoslash
import { bootstrap } from "@monicon/core";
import { react } from "@monicon/core/plugins";
await bootstrap({
icons: ["mdi:home"],
plugins: [react({ outputPath: "src/components/icons" })],
});
```
### Using with Vite
```ts twoslash
import { defineConfig } from "vite";
import monicon from "@monicon/vite";
import { react } from "@monicon/core/plugins";
export default defineConfig({
plugins: [
monicon({
icons: ["mdi:home"],
plugins: [react({ outputPath: "src/components/icons" })],
}),
],
});
```
### Using CLI
```bash
npx @monicon/cli generate --watch
```
================================================
FILE: apps/docs/content/docs/index.mdx
================================================
---
title: Introduction
description: Monicon is an easy-to-use icon orchestration tool that makes adding icons to your projects simple.
---
Monicon is an tool agnostic and easy-to-use icon orchestration tool that makes adding icons to your projects simple. It works with any framework, language, and platform.
- **Tool Agnostic**: Works with any framework, language, and platform.
- **Huge Icon Library**: Get access to over 200,000 icons from famous sets like Material Design, Feather, and Font Awesome.
- **Custom Icons**: You can create custom icons and use them in your projects. Monicon makes it easy to add your own icons.
- **Works with Modern Tools**: Monicon supports tools like Vite, Webpack, Rollup, and others, so it's ready for any project.
- **Fast and Efficient**: Monicon loads icons quickly to keep your project running smoothly. No flickering or lagging.
- **Easy to Use**: Works with React, Vue, Svelte, Next.js, and other popular frameworks, making icon integration simple. You can discover icons on the [Icones](https://icones.js.org/) website.
- **Customizable**: You can easily change the size, color, and other features of the icons to fit your design.
- **Collaboration**: Monicon helps you collaborate with designers to speed up the design process and get better results. [Iconify Figma Plugin](https://www.figma.com/community/plugin/735098390272716381/iconify) allows you to use icons directly in Figma.
- **Free and Open Source**: Monicon is free to use and open source, so you can use it in any project without restrictions.
No matter which framework you use, Monicon makes adding and managing icons easy. Check out the documentation to see how Monicon can help improve your next project with great-looking icons!
## Comparison: Monicon & Iconify & unplugin-icons
| Feature | Monicon | @iconify/react | unplugin-icons |
| -------------------------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- |
| **Tool Agnostic** | Works with any framework, language, and platform. | Works with React, Vue, Svelte, Next.js, and other popular frameworks. | Works with React, Vue, Svelte, Next.js, and other popular frameworks. |
| **Icon Rendering** | Icons are bundled during build time, ensuring instant rendering with no blinking. | Icons load over HTTP, which can cause blinking during rendering. | Icons are bundled at build time, no blinking issues. |
| **Offline Support** | Fully offline-compatible, works seamlessly with PWAs, Electron apps, and native environments. | Does not work offline due to reliance on HTTP for fetching icons. | Works offline |
| **React Native Support** | Fully supports React Native, making it ideal for mobile and native projects. | No support for React Native. | No support for React Native. |
| **Modern Bundler Support** | Compatible with Metro, Vite, Webpack, Rollup, Rspack, and others. | Primarily web-focused and lacks versatility across bundlers. | No support for Metro. |
| **Custom Icon Support** | Easily create and use custom icons in your projects. | Easily create and use custom icons in your projects. | Easily create and use custom icons in your projects. |
================================================
FILE: apps/docs/content/docs/installation/cli.mdx
================================================
---
title: CLI
description: Learn how to use the Monicon CLI to generate icons
---
The Monicon CLI provides a command-line interface for generating icons, this is useful if you want to use Monicon as a tool-agnostic.
## Installation
Install the Monicon Core
```bash tab="npm"
npm install @monicon/core
```
```bash tab="pnpm"
pnpm add @monicon/core
```
```bash tab="yarn"
yarn add @monicon/core
```
```bash tab="bun"
bun add @monicon/core
```
## Configuration
Create a `monicon.config.ts` (or `.js`) file in your project root:
```ts twoslash title="monicon.config.ts"
import { svg, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from a collection
collections: ["lucide"],
plugins: [
clean({ patterns: ["src/components/icons"] }),
svg({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
## Commands
### Generate Icons
Generate icons based on your configuration:
```bash
npx @monicon/cli generate
```
This command will:
1. Load your `monicon.config.ts` file
2. Fetch the specified icons
3. Generate components in the configured output path
### Watch Mode
Run the CLI in watch mode to automatically regenerate icons when your config changes:
```bash
npx @monicon/cli generate -w
```
This is useful during development to see changes immediately.
### Help
Display help information:
```bash
npx @monicon/cli -h
```
### Version
Check the installed CLI version:
```bash
npx @monicon/cli -v
```
## Usage in Scripts
You can add the CLI to your `package.json` scripts for easy access:
```json title="package.json"
{
"scripts": {
"dev": "npx @monicon/cli generate --watch && next dev",
"build": "npx @monicon/cli generate && next build"
}
}
```
================================================
FILE: apps/docs/content/docs/installation/esbuild.mdx
================================================
---
title: React (esbuild)
description: Learn how to install and use Monicon in your React (esbuild) project
---
## Installation
Install Monicon and its esbuild plugin in your project:
```bash tab="npm"
npm install @monicon/core @monicon/esbuild
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/esbuild
```
```bash tab="yarn"
yarn add @monicon/core @monicon/esbuild
```
```bash tab="bun"
bun add @monicon/core @monicon/esbuild
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.ts` file in your project root:
```ts twoslash title="monicon.config.ts"
import { react, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - src/components/icons
* - components/icons
*/
clean({ patterns: ["src/components/icons"] }),
react({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
### 2. Configure esbuild
Add the Monicon plugin to your esbuild configuration:
```js title="build.js"
import * as esbuild from "esbuild";
import { monicon } from "@monicon/esbuild";
await esbuild.build({
plugins: [monicon()],
});
```
## Usage
After configuration, Monicon will automatically generate React components for your icons. You can import and use them in your components:
```tsx title="src/App.tsx"
import BadgeCheckIcon from "./components/icons/lucide/badge-check";
import CloudDownloadIcon from "./components/icons/lucide/cloud-download";
import HomeIcon from "./components/icons/mdi/home";
import ActivityIcon from "./components/icons/feather/activity";
export default function App() {
return (
<main className="flex gap-4 items-center justify-center min-h-screen">
<BadgeCheckIcon className="size-10" />
<CloudDownloadIcon className="size-10" />
<ActivityIcon className="size-10" />
<HomeIcon className="size-10" />
{/* you can also use standard SVG props */}
<HomeIcon width={40} height={40} color="blue" />
</main>
);
}
```
================================================
FILE: apps/docs/content/docs/installation/library.mdx
================================================
---
title: Library
description: Learn how to use Monicon programmatically as a library
---
Monicon can be used programmatically as a library, giving you full control over icon generation in your build scripts, custom tooling, or any other project.
## Installation
Install the Monicon Core
```bash tab="npm"
npm install @monicon/core
```
```bash tab="pnpm"
pnpm add @monicon/core
```
```bash tab="yarn"
yarn add @monicon/core
```
```bash tab="bun"
bun add @monicon/core
```
## Basic Usage
Import the `bootstrap` function from `@monicon/core` and call it with your configuration:
```ts twoslash title="scripts/generate-icons.ts"
import { bootstrap } from "@monicon/core";
import { svg, clean } from "@monicon/core/plugins";
await bootstrap({
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from a collection
collections: ["lucide"],
plugins: [
clean({ patterns: ["src/components/icons"] }),
svg({ outputPath: "src/components/icons" }),
],
watch: false, // Set to true for watch mode
});
```
## Configuration
The `bootstrap` function accepts a configuration object with the following options:
### Type Definition
```ts twoslash
import { MoniconConfig } from "@monicon/core";
```
### Configuration Options
| Option | Type | Default | Description |
| ------------- | ------------------------------------ | ------- | --------------------------------------------------------------------------------- |
| `icons` | `string[]` | `[]` | Array of individual icon names to load (e.g., `["mdi:home", "feather:activity"]`) |
| `collections` | `string[]` | `[]` | Array of complete icon collections to load (e.g., `["lucide", "heroicons"]`) |
| `plugins` | `MoniconPlugin[]` | `[]` | Array of plugins to process icons |
| `loaders` | `Record<string, ReturnType<Loader>>` | `{}` | Custom loaders for loading icons from different sources |
| `watch` | `boolean` | `false` | Enable watch mode to automatically regenerate icons on config changes |
## Using with Config File
The `bootstrap` function automatically loads your `monicon.config.ts` file if it exists, and merges it with any options you pass:
```ts twoslash title="scripts/generate-icons.ts"
import { bootstrap } from "@monicon/core";
// This will load monicon.config.ts and merge with the provided options
await bootstrap({
watch: false, // Override watch mode
});
```
```ts twoslash title="monicon.config.ts"
import { svg, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "feather:activity"],
collections: ["lucide"],
plugins: [
clean({ patterns: ["src/components/icons"] }),
svg({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
## Integration Examples
### Custom Build Script
Create a custom build script that generates icons before building your app:
```ts twoslash title="scripts/build.ts"
import { bootstrap } from "@monicon/core";
import { svg } from "@monicon/core/plugins";
import { execSync } from "child_process";
async function build() {
console.log("Generating icons...");
await bootstrap({
icons: ["mdi:home", "feather:activity"],
plugins: [svg({ outputPath: "src/components/icons" })],
watch: false,
});
console.log("Building application...");
execSync("npm run build:app", { stdio: "inherit" });
}
build().catch(console.error);
```
```json title="package.json"
{
"scripts": {
"build": "tsx scripts/build.ts"
}
}
```
### Pre-build Hook
Use Monicon in a pre-build hook:
```json twoslash title="package.json"
{
"scripts": {
"prebuild": "tsx scripts/generate-icons.ts",
"build": "vite build"
}
}
```
```ts twoslash title="scripts/generate-icons.ts"
import { bootstrap } from "@monicon/core";
import { svg } from "@monicon/core/plugins";
await bootstrap({
icons: ["mdi:home", "feather:activity", "lucide:star"],
plugins: [svg({ outputPath: "src/components/icons" })],
watch: false,
});
```
### Watch Mode for Development
Use watch mode during development:
```ts twoslash title="scripts/dev.ts"
import { bootstrap } from "@monicon/core";
import { react } from "@monicon/core/plugins";
// Generate icons with watch mode
await bootstrap({
icons: ["mdi:home", "feather:activity"],
plugins: [react({ outputPath: "src/components/icons" })],
watch: true,
});
console.log("Icon generator running in watch mode...");
```
================================================
FILE: apps/docs/content/docs/installation/meta.json
================================================
{
"title": "Installation",
"pages": [
"cli",
"library",
"universal-build-tool",
"react",
"nextjs",
"remix",
"qwik",
"react-native",
"vue",
"nuxt",
"svelte",
"rollup",
"rspack",
"webpack",
"esbuild"
]
}
================================================
FILE: apps/docs/content/docs/installation/nextjs.mdx
================================================
---
title: Next.js
description: Learn how to install and use Monicon in your Next.js project
---
## Installation
Install Monicon and its Webpack plugin in your Next.js project:
```bash tab="npm"
npm install @monicon/core @monicon/webpack
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/webpack
```
```bash tab="yarn"
yarn add @monicon/core @monicon/webpack
```
```bash tab="bun"
bun add @monicon/core @monicon/webpack
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.ts` file in your project root:
```ts twoslash title="monicon.config.ts"
import { react, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:heart"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - components/icons
* - src/components/icons
*/
clean({ patterns: ["components/icons"] }),
react({ outputPath: "components/icons" }),
],
} satisfies MoniconConfig;
```
### 2. Configure Next.js
Add the Monicon plugin to your `next.config.mjs`:
```js title="next.config.mjs"
import { MoniconPlugin } from "@monicon/webpack";
const nextConfig = {
reactStrictMode: true,
webpack: (config, { dev }) => {
config.plugins.push(new MoniconPlugin({ watch: dev }));
return config;
},
};
export default nextConfig;
```
<Callout type="info">
The `watch: dev` option enables automatic icon regeneration during development
when your config changes.
</Callout>
## Usage
After configuration, Monicon will automatically generate React components for your icons. You can import and use them in your components:
```tsx title="app/page.tsx"
import BadgeCheckIcon from "./components/icons/lucide/badge-check";
import CloudDownloadIcon from "./components/icons/lucide/cloud-download";
import HomeIcon from "./components/icons/mdi/home";
import HeartIcon from "./components/icons/feather/heart";
export default function Home() {
return (
<main className="flex gap-4 items-center justify-center min-h-screen">
<BadgeCheckIcon className="size-10" />
<CloudDownloadIcon className="size-10" />
<HeartIcon className="size-10" />
<HomeIcon className="size-10" />
{/* if you don't want to use the className prop, you can use the svg props */}
<HomeIcon width={40} height={40} />
</main>
);
}
```
================================================
FILE: apps/docs/content/docs/installation/nuxt.mdx
================================================
---
title: Nuxt
description: Learn how to install and use Monicon in your Nuxt project
---
## Installation
Install Monicon and its Nuxt module in your Nuxt project:
```bash tab="npm"
npm install @monicon/core @monicon/nuxt
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/nuxt
```
```bash tab="yarn"
yarn add @monicon/core @monicon/nuxt
```
```bash tab="bun"
bun add @monicon/core @monicon/nuxt
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.ts` file in your project root:
```ts twoslash title="monicon.config.ts"
import { vue, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - components/icons
* - src/components/icons
*/
clean({ patterns: ["components/icons"] }),
vue({ outputPath: "components/icons" }),
],
} satisfies MoniconConfig;
```
### 2. Configure Nuxt
Add the Monicon module to your `nuxt.config.ts`:
```ts title="nuxt.config.ts"
export default defineNuxtConfig({
modules: ["@monicon/nuxt"],
});
```
## Usage
After configuration, Monicon will automatically generate Vue components for your icons. You can import and use them in your pages and components:
```vue title="app.vue"
<script setup lang="ts">
import BadgeCheckIcon from "@/components/icons/lucide/badge-check.vue";
import CloudDownloadIcon from "@/components/icons/lucide/cloud-download.vue";
import HomeIcon from "@/components/icons/mdi/home.vue";
import ActivityIcon from "@/components/icons/feather/activity.vue";
useHead({
title: "Nuxt App",
meta: [{ name: "description", content: "My Nuxt App" }],
});
</script>
<template>
<main class="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon color="white" width="50" />
<CloudDownloadIcon color="white" width="50" />
<ActivityIcon color="white" width="50" />
<HomeIcon color="white" width="50" />
</main>
</template>
```
================================================
FILE: apps/docs/content/docs/installation/qwik.mdx
================================================
---
title: Qwik
description: Learn how to install and use Monicon in your Qwik project
---
## Installation
Install Monicon and its Vite plugin in your Qwik project:
```bash tab="npm"
npm install @monicon/core @monicon/vite
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/vite
```
```bash tab="yarn"
yarn add @monicon/core @monicon/vite
```
```bash tab="bun"
bun add @monicon/core @monicon/vite
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.ts` file in your project root:
```ts twoslash title="monicon.config.ts"
import { qwik, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - src/components/icons
* - components/icons
*/
clean({ patterns: ["src/components/icons"] }),
qwik({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
### 2. Configure Vite
Add the Monicon plugin to your `vite.config.ts`:
```ts twoslash title="vite.config.ts"
import { defineConfig, type UserConfig } from "vite";
import { monicon } from "@monicon/vite";
export default defineConfig((): UserConfig => {
return {
plugins: [
// ... other plugins
monicon(),
],
};
});
```
## Usage
After configuration, Monicon will automatically generate Qwik components for your icons. You can import and use them in your routes and components:
```tsx title="src/routes/index.tsx"
import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import BadgeCheckIcon from "~/components/icons/lucide/badge-check";
import CloudDownloadIcon from "~/components/icons/lucide/cloud-download";
import HomeIcon from "~/components/icons/mdi/home";
import ActivityIcon from "~/components/icons/feather/activity";
export default component$(() => {
return (
<div class="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon color="white" width={50} />
<CloudDownloadIcon color="white" width={50} />
<ActivityIcon color="white" width={50} />
<HomeIcon color="white" width={50} />
{/* you can use standard SVG props */}
<HomeIcon width={40} height={40} color="blue" />
</div>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};
```
================================================
FILE: apps/docs/content/docs/installation/react-native.mdx
================================================
---
title: React Native
description: Learn how to install and use Monicon in your React Native project
---
## Installation
Install Monicon and its Metro plugin in your React Native project:
```bash tab="npm"
npm install @monicon/core @monicon/metro react-native-svg
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/metro react-native-svg
```
```bash tab="yarn"
yarn add @monicon/core @monicon/metro react-native-svg
```
```bash tab="bun"
bun add @monicon/core @monicon/metro react-native-svg
```
<Callout type="info">
`react-native-svg` is required for rendering SVG icons in React Native.
</Callout>
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.ts` file in your project root:
```ts twoslash title="monicon.config.ts"
import { reactNative, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - components/icons
* - src/components/icons
*/
clean({ patterns: ["components/icons"] }),
reactNative({ outputPath: "components/icons" }),
],
} satisfies MoniconConfig;
```
### 2. Configure Metro
Update your `metro.config.js` to use the Monicon Metro plugin:
```js title="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withMonicon } = require("@monicon/metro");
const config = getDefaultConfig(__dirname);
const configWithMonicon = withMonicon(config);
module.exports = configWithMonicon;
```
## Usage
After configuration, Monicon will automatically generate React Native components for your icons. You can import and use them in your components:
```tsx title="app/(tabs)/index.tsx"
import { StyleSheet, View } from "react-native";
import BadgeCheckIcon from "@/components/icons/lucide/badge-check";
import CloudDownloadIcon from "@/components/icons/lucide/cloud-download";
import HomeIcon from "@/components/icons/mdi/home";
import ActivityIcon from "@/components/icons/feather/activity";
export default function HomeScreen() {
return (
<View style={styles.container}>
<BadgeCheckIcon color="aqua" width={32} height={32} />
<CloudDownloadIcon color="aqua" width={32} height={32} />
<ActivityIcon color="aqua" width={32} height={32} />
<HomeIcon color="aqua" width={32} height={32} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
},
});
```
================================================
FILE: apps/docs/content/docs/installation/react.mdx
================================================
---
title: React
description: Learn how to install and use Monicon in your React (Vite) project
---
## Installation
Install Monicon and its Vite plugin in your React project:
```bash tab="npm"
npm install @monicon/core @monicon/vite
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/vite
```
```bash tab="yarn"
yarn add @monicon/core @monicon/vite
```
```bash tab="bun"
bun add @monicon/core @monicon/vite
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.ts` file in your project root:
```ts twoslash title="monicon.config.ts"
import { react, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:heart"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - src/components/icons
* - components/icons
*/
clean({ patterns: ["src/components/icons"] }),
react({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
### 2. Configure Vite
Add the Monicon plugin to your `vite.config.ts`:
```ts twoslash title="vite.config.ts"
import { defineConfig } from "vite";
import monicon from "@monicon/vite";
export default defineConfig({
plugins: [
// ... other plugins
monicon(),
],
});
```
## Usage
After configuration, Monicon will automatically generate React components for your icons. You can import and use them in your components:
```tsx title="src/App.tsx"
import BadgeCheckIcon from "./components/icons/lucide/badge-check";
import CloudDownloadIcon from "./components/icons/lucide/cloud-download";
import HomeIcon from "./components/icons/mdi/home";
import HeartIcon from "./components/icons/feather/heart";
function App() {
return (
<main className="flex gap-4 items-center justify-center min-h-screen">
<BadgeCheckIcon className="size-10" />
<CloudDownloadIcon className="size-10" />
<HeartIcon className="size-10" />
<HomeIcon className="size-10" />
{/* if you don't want to use the className prop, you can use the svg props */}
<HomeIcon height={40} />
</main>
);
}
export default App;
```
================================================
FILE: apps/docs/content/docs/installation/remix.mdx
================================================
---
title: Remix
description: Learn how to install and use Monicon in your Remix project
---
## Installation
Install Monicon and its Vite plugin in your Remix project:
```bash tab="npm"
npm install @monicon/core @monicon/vite
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/vite
```
```bash tab="yarn"
yarn add @monicon/core @monicon/vite
```
```bash tab="bun"
bun add @monicon/core @monicon/vite
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.ts` file in your project root:
```ts twoslash title="monicon.config.ts"
import { react, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - app/components/icons
* - src/components/icons
*/
clean({ patterns: ["app/components/icons"] }),
react({ outputPath: "app/components/icons" }),
],
} satisfies MoniconConfig;
```
### 2. Configure Vite
Add the Monicon plugin to your `vite.config.ts`:
```ts twoslash title="vite.config.ts"
import { defineConfig } from "vite";
import monicon from "@monicon/vite";
export default defineConfig({
plugins: [
// ... other plugins
monicon(),
],
});
```
## Usage
After configuration, Monicon will automatically generate React components for your icons. You can import and use them in your routes and components:
```tsx title="app/routes/_index.tsx"
import type { MetaFunction } from "@remix-run/node";
import BadgeCheckIcon from "~/components/icons/lucide/badge-check";
import CloudDownloadIcon from "~/components/icons/lucide/cloud-download";
import HomeIcon from "~/components/icons/mdi/home";
import ActivityIcon from "~/components/icons/feather/activity";
export const meta: MetaFunction = () => {
return [
{ title: "New Remix App" },
{ name: "description", content: "Welcome to Remix!" },
];
};
export default function Index() {
return (
<div className="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon className="size-10" />
<CloudDownloadIcon className="size-10" />
<ActivityIcon className="size-10" />
<HomeIcon className="size-10" />
{/* if you don't want to use the className prop, you can use the svg props */}
<HomeIcon width={40} height={40} color="blue" />
</div>
);
}
```
================================================
FILE: apps/docs/content/docs/installation/rollup.mdx
================================================
---
title: React (Rollup)
description: Learn how to install and use Monicon in your Rollup project
---
## Installation
Install Monicon and its Rollup plugin in your project:
```bash tab="npm"
npm install @monicon/core @monicon/rollup
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/rollup
```
```bash tab="yarn"
yarn add @monicon/core @monicon/rollup
```
```bash tab="bun"
bun add @monicon/core @monicon/rollup
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.js` file in your project root:
```js twoslash title="monicon.config.js"
const { react, clean } = require("@monicon/core/plugins");
module.exports = {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - src/components/icons
* - components/icons
*/
clean({ patterns: ["src/components/icons"] }),
react({ outputPath: "src/components/icons", format: "jsx" }),
],
};
```
### 2. Configure Rollup
Add the Monicon plugin to your `rollup.config.mjs`:
```js twoslash title="rollup.config.mjs"
import monicon from "@monicon/rollup";
export default {
// ... your rollup config
plugins: [
// ... other plugins
monicon(),
],
};
```
## Usage
After configuration, Monicon will automatically generate React components for your icons. You can import and use them in your components:
```jsx title="src/App.jsx"
import React from "react";
import BadgeCheckIcon from "./components/icons/lucide/badge-check";
import CloudDownloadIcon from "./components/icons/lucide/cloud-download";
import HomeIcon from "./components/icons/mdi/home";
import ActivityIcon from "./components/icons/feather/activity";
const App = () => {
return (
<main className="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon className="size-10" />
<CloudDownloadIcon className="size-10" />
<ActivityIcon class="size-10" />
<HomeIcon className="size-10" />
{/* If you don't want to use the className prop, you can use the svg props */}
<HomeIcon width={40} height={40} />
</main>
);
};
export default App;
```
================================================
FILE: apps/docs/content/docs/installation/rspack.mdx
================================================
---
title: React (Rspack)
description: Learn how to install and use Monicon in your React (Rspack) project
---
## Installation
Install Monicon and its Rspack plugin in your project:
```bash tab="npm"
npm install @monicon/core @monicon/rspack
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/rspack
```
```bash tab="yarn"
yarn add @monicon/core @monicon/rspack
```
```bash tab="bun"
bun add @monicon/core @monicon/rspack
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.mjs` file in your project root:
```js twoslash title="monicon.config.mjs"
import { react, clean } from "@monicon/core/plugins";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - src/components/icons
* - components/icons
*/
clean({ patterns: ["src/components/icons"] }),
react({ outputPath: "src/components/icons", format: "jsx" }),
],
};
```
### 2. Configure Rspack
Add the Monicon plugin to your `rspack.config.mjs`:
```js title="rspack.config.mjs"
import { defineConfig } from "@rspack/cli";
import { rspack } from "@rspack/core";
import MoniconPlugin from "@monicon/rspack";
export default defineConfig({
// ... your rspack config
plugins: [
// ... other plugins
new MoniconPlugin(),
],
});
```
## Usage
After configuration, Monicon will automatically generate React components for your icons. You can import and use them in your components:
```jsx title="src/App.jsx"
import React from "react";
import BadgeCheckIcon from "./components/icons/lucide/badge-check";
import CloudDownloadIcon from "./components/icons/lucide/cloud-download";
import HomeIcon from "./components/icons/mdi/home";
import ActivityIcon from "./components/icons/feather/activity";
const App = () => {
return (
<div className="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon className="size-10" />
<CloudDownloadIcon className="size-10" />
<ActivityIcon className="size-10" />
<HomeIcon className="size-10" />
{/* If you don't want to use the className prop, you can use the svg props */}
<HomeIcon width={40} height={40} />
</div>
);
};
export default App;
```
================================================
FILE: apps/docs/content/docs/installation/svelte.mdx
================================================
---
title: Svelte
description: Learn how to install and use Monicon in your Svelte (SvelteKit) project
---
## Installation
Install Monicon and its Vite plugin in your Svelte project:
```bash tab="npm"
npm install @monicon/core @monicon/vite
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/vite
```
```bash tab="yarn"
yarn add @monicon/core @monicon/vite
```
```bash tab="bun"
bun add @monicon/core @monicon/vite
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.ts` file in your project root:
```ts twoslash title="monicon.config.ts"
import { svelte, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - src/lib/components/icons
* - src/components/icons
*/
clean({ patterns: ["src/lib/components/icons"] }),
svelte({ outputPath: "src/lib/components/icons" }),
],
} satisfies MoniconConfig;
```
### 2. Configure Vite
Add the Monicon plugin to your `vite.config.ts`:
```ts twoslash title="vite.config.ts"
import { defineConfig } from "vite";
import { monicon } from "@monicon/vite";
export default defineConfig({
plugins: [
// ... other plugins
monicon(),
],
});
```
## Usage
After configuration, Monicon will automatically generate Svelte components for your icons. You can import and use them in your routes and components:
```svelte title="src/routes/+page.svelte"
<script>
import BadgeCheckIcon from "$lib/components/icons/lucide/badge-check.svelte";
import CloudDownloadIcon from "$lib/components/icons/lucide/cloud-download.svelte";
import HomeIcon from "$lib/components/icons/mdi/home.svelte";
import ActivityIcon from "$lib/components/icons/feather/activity.svelte";
</script>
<main class="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon class="size-10" />
<CloudDownloadIcon class="size-10" />
<ActivityIcon class="size-10" />
<!-- If you don't want to use the className prop, you can use the svg props -->
<HomeIcon width={40} height={40} />
</main>
```
================================================
FILE: apps/docs/content/docs/installation/universal-build-tool.mdx
================================================
---
title: Universal Build Tool
description: Learn how to use Monicon in universal build tools projects like Swift, Kotlin, etc.
---
Monicon can generate SVG icons for any project, regardless of the programming language. This guide shows you how to use Monicon as a build step to generate icon files that can be used in Swift, Kotlin, etc.
## Installation
Install the Monicon Core
```bash tab="npm"
npm install @monicon/core tsx -g
```
```bash tab="pnpm"
pnpm add @monicon/core tsx -g
```
```bash tab="yarn"
yarn global add @monicon/core tsx
```
```bash tab="bun"
bun add @monicon/core tsx -g
```
## Usage
Create a `generate-icons.js` file to generate icons:
```js title="generate-icons.js"
import { bootstrap } from "@monicon/core";
import { svg, clean } from "@monicon/core/plugins";
await bootstrap({
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from a collection
collections: ["lucide"],
plugins: [
clean({ patterns: ["assets/icons"] }),
svg({ outputPath: "assets/icons" }),
],
watch: false,
});
```
## Using a Config File (Optional)
If you prefer to use a separate config file (useful for watch mode), create a `monicon.config.js` file:
```js title="monicon.config.js"
import { svg, clean } from "@monicon/core/plugins";
export default {
icons: ["mdi:home", "feather:activity"],
collections: ["lucide"],
plugins: [
clean({ patterns: ["assets/icons"] }),
svg({ outputPath: "assets/icons" }),
],
watch: true,
};
```
Then your build script can simply call `bootstrap()`:
```js twoslash title="generate-icons.js"
import { bootstrap } from "@monicon/core";
bootstrap();
```
## Running the Build
Run the build script to generate SVG files:
```bash
tsx generate-icons.js
```
This will generate SVG files in the configured output path (`assets/icons` in the example above).
## Example Output
After running the build script, you'll have SVG files in your output directory:
```
assets/icons/
├── mdi/
│ └── home.svg
├── feather/
│ └── activity.svg
└── lucide/
└── badge-check.svg
└── cloud-download.svg
└── ...
```
================================================
FILE: apps/docs/content/docs/installation/vue.mdx
================================================
---
title: Vue
description: Learn how to install and use Monicon in your Vue (Vite) project
---
## Installation
Install Monicon and its Vite plugin in your Vue project:
```bash tab="npm"
npm install @monicon/core @monicon/vite
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/vite
```
```bash tab="yarn"
yarn add @monicon/core @monicon/vite
```
```bash tab="bun"
bun add @monicon/core @monicon/vite
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.ts` file in your project root:
```ts twoslash title="monicon.config.ts"
import { vue, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - src/components/icons
* - components/icons
*/
clean({ patterns: ["src/components/icons"] }),
vue({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
### 2. Configure Vite
Add the Monicon plugin to your `vite.config.ts`:
```ts twoslash title="vite.config.ts"
import { defineConfig } from "vite";
import monicon from "@monicon/vite";
export default defineConfig({
plugins: [
// ... other plugins
monicon(),
],
});
```
## Usage
After configuration, Monicon will automatically generate Vue components for your icons. You can import and use them in your components:
```vue title="src/App.vue"
<script setup lang="ts">
import BadgeCheckIcon from "./components/icons/lucide/badge-check.vue";
import CloudDownloadIcon from "./components/icons/lucide/cloud-download.vue";
import HomeIcon from "./components/icons/mdi/home.vue";
import ActivityIcon from "./components/icons/feather/activity.vue";
</script>
<template>
<main class="flex h-screen items-center justify-center gap-4">
<BadgeCheckIcon class="size-10" />
<CloudDownloadIcon class="size-10" />
<ActivityIcon class="size-10" />
<!-- If you don't want to use the className prop, you can use the svg props -->
<HomeIcon width="40" height="40" />
</main>
</template>
```
================================================
FILE: apps/docs/content/docs/installation/webpack.mdx
================================================
---
title: React (Webpack)
description: Learn how to install and use Monicon in your React (Webpack) project
---
## Installation
Install Monicon and its Webpack plugin in your project:
```bash tab="npm"
npm install @monicon/core @monicon/webpack
```
```bash tab="pnpm"
pnpm add @monicon/core @monicon/webpack
```
```bash tab="yarn"
yarn add @monicon/core @monicon/webpack
```
```bash tab="bun"
bun add @monicon/core @monicon/webpack
```
## Configuration
### 1. Create Monicon Config
Create a `monicon.config.js` file in your project root:
```ts twoslash title="monicon.config.js"
import { react, clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
// Loads individual icons by icon name
icons: ["mdi:home", "feather:activity"],
// Loads all icons from the lucide collection
collections: ["lucide"],
plugins: [
/**
* change the output path to your project config for example;
* - src/components/icons
* - components/icons
*/
clean({ patterns: ["src/components/icons"] }),
react({ outputPath: "src/components/icons", format: "jsx" }),
],
} satisfies MoniconConfig;
```
### 2. Configure Webpack
Add the Monicon plugin to your `webpack.config.js`:
```js title="webpack.config.js"
const { MoniconPlugin } = require("@monicon/webpack");
module.exports = {
// ... your webpack config
plugins: [
new MoniconPlugin({ watch: process.env.NODE_ENV === "development" }),
// ... other plugins
],
};
```
<Callout type="info">
The `watch: true` option enables automatic icon regeneration during
development when your config changes.
</Callout>
## Usage
After configuration, Monicon will automatically generate React components for your icons. You can import and use them in your components:
```jsx title="src/App.jsx"
import BadgeCheckIcon from "./components/icons/lucide/badge-check";
import CloudDownloadIcon from "./components/icons/lucide/cloud-download";
import HomeIcon from "./components/icons/mdi/home";
import ActivityIcon from "./components/icons/feather/activity";
export default function App() {
return (
<main className="flex gap-4 items-center justify-center min-h-screen">
<BadgeCheckIcon className="size-10" />
<CloudDownloadIcon className="size-10" />
<ActivityIcon className="size-10" />
<HomeIcon className="size-10" />
{/* If you don't want to use the className prop, you can use the svg props */}
<HomeIcon width={40} height={40} color="blue" />
</main>
);
}
```
================================================
FILE: apps/docs/content/docs/loaders/custom-loader.mdx
================================================
---
title: Custom Loader
description: Create your own custom icon loader
---
Custom loaders in Monicon allow you to define your own logic for providing SVG icons. This is especially useful when you want to generate icons dynamically, transform existing icons, or load them from a non-standard source.
## Creating a Custom Loader
A custom loader is a function that returns an async function which returns an object mapping icon names to SVG strings:
```ts twoslash title="loaders/custom.ts"
import { MoniconConfig } from "@monicon/core";
import { react, clean } from "@monicon/core/plugins";
import { Loader } from "@monicon/core/loaders";
export const customLoader: Loader<void> = () => async () => {
// your custom logic here
return {
heart:
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
};
};
export default {
icons: ["mdi:home"],
loaders: {
custom: customLoader(),
},
plugins: [
clean({ patterns: ["src/components/icons"] }),
react({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
## Usage
After configuration, Monicon will generate components for your custom icons:
```tsx title="src/App.tsx"
import StarIcon from "./components/icons/custom/star";
import HeartIcon from "./components/icons/custom/heart";
function App() {
return (
<main>
<StarIcon className="size-6" />
<HeartIcon className="size-6" />
</main>
);
}
export default App;
```
================================================
FILE: apps/docs/content/docs/loaders/json-collections.mdx
================================================
---
title: JSON Collections
description: Load icons from JSON files or URLs
---
JSON Collections in Monicon allow you to define custom icons from JSON files or URLs. These JSON files map icon names to their corresponding SVG data, making it easy to include and manage custom icon sets in your project.
## Configuration
Add the JSON collection loader to your `monicon.config.ts`:
```ts twoslash title="monicon.config.ts"
import { react, clean } from "@monicon/core/plugins";
import { loadJSONCollection } from "@monicon/core/loaders";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home"],
loaders: {
json: loadJSONCollection(
"https://gist.githubusercontent.com/oktaysenkan/39681ecdb066dc44c52fa840dacc7562/raw/6aa7b8f8bf9d806742be0e1c4759809391d00bcd/icons.json"
),
},
plugins: [
clean({ patterns: ["src/components/icons"] }),
react({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
## JSON File Format
The JSON file should map icon names to their corresponding SVG markup:
```json title="icons.json"
{
"network": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/><path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\"/><path d=\"M12 12V8\"/></svg>",
"user": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/></svg>"
}
```
## Usage
After configuration, Monicon will generate components for your JSON icons. You can import and use them in your components:
```tsx title="src/App.tsx"
import NetworkIcon from "./components/icons/json/network";
import UserIcon from "./components/icons/json/user";
function App() {
return (
<main>
<NetworkIcon className="size-6" />
<UserIcon className="size-6" />
</main>
);
}
export default App;
```
## Use Cases
JSON collections are particularly useful for:
- Sharing icon sets across multiple projects
- Loading icons from a CMS or API
- Versioning and managing icon sets centrally
- Quick prototyping with hosted icon sets
================================================
FILE: apps/docs/content/docs/loaders/local-collections.mdx
================================================
---
title: Local Collections
description: Load icons from your local file system
---
Local Collections in Monicon allow you to use icons stored locally on your file system. These collections can be loaded using the `loadLocalCollection` function, which points to the directory containing your SVG files. This setup is ideal for projects where icons are managed locally, providing a quick and flexible way to integrate custom icon sets.
## Configuration
Add the local collection loader to your `monicon.config.ts`:
```ts twoslash title="monicon.config.ts"
import { react, clean } from "@monicon/core/plugins";
import { loadLocalCollection } from "@monicon/core/loaders";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home"],
loaders: {
local: loadLocalCollection("assets/icons"),
},
plugins: [
clean({ patterns: ["src/components/icons"] }),
react({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
## Directory Structure
For the above configuration, your `assets/icons` directory might look like this:
```
assets/
└── icons/
├── folder.svg
├── user.svg
└── network.svg
```
Each SVG file in the directory is automatically assigned a name based on its filename (e.g., `folder` for `folder.svg`).
## Usage
After configuration, Monicon will generate components for your local icons. You can import and use them in your components:
```tsx title="src/App.tsx"
import FolderIcon from "./components/icons/local/folder";
import UserIcon from "./components/icons/local/user";
import NetworkIcon from "./components/icons/local/network";
function App() {
return (
<main>
<FolderIcon className="size-6" />
<UserIcon className="size-6" />
<NetworkIcon className="size-6" />
</main>
);
}
export default App;
```
## Nested Directories
You can also organize your SVG files in nested directories:
```
assets/
└── icons/
├── ui/
│ ├── button.svg
│ └── input.svg
└── social/
├── twitter.svg
└── github.svg
```
The nested structure will be preserved in the generated component paths:
```tsx
import ButtonIcon from "./components/icons/local/ui/button";
import TwitterIcon from "./components/icons/local/social/twitter";
```
================================================
FILE: apps/docs/content/docs/loaders/meta.json
================================================
{
"title": "Loaders",
"pages": [
"local-collections",
"json-collections",
"remote-collections",
"custom-loader"
]
}
================================================
FILE: apps/docs/content/docs/loaders/remote-collections.mdx
================================================
---
title: Remote Collections
description: Fetch icons directly from remote URLs
---
Remote Collections in Monicon allow you to fetch and use icons directly from remote URLs. These collections are configured using the `loadRemoteCollection` function, which maps icon names to their respective URLs. This setup is perfect for integrating third-party or dynamically fetched icons into your project.
## Configuration
Add the remote collection loader to your `monicon.config.ts`:
```ts twoslash title="monicon.config.ts"
import { react, clean } from "@monicon/core/plugins";
import { loadRemoteCollection } from "@monicon/core/loaders";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home"],
loaders: {
remote: loadRemoteCollection({
download: "https://api.iconify.design/lucide:cloud-download.svg",
attachment: "https://api.iconify.design/ri:attachment-2.svg",
github: "https://api.iconify.design/simple-icons:github.svg",
}),
},
plugins: [
clean({ patterns: ["src/components/icons"] }),
react({ outputPath: "src/components/icons" }),
],
} satisfies MoniconConfig;
```
## Usage
After configuration, Monicon will generate components for your remote icons. You can import and use them in your components:
```tsx title="src/App.tsx"
import DownloadIcon from "./components/icons/remote/download";
import AttachmentIcon from "./components/icons/remote/attachment";
import GitHubIcon from "./components/icons/remote/github";
function App() {
return (
<main>
<DownloadIcon className="size-6" />
<AttachmentIcon className="size-6" />
<GitHubIcon className="size-6" />
</main>
);
}
export default App;
```
================================================
FILE: apps/docs/content/docs/meta.json
================================================
{
"title": "Documentation",
"pages": [
"index",
"architecture",
"installation",
"loaders",
"plugins"
]
}
================================================
FILE: apps/docs/content/docs/plugins/clean.mdx
================================================
---
title: Clean
description: Clean output directories before generating icons
---
The Clean plugin removes files and directories before generating new icons. This ensures your output directory only contains the icons you've configured, without leftover files from previous runs.
## Usage
```ts twoslash title="monicon.config.ts"
import { clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [clean({ patterns: ["src/components/icons"] })],
} satisfies MoniconConfig;
```
<Callout type="warning">
The Clean plugin should typically be placed **before** other plugins in the
plugins array to ensure directories are cleaned before new files are
generated.
</Callout>
## Options
### `patterns`
An array of glob patterns to match files and directories for removal.
- **Type:** `string[]`
- **Required:** Yes
```ts twoslash
import { clean } from "@monicon/core/plugins";
clean({
patterns: [
"src/components/icons", // Remove entire directory
"components/icons/**/*.tsx", // Remove specific file types
],
});
```
### `enabled`
Enable or disable the clean plugin.
- **Type:** `boolean`
- **Default:** `true`
```ts twoslash
import { clean } from "@monicon/core/plugins";
clean({
patterns: ["src/components/icons"],
enabled: process.env.NODE_ENV === "production",
});
```
## Why Use Clean?
Without the Clean plugin, old icon files might remain in your output directory even after removing them from your configuration. This can lead to:
- **Stale files** - Icons you no longer use still exist in your codebase
- **Import errors** - Imports may resolve to old files
- **Larger builds** - Unnecessary files increase bundle size
- **Confusion** - Hard to know which icons are actually in use
## Conditional Cleaning
You can conditionally enable cleaning based on environment:
```ts title="monicon.config.ts"
import { clean } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home"],
plugins: [
clean({
patterns: ["src/components/icons"],
// Only clean in development
enabled: process.env.NODE_ENV !== "production",
}),
],
} satisfies MoniconConfig;
```
================================================
FILE: apps/docs/content/docs/plugins/custom.mdx
================================================
---
title: Custom Plugin
description: Build your own Monicon plugins with full control over icon processing
---
Learn how to create custom Monicon plugins to extend functionality with your own icon processing logic, custom file generation, and lifecycle hooks.
## Plugin Structure
A Monicon plugin is a function that returns another function, which receives the icon payload and returns a plugin instance with lifecycle hooks.
```ts twoslash title="my-plugin.ts"
import path from "path";
import type {
MoniconPlugin,
MoniconPluginFile,
MoniconPluginGenerateContext,
} from "@monicon/core/plugins";
type MyPluginOptions = {
outputPath?: string;
customOption?: string;
};
export const myPlugin: MoniconPlugin<MyPluginOptions> =
(options) => (payload) => {
return {
name: "my-custom-plugin",
generate(context: MoniconPluginGenerateContext) {
const files: MoniconPluginFile[] = [];
for (const icon of payload.icons) {
files.push({
path: path.join(options?.outputPath ?? "output", icon.name),
content: icon.svg,
});
}
return files;
},
};
};
```
## Plugin Types
Monicon provides TypeScript types to help you build type-safe plugins.
### `MoniconPlugin<T>`
The main plugin type that defines the plugin factory function signature.
```ts twoslash
import type { MoniconPlugin } from "@monicon/core/plugins";
type Options = { prefix?: string };
const plugin: MoniconPlugin<Options> = (options) => (payload) => ({
name: "example-plugin",
generate: () => [],
});
```
### `MoniconPluginFile`
Represents a file to be generated by the plugin.
```ts twoslash
import type { MoniconPluginFile } from "@monicon/core/plugins";
const file: MoniconPluginFile = {
path: "output/icon.svg",
content: "<svg>...</svg>",
};
```
### `MoniconPluginPayload`
The payload passed to the plugin containing the icons to process.
```ts twoslash
import type { Icon } from "@monicon/core";
type MoniconPluginPayload = {
icons: Icon[];
};
```
### `Icon`
The icon object containing all icon data.
```ts twoslash
type Icon = {
name: string;
svg: string;
width: number;
height: number;
};
```
## Lifecycle Hooks
Plugins can implement lifecycle hooks to execute code at different stages of the generation process.
### `generate`
**Required.** The main generation function that returns an array of files to create.
```ts twoslash
import type {
MoniconPlugin,
MoniconPluginGenerateContext,
} from "@monicon/core/plugins";
const plugin: MoniconPlugin = () => (payload) => ({
name: "my-plugin",
generate(context: MoniconPluginGenerateContext) {
console.log("Generating files for", payload.icons.length, "icons");
console.log("Config file path:", context.configFilePath);
return payload.icons.map((icon) => ({
path: `output/${icon.name}.svg`,
content: icon.svg,
}));
},
});
```
### `onPluginsLoad`
Called when all plugins are loaded. Useful for plugin initialization or validation.
```ts twoslash
import type {
MoniconPlugin,
MoniconPluginLoadContext,
} from "@monicon/core/plugins";
const plugin: MoniconPlugin = () => (payload) => ({
name: "my-plugin",
generate: () => [],
onPluginsLoad(context: MoniconPluginLoadContext) {
console.log("Loaded plugins:", context.plugins);
},
});
```
### `beforeGenerate`
Called before the `generate` function runs.
```ts twoslash
import type {
MoniconPlugin,
MoniconPluginGenerateContext,
} from "@monicon/core/plugins";
const plugin: MoniconPlugin = () => (payload) => ({
name: "my-plugin",
generate: () => [],
beforeGenerate(context: MoniconPluginGenerateContext) {
console.log("About to generate", context.icons.length, "icons");
},
});
```
### `afterGenerate`
Called after the `generate` function completes.
```ts twoslash
import type {
MoniconPlugin,
MoniconPluginGenerateContext,
} from "@monicon/core/plugins";
const plugin: MoniconPlugin = () => (payload) => ({
name: "my-plugin",
generate: () => [],
afterGenerate(context: MoniconPluginGenerateContext) {
console.log("Finished generating icons");
},
});
```
### `beforeWriteFiles`
Called before files are written to disk.
```ts twoslash
import type {
MoniconPlugin,
MoniconPluginWriteFilesContext,
} from "@monicon/core/plugins";
const plugin: MoniconPlugin = () => (payload) => ({
name: "my-plugin",
generate: () => [],
beforeWriteFiles(context: MoniconPluginWriteFilesContext) {
console.log("About to write", context.files.length, "files");
},
});
```
### `afterWriteFiles`
Called after files have been written to disk.
```ts twoslash
import type {
MoniconPlugin,
MoniconPluginWriteFilesContext,
} from "@monicon/core/plugins";
const plugin: MoniconPlugin = () => (payload) => ({
name: "my-plugin",
generate: () => [],
afterWriteFiles(context: MoniconPluginWriteFilesContext) {
console.log("Successfully wrote", context.files.length, "files");
},
});
```
## Context Objects
Each lifecycle hook receives a context object with relevant information.
### `MoniconPluginGenerateContext`
Available in `generate`, `beforeGenerate`, and `afterGenerate` hooks.
- **`icons`** - Array of icons being processed
- **`configUpdated`** - Whether the config file was updated
- **`configFilePath`** - Path to the Monicon config file
### `MoniconPluginLoadContext`
Available in `onPluginsLoad` hook.
- **`plugins`** - Array of loaded plugin names
- **`configUpdated`** - Whether the config file was updated
- **`configFilePath`** - Path to the Monicon config file
### `MoniconPluginWriteFilesContext`
Available in `beforeWriteFiles` and `afterWriteFiles` hooks.
- **`files`** - Array of files to be written or that were written
- **`configUpdated`** - Whether the config file was updated
- **`configFilePath`** - Path to the Monicon config file
## Using with Generic Plugin
For simpler use cases, you can extend the [Generic plugin](/docs/plugins/generic) instead of building from scratch:
```ts twoslash title="extended-generic-plugin.ts"
import {
generic,
GenericPluginOptions,
MoniconPlugin,
} from "@monicon/core/plugins";
type MyOptions = GenericPluginOptions<{
foo?: string;
}>;
export const myPlugin: MoniconPlugin<MyOptions> = (options) =>
generic({
name: "my-extended-plugin",
outputPath: options?.outputPath ?? "output",
extension: "json",
content: (icon) => {
return JSON.stringify(
{
name: icon.name,
svg: icon.svg,
foo: options?.foo,
},
null,
2
);
},
});
```
================================================
FILE: apps/docs/content/docs/plugins/debugger.mdx
================================================
---
title: Debugger
description: Debug the icon generation process
---
The Debugger plugin logs information about the icon generation process, helping you understand what's happening during build time.
## Usage
```ts twoslash title="monicon.config.ts"
import { debuggerPlugin } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [debuggerPlugin()],
} satisfies MoniconConfig;
```
## Options
### `enabled`
Enable or disable the debugger plugin.
- **Type:** `boolean`
- **Default:** `true`
```ts twoslash
import { debuggerPlugin } from "@monicon/core/plugins";
debuggerPlugin({ enabled: false });
debuggerPlugin({ enabled: true });
```
## What It Logs
The Debugger plugin logs information at various stages of the generation process:
### On Plugins Load
Logs when all plugins are loaded.
```
[Monicon - Debugger Plugin] On plugins load 3 plugins
```
### Before Generate
Logs the number of icons about to be generated.
```
[Monicon - Debugger Plugin] Before generate 2 icons
```
### After Generate
Logs the number of icons that were generated.
```
[Monicon - Debugger Plugin] After generate 2 icons
```
### Before Write Files
Logs the number of files about to be written to disk.
```
[Monicon - Debugger Plugin] Before write files 2 files
```
### After Write Files
Logs the number of files that were written to disk.
```
[Monicon - Debugger Plugin] After write files 2 files
```
## Example Output
When running your build with the debugger plugin enabled, you'll see output like:
```bash
[Monicon - Debugger Plugin] On plugins load 3 plugins
[Monicon - Debugger Plugin] Before generate 12 icons
[Monicon - Debugger Plugin] After generate 12 icons
[Monicon - Debugger Plugin] Before write files 12 files
[Monicon - Debugger Plugin] After write files 12 files
```
## Use Cases
The Debugger plugin is useful for:
- **Development** - Understanding what's happening during icon generation
- **Debugging** - Troubleshooting issues with icon generation
- **Performance** - Monitoring how many icons and files are being processed
- **Verification** - Confirming that icons are being generated as expected
## Plugin Order
The Debugger plugin can be placed anywhere in the plugins array. It's typically placed last so it logs information about all other plugins:
```ts twoslash
import { debuggerPlugin } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home"],
plugins: [
debuggerPlugin(), // Last to log all plugin activity
],
} satisfies MoniconConfig;
```
================================================
FILE: apps/docs/content/docs/plugins/generic.mdx
================================================
---
title: Generic
description: Create custom icon outputs with flexible file generation
---
The Generic plugin is a flexible base plugin that allows you to create custom file outputs from your icons. You can control the file path, name, extension, and content, making it perfect for custom integrations or specialized icon formats.
## Usage
```ts twoslash title="monicon.config.ts"
import { generic } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [
generic({
name: "custom-plugin",
outputPath: "public/icons",
extension: "txt",
content: (icon) => `Icon: ${icon.name}\nSVG: ${icon.svg}`,
}),
],
} satisfies MoniconConfig;
```
## Options
### `name`
The name of your custom plugin instance (useful for debugging and logging).
- **Type:** `string`
- **Default:** `"monicon-generic-plugin"`
```ts twoslash
import { generic } from "@monicon/core/plugins";
generic({
name: "my-custom-icon-plugin",
content: (icon) => icon.svg,
});
```
### `outputPath`
The directory where files will be saved.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `"src/components/icons"`
```ts twoslash
import { generic } from "@monicon/core/plugins";
// Static path
generic({
outputPath: "public/icons",
content: (icon) => icon.svg,
});
// Dynamic path based on icon
generic({
outputPath: (icon) => {
if (icon.name.startsWith("mdi:")) {
return "public/icons/mdi";
}
return "public/icons";
},
content: (icon) => icon.svg,
});
```
### `fileName`
Customize the file name for each icon.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** Slugified icon name (e.g., `mdi:home` becomes `mdi/home`)
```ts twoslash
import { generic } from "@monicon/core/plugins";
generic({
fileName: (icon) => {
// Custom file naming
return icon.name.toLowerCase().replace(":", "-");
},
content: (icon) => icon.svg,
});
```
### `extension`
Set the file extension for the generated files.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `"svg"`
```ts twoslash
import { generic } from "@monicon/core/plugins";
// Static extension
generic({
extension: "txt",
content: (icon) => icon.svg,
});
// Dynamic extension based on icon
generic({
extension: (icon) => {
return icon.name.startsWith("mdi:") ? "xml" : "txt";
},
content: (icon) => icon.svg,
});
```
### `content`
The content to write to each file. This is a required option.
- **Type:** `string | ((icon: Icon) => string)`
- **Required:** `false`
> [!NOTE] If no content is provided, the plugin will log a warning and skip the icon.
```ts twoslash
import { generic } from "@monicon/core/plugins";
// Static content
generic({
content: "Hello World",
});
// Dynamic content based on icon
generic({
content: (icon) => {
return `Name: ${icon.name}\nSVG: ${icon.svg}`;
},
});
```
## Examples
### Create JSON Metadata Files
Generate JSON files with icon metadata:
```ts twoslash title="monicon.config.ts"
import { generic } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [
generic({
name: "icon-metadata",
outputPath: "public/icons/metadata",
extension: "json",
content: (icon) => {
return JSON.stringify(icon, null, 2);
},
}),
],
} satisfies MoniconConfig;
```
## Use Cases
The Generic plugin is perfect for:
- **Custom file formats** - Generate icons in formats not supported by other plugins
- **Metadata generation** - Create companion files with icon information
- **Documentation** - Generate documentation or reference files from icons
- **Testing** - Create test fixtures or sample data
- **Integration** - Build custom outputs for specific tools or frameworks
- **Logging** - Create text files that log icon information after processing
## Advanced Usage
You can use the Generic plugin to build your own specialized plugins:
```ts twoslash title="my-plugin.ts"
import {
generic,
GenericPluginOptions,
MoniconPlugin,
} from "@monicon/core/plugins";
import type { Icon } from "@monicon/core";
type MyCustomPluginOptions = GenericPluginOptions<{ foo?: string }>;
export const myCustomPlugin: MoniconPlugin<MyCustomPluginOptions> = (options) =>
generic({
name: "my-custom-plugin",
afterGenerate(context) {
console.log("afterGenerate", context);
},
});
myCustomPlugin({ foo: "bar" });
```
================================================
FILE: apps/docs/content/docs/plugins/meta.json
================================================
{
"title": "Plugins",
"pages": [
"react",
"vue",
"svelte",
"qwik",
"react-native",
"svg",
"generic",
"clean",
"debugger",
"custom"
]
}
================================================
FILE: apps/docs/content/docs/plugins/qwik.mdx
================================================
---
title: Qwik
description: Generate Qwik components for your icons
---
The Qwik plugin generates Qwik components from your SVG icons.
## Usage
```ts twoslash title="monicon.config.ts"
import { qwik } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [
qwik({
outputPath: "src/components/icons",
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 { qwik } from "@monicon/core/plugins";
// Static path
qwik({ outputPath: "src/components/icons" });
// Dynamic path based on icon
qwik({
outputPath: (icon) => {
if (icon.name.startsWith("mdi:")) {
return "src/components/icons/mdi";
}
return "src/components/icons";
},
});
```
### `componentName`
Customize the component name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** `${icon.name}Icon`
```ts twoslash
import { qwik } from "@monicon/core/plugins";
qwik({
componentName: (icon) => {
return `Custom${icon.name}`;
},
});
```
### `fileName`
Customize the file name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** Slugified icon name
```ts twoslash
import { qwik } from "@monicon/core/plugins";
qwik({
fileName: (icon) => {
return icon.name.toLowerCase().replace(":", "-");
},
});
```
### `prefix`
Add a prefix to component names.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `""`
```ts twoslash
import { qwik } from "@monicon/core/plugins";
// Static prefix
qwik({ prefix: "Icon" });
// Dynamic prefix
qwik({
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 { qwik } from "@monicon/core/plugins";
// Static suffix
qwik({ suffix: "Component" });
// No suffix
qwik({ suffix: "" });
```
## Generated Output
For an icon `mdi:home`, the plugin generates:
```tsx title="src/components/icons/mdi/home.tsx"
import { component$, type QwikIntrinsicElements } from "@builder.io/qwik";
const HomeIcon = component$((props: QwikIntrinsicElements["svg"]) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z" />
</svg>
);
});
export default HomeIcon;
```
## Usage in Components
```tsx title="src/routes/index.tsx"
import { component$ } from "@builder.io/qwik";
import HomeIcon from "~/components/icons/mdi/home";
import HeartIcon from "~/components/icons/lucide/heart";
export default component$(() => {
return (
<div>
<HomeIcon class="size-6" />
<HeartIcon width={24} height={24} color="red" />
</div>
);
});
```
================================================
FILE: apps/docs/content/docs/plugins/react-native.mdx
================================================
---
title: React Native
description: Generate React Native components for your icons
---
The React Native plugin generates React Native components using `react-native-svg` from your SVG icons.
## Usage
```ts twoslash title="monicon.config.ts"
import { reactNative } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [
reactNative({
outputPath: "components/icons",
format: "tsx",
suffix: "Icon",
}),
],
} satisfies MoniconConfig;
```
<Callout type="info">
Make sure you have `react-native-svg` installed in your project.
</Callout>
## Options
### `outputPath`
The directory where icon components will be generated.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `"src/components/icons"`
```ts twoslash
import { reactNative } from "@monicon/core/plugins";
// Static path
reactNative({ outputPath: "components/icons" });
// Dynamic path based on icon
reactNative({
outputPath: (icon) => {
if (icon.name.startsWith("mdi:")) {
return "components/icons/mdi";
}
return "components/icons";
},
});
```
### `format`
The output format for generated files.
- **Type:** `"jsx" | "tsx"`
- **Default:** `"tsx"`
```ts twoslash
import { reactNative } from "@monicon/core/plugins";
// Generate JSX files
reactNative({ format: "jsx" });
// Generate TSX files (default)
reactNative({ format: "tsx" });
```
### `componentName`
Customize the component name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** `${icon.name}Icon`
```ts twoslash
import { reactNative } from "@monicon/core/plugins";
reactNative({
componentName: (icon) => {
return `Custom${icon.name}`;
},
});
```
### `fileName`
Customize the file name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** Slugified icon name
```ts twoslash
import { reactNative } from "@monicon/core/plugins";
reactNative({
fileName: (icon) => {
return icon.name.toLowerCase().replace(":", "-");
},
});
```
### `prefix`
Add a prefix to component names.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `""`
```ts twoslash
import { reactNative } from "@monicon/core/plugins";
// Static prefix
reactNative({ prefix: "Icon" });
```
### `suffix`
Add a suffix to component names.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `"Icon"`
```ts twoslash
import { reactNative } from "@monicon/core/plugins";
// Static suffix
reactNative({ suffix: "Component" });
// No suffix
reactNative({ suffix: "" });
```
## Generated Output
For an icon `mdi:home`, the plugin generates:
```tsx title="components/icons/mdi/home.tsx"
import React from "react";
import { SvgXml, type SvgProps } from "react-native-svg";
const HomeIcon = (props: Omit<SvgProps, "xml">) => {
const xml = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z"/></svg>`;
return <SvgXml xml={xml} {...props} />;
};
export default HomeIcon;
```
## Usage in Components
```tsx title="app/(tabs)/index.tsx"
import { View, StyleSheet } from "react-native";
import HomeIcon from "@/components/icons/mdi/home";
import HeartIcon from "@/components/icons/lucide/heart";
export default function HomeScreen() {
return (
<View style={styles.container}>
<HomeIcon width={32} height={32} color="blue" />
<HeartIcon width={32} height={32} color="red" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 10,
},
});
```
================================================
FILE: apps/docs/content/docs/plugins/react.mdx
================================================
---
title: React
description: Generate React components for your icons
---
The React plugin generates React components (TSX or JSX) from your SVG icons.
## Usage
```ts twoslash title="monicon.config.ts"
import { react } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [
react({
outputPath: "src/components/icons",
format: "tsx",
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 { react } from "@monicon/core/plugins";
// Static path
react({ outputPath: "components/icons" });
// Dynamic path based on icon
react({
outputPath: (icon) => {
if (icon.name.startsWith("mdi:")) {
return "components/icons/mdi";
}
return "components/icons";
},
});
```
### `format`
The output format for generated files.
- **Type:** `"jsx" | "tsx"`
- **Default:** `"tsx"`
```ts twoslash
import { react } from "@monicon/core/plugins";
// Generate JSX files
react({ format: "jsx" });
// Generate TSX files (default)
react({ format: "tsx" });
```
### `componentName`
Customize the component name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** `${icon.name}Icon`
```ts twoslash
import { react } from "@monicon/core/plugins";
react({
componentName: (icon) => {
// Custom naming logic
return `Custom${icon.name}`;
},
});
```
### `fileName`
Customize the file name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** Slugified icon name
```ts
react({
fileName: (icon) => {
// Custom file naming
return icon.name.toLowerCase().replace(":", "-");
},
});
```
### `prefix`
Add a prefix to component names.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `""`
```ts twoslash
import { react } from "@monicon/core/plugins";
// Static prefix
react({ prefix: "Icon" });
// Dynamic prefix
react({
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 { react } from "@monicon/core/plugins";
// Static suffix
react({ suffix: "Component" });
// No suffix
react({ suffix: "" });
// Dynamic suffix
react({
suffix: (icon) => {
return icon.name.includes("outline") ? "Outline" : "Icon";
},
});
```
## Generated Output
For an icon `mdi:home`, the plugin generates:
```ts title="src/components/icons/mdi/home.tsx"
const HomeIcon = (props: React.ComponentPropsWithoutRef<"svg">) => {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z" />
</svg>
);
};
export default HomeIcon;
```
## Usage in Components
```tsx title="src/App.tsx"
import HomeIcon from "./components/icons/mdi/home";
import HeartIcon from "./components/icons/lucide/heart";
function App() {
return (
<div>
<HomeIcon className="size-6" />
<HeartIcon width={24} height={24} color="red" />
</div>
);
}
```
================================================
FILE: apps/docs/content/docs/plugins/svelte.mdx
================================================
---
title: Svelte
description: Generate Svelte components for your icons
---
The Svelte plugin generates Svelte components from your SVG icons.
## Usage
```ts twoslash title="monicon.config.ts"
import { svelte } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [
svelte({
outputPath: "'src/lib/components/icons",
suffix: "Icon",
}),
],
} satisfies MoniconConfig;
```
## Options
### `outputPath`
The directory where icon components will be generated.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `"src/lib/components/icons"`
```ts twoslash
import { svelte } from "@monicon/core/plugins";
// Static path
svelte({ outputPath: "src/lib/components/icons" });
// Dynamic path based on icon
svelte({
outputPath: (icon) => {
if (icon.name.startsWith("mdi:")) {
return "src/lib/components/icons/mdi";
}
return "src/lib/components/icons";
},
});
```
### `componentName`
Customize the component name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** `${icon.name}Icon`
```ts twoslash
import { svelte } from "@monicon/core/plugins";
svelte({
componentName: (icon) => {
return `Custom${icon.name}`;
},
});
```
### `fileName`
Customize the file name.
- **Type:** `(icon: Icon) => string | undefined`
- **Default:** Slugified icon name
```ts twoslash
import { svelte } from "@monicon/core/plugins";
svelte({
fileName: (icon) => {
return icon.name.toLowerCase().replace(":", "-");
},
});
```
### `prefix`
Add a prefix to component names.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `""`
```ts twoslash
import { svelte } from "@monicon/core/plugins";
// Static prefix
svelte({ prefix: "Icon" });
// Dynamic prefix
svelte({
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 { svelte } from "@monicon/core/plugins";
// Static suffix
svelte({ suffix: "Component" });
// No suffix
svelte({ suffix: "" });
```
## Generated Output
For an icon `mdi:home`, the plugin generates:
```svelte title="src/lib/components/icons/mdi/home.svelte"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...$$restProps}>
<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z" />
</svg>
```
## Usage in Components
```svelte title="src/routes/+page.svelte"
<script>
import HomeIcon from "$lib/components/icons/mdi/home.svelte";
import HeartIcon from "$lib/components/icons/lucide/heart.svelte";
</script>
<div>
<HomeIcon class="size-6" />
<HeartIcon width={24} height={24} color="red" />
</div>
```
================================================
FILE: apps/docs/content/docs/plugins/svg.mdx
================================================
---
title: SVG
description: Export icons as raw SVG files
---
The SVG plugin exports your icons as raw SVG files, useful when you need standalone SVG files for design tools, documentation, or other purposes.
## Usage
```ts twoslash title="monicon.config.ts"
import { svg } from "@monicon/core/plugins";
import { MoniconConfig } from "@monicon/core";
export default {
icons: ["mdi:home", "lucide:heart"],
plugins: [
svg({
outputPath: "public/icons",
}),
],
} satisfies MoniconConfig;
```
## Options
### `outputPath`
The directory where SVG files will be saved.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** `"src/components/icons"`
```ts twoslash
import { svg } from "@monicon/core/plugins";
// Static path
svg({ outputPath: "public/icons" })
// Dynamic path based on icon
svg({
outputPath: (icon) => {
if (icon.name.startsWith("mdi:")) {
return "public/icons/mdi";
}
return "public/icons";
},
})
```
### `fileName`
Customize the file name for each icon.
- **Type:** `string | ((icon: Icon) => string | undefined)`
- **Default:** Slugified icon name
```ts
import { svg } from "@monicon/core/plugins";
svg({
fileName: (icon) => {
// Custom file naming
return icon.name.toLowerCase().replace(":", "-");
},
})
```
## Generated Output
For an icon `mdi:home`, the plugin generates:
```html title="public/icons/mdi/home.svg"
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>
```
## Usage in HTML
```html
<!-- Direct usage -->
<img src="/icons/mdi/home.svg" alt="Home" width="24" height="24" />
<!-- As background -->
<style>
.icon-home {
background-image: url("/icons/mdi/home.svg");
width: 24px;
height: 24px;
}
</style>
```
================================================
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"
<script setup lang="ts">
const props = defineProps();
</script>
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" v-bind="props">
<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8z" />
</svg>
</template>
<script lang="ts">
export default { name: "HomeIcon" };
</script>
```
## Usage in Components
```vue title="src/App.vue"
<script setup lang="ts">
import HomeIcon from "./components/icons/mdi/home.vue";
import HeartIcon from "./components/icons/lucide/heart.vue";
</script>
<template>
<div>
<HomeIcon class="size-6" />
<HeartIcon width="24" height="24" color="red" />
</div>
</template>
```
================================================
FILE: apps/docs/eslint.config.mjs
================================================
import { defineConfig, globalIgnores } from 'eslint/config';
import nextVitals from 'eslint-config-next/core-web-vitals';
const eslintConfig = defineConfig([
...nextVitals,
globalIgnores([
'.next/**',
'out/**',
'build/**',
'next-env.d.ts',
'.source/**',
]),
]);
export default eslintConfig;
================================================
FILE: apps/docs/next.config.mjs
================================================
import { createMDX } from "fumadocs-mdx/next";
const withMDX = createMDX();
/** @type {import('next').NextConfig} */
const config = {
reactStrictMode: true,
async rewrites() {
return [
{
source: "/docs/:path*.mdx",
destination: "/llms.mdx/docs/:path*",
},
];
},
redirects() {
return [
{
source: "/installation/react",
destination: "/docs/installation/react",
permanent: true,
},
{
source: "/installation/react-rspack",
destination: "/docs/installation/rspack",
permanent: true,
},
{
source: "/installation/react-rollup",
destination: "/docs/installation/rollup",
permanent: true,
},
{
source: "/installation/react-esbuild",
destination: "/docs/installation/esbuild",
permanent: true,
},
{
source: "/installation/react-webpack",
destination: "/docs/installation/webpack",
permanent: true,
},
{
source: "/installation/react-native",
destination: "/docs/installation/react-native",
permanent: true,
},
{
source: "/installation/nextjs",
destination: "/docs/installation/nextjs",
permanent: true,
},
{
source: "/installation/remix",
destination: "/docs/installation/remix",
permanent: true,
},
{
source: "/installation/qwik",
destination: "/docs/installation/qwik",
permanent: true,
},
{
source: "/installation/vue",
destination: "/docs/installation/vue",
permanent: true,
},
{
source: "/installation/nuxt",
destination: "/docs/installation/nuxt",
permanent: true,
},
{
source: "/installation/svelte",
destination: "/docs/installation/svelte",
permanent: true,
},
{
source: "/customization/custom-loader",
destination: "/docs/loaders/custom-loader",
permanent: true,
},
{
source: "/customization/json-collections",
destination: "/docs/loaders/json-collections",
permanent: true,
},
{
source: "/customization/local-collections",
destination: "/docs/loaders/local-collections",
permanent: true,
},
{
source: "/customization/remote-collections",
destination: "/docs/loaders/remote-collections",
permanent: true,
},
];
},
};
export default withMDX(config);
================================================
FILE: apps/docs/package.json
================================================
{
"name": "@monicon/docs",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev",
"start": "next start",
"types:check": "fumadocs-mdx && next typegen && tsc --noEmit",
"postinstall": "fumadocs-mdx",
"lint": "eslint"
},
"dependencies": {
"fumadocs-core": "16.4.7",
"fumadocs-mdx": "14.2.5",
"fumadocs-twoslash": "^3.1.12",
"fumadocs-typescript": "^5.0.1",
"fumadocs-ui": "16.4.7",
"lucide-react": "^0.562.0",
"next": "16.1.1",
"react": "^19.2.3",
"react-dom": "^19.2.3",
"string-sanitizer": "^2.0.2",
"tailwind-merge": "^3.4.0",
"twoslash": "^0.3.6"
},
"devDependencies": {
"@monicon/core": "*",
"@monicon/vite": "*",
"@tailwindcss/postcss": "^4.1.18",
"@types/mdx": "^2.0.13",
"@types/node": "^25.0.5",
"@types/react": "^19.2.8",
"@types/react-dom": "^19.2.3",
"eslint": "^9.39.2",
"eslint-config-next": "16.1.1",
"postcss": "^8.5.6",
"tailwindcss": "^4.1.18",
"typescript": "^5.9.3"
}
}
================================================
FILE: apps/docs/postcss.config.mjs
================================================
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
================================================
FILE: apps/docs/public/browserconfig.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
================================================
FILE: apps/docs/source.config.ts
================================================
import { defineConfig, defineDocs, frontmatterSchema, metaSchema } from 'fumadocs-mdx/config';
import { transformerTwoslash } from 'fumadocs-twoslash';
import { rehypeCodeDefaultOptions } from 'fumadocs-core/mdx-plugins';
// You can customise Zod schemas for frontmatter and `meta.json` here
// see https://fumadocs.dev/docs/mdx/collections
export const docs = defineDocs({
dir: 'content/docs',
docs: {
schema: frontmatterSchema,
postprocess: {
includeProcessedMarkdown: true,
},
},
meta: {
schema: metaSchema,
},
});
export default defineConfig({
mdxOptions: {
rehypeCodeOptions: {
themes: {
light: 'github-light',
dark: 'github-dark',
},
transformers: [...(rehypeCodeDefaultOptions.transformers ?? []), transformerTwoslash()],
// important: Shiki doesn't support lazy loading languages for codeblocks in Twoslash popups
// make sure to define them first (e.g. the common ones)
langs: ['js', 'jsx', 'ts', 'tsx'],
},
},
});
================================================
FILE: apps/docs/src/app/(home)/layout.tsx
================================================
import { HomeLayout } from "fumadocs-ui/layouts/home";
import { baseOptions } from "@/lib/layout.shared";
export default function Layout({ children }: LayoutProps<"/">) {
return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
}
================================================
FILE: apps/docs/src/app/(home)/page.tsx
================================================
import Link from "next/link";
import { ConfigDemo } from "@/components/ConfigDemo";
import { buttonVariants } from "fumadocs-ui/components/ui/button";
import { Card } from "fumadocs-ui/components/card";
import { Metadata } from "next";
export const metadata: Metadata = {
title: "Monicon",
description:
"Monicon is an easy-to-use icon orchestration tool that makes adding icons to your projects simple.",
openGraph: {
title: "Monicon",
description:
"Monicon is an easy-to-use icon orchestration tool that makes adding icons to your projects simple.",
images: ["/og"],
url: "https://monicon.dev",
siteName: "Monicon",
locale: "en_US",
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Monicon",
description:
"Monicon is an easy-to-use icon orchestration tool that makes adding icons to your projects simple.",
images: ["/og"],
},
};
export default function HomePage() {
return (
<div className="flex flex-col items-center flex-1 w-full">
<div className="w-full max-w-7xl px-8 py-16 text-center">
<h1 className="text-4xl lg:text-5xl text-fd-primary leading-tight font-medium tracking-tight mb-6">
Universal Icon Library
</h1>
<p className="text-sm lg:text-base text-fd-muted-foreground max-w-3xl mx-auto mb-8">
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.
</p>
<div className="flex gap-4 justify-center">
<Link className={buttonVariants({ variant: "primary" })} href="/docs">
Get Started
</Link>
<Link
className={buttonVariants({ variant: "outline" })}
href="https://icones.js.org/"
target="_blank"
rel="noopener noreferrer"
>
Explore Icons
</Link>
</div>
</div>
<div className="w-full max-w-7xl px-8 py-0">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card
icon={
<div className="size-4 items-center justify-center flex">🎨</div>
}
title="200,000+ Icons"
>
Access a vast collection of icons from popular icon sets including
Material Design, Feather, Font Awesome, Lucide, and many more.
</Card>
<Card
icon={
<div className="size-4 items-center justify-center flex">🚀</div>
}
title="Framework Agnostic"
>
Works seamlessly with React, Vue, Svelte, Next.js, Nuxt, React
Native, and more. One configuration for all frameworks.
</Card>
<Card
icon={
<div className="size-4 items-center justify-center flex">⚡</div>
}
title="Type-Safe"
>
Full TypeScript support with auto-generated types for all your
icons, providing excellent developer experience.
</Card>
<Card
icon={
<div className="size-4 items-center justify-center flex">📦</div>
}
title="Tree-Shakeable"
>
Only bundle the icons you actually use. Monicon generates individual
icons as separate files for optimal bundle size.
</Card>
<Card
icon={
<div className="size-4 items-center justify-center flex">🔧</div>
}
title="Customizable"
>
Load icons from multiple sources: online collections, local files,
or custom JSON. Create your own plugin for any output format.
</Card>
<Card
icon={
<div className="size-4 items-center justify-center flex">⚙️</div>
}
title="Simple Configuration"
>
Configure once in monicon.config.ts and integrate with your favorite
bundler: Vite, Webpack, Rollup, esbuild, or Rspack.
</Card>
</div>
</div>
<div className="w-full max-w-7xl px-8 py-16">
<h2 className="text-2xl lg:text-3xl text-fd-primary font-medium text-center mb-4">
How It Works
</h2>
<p className="text-sm lg:text-base text-center text-fd-muted-foreground mb-12 max-w-2xl mx-auto">
Define your configuration and select the icons you need. Monicon will
automatically generate optimized icon components tailored to your
framework.
</p>
<ConfigDemo />
</div>
<div className="w-full max-w-7xl px-8 py-8 border-t border-fd-border">
<div className="flex flex-col items-center gap-2 text-center">
<p className="text-sm text-fd-muted-foreground">
Made by{" "}
<a
href="https://twitter.com/senkanoktay"
target="_blank"
rel="noopener noreferrer"
className="text-fd-primary hover:underline font-medium"
>
@senkanoktay
</a>
</p>
</div>
</div>
</div>
);
}
================================================
FILE: apps/docs/src/app/api/search/route.ts
================================================
import { source } from '@/lib/source';
import { createFromSource } from 'fumadocs-core/search/server';
export const { GET } = createFromSource(source, {
// https://docs.orama.com/docs/orama-js/supported-languages
language: 'english',
});
================================================
FILE: apps/docs/src/app/docs/[[...slug]]/page.tsx
================================================
import { getPageImage, source } from "@/lib/source";
import {
DocsBody,
DocsDescription,
DocsPage,
DocsTitle,
} from "fumadocs-ui/layouts/docs/page";
import { notFound } from "next/navigation";
import { getMDXComponents } from "@/mdx-components";
import type { Metadata } from "next";
import { createRelativeLink } from "fumadocs-ui/mdx";
import { LLMCopyButton, ViewOptions } from "@/components/ai/page-actions";
export default async function Page(props: PageProps<"/docs/[[...slug]]">) {
const params = await props.params;
const page = source.getPage(params.slug);
if (!page) notFound();
const MDX = page.data.body;
const gitConfig = {
user: "oktaysenkan",
repo: "monicon",
branch: "main",
};
return (
<DocsPage toc={page.data.toc} full={page.data.full}>
<DocsTitle>{page.data.title}</DocsTitle>
<DocsDescription className="mb-0">
{page.data.description}
</DocsDescription>
<div className="flex flex-row gap-2 items-center border-b pb-6">
<LLMCopyButton markdownUrl={`${page.url}.mdx`} />
<ViewOptions
markdownUrl={`${page.url}.mdx`}
// update it to match your repo
githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/apps/docs/content/docs/${page.path}`}
/>
</div>
<DocsBody>
<MDX
components={getMDXComponents({
// this allows you to link to other pages with relative file paths
a: createRelativeLink(source, page),
})}
/>
</DocsBody>
</DocsPage>
);
}
export async function generateStaticParams() {
return source.generateParams();
}
export async function generateMetadata(
props: PageProps<"/docs/[[...slug]]">
): Promise<Metadata> {
const params = await props.params;
const page = source.getPage(params.slug);
if (!page) notFound();
return {
title: `${page.data.title} - Monicon`,
description: page.data.description,
openGraph: {
images: getPageImage(page).url,
},
};
}
================================================
FILE: apps/docs/src/app/docs/layout.tsx
================================================
import { source } from '@/lib/source';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { baseOptions } from '@/lib/layout.shared';
export default function Layout({ children }: LayoutProps<'/docs'>) {
return (
<DocsLayout tree={source.getPageTree()} {...baseOptions()}>
{children}
</DocsLayout>
);
}
================================================
FILE: apps/docs/src/app/global.css
================================================
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
@import 'fumadocs-twoslash/twoslash.css';
================================================
FILE: apps/docs/src/app/layout.tsx
================================================
import { RootProvider } from "fumadocs-ui/provider/next";
import "./global.css";
import { Inter } from "next/font/google";
import Script from "next/script";
const inter = Inter({
subsets: ["latin"],
});
export default function Layout({ children }: LayoutProps<"/">) {
return (
<html lang="en" className={inter.className} suppressHydrationWarning>
<body className="flex flex-col min-h-screen">
<RootProvider>{children}</RootProvider>
</body>
<Script
src="https://cdn.seline.com/seline.js"
data-token="df6210bb1ad8bf7"
strategy="afterInteractive"
/>
<Script
src="https://cloud.umami.is/script.js"
data-website-id="6bb1666f-8ea7-4876-9348-acb7d9679e79"
strategy="afterInteractive"
/>
</html>
);
}
================================================
FILE: apps/docs/src/app/llms-full.txt/route.ts
================================================
import { getLLMText, source } from '@/lib/source';
export const revalidate = false;
export async function GET() {
const scan = source.getPages().map(getLLMText);
const scanned = await Promise.all(scan);
return new Response(scanned.join('\n\n'));
}
================================================
FILE: apps/docs/src/app/llms.mdx/docs/[[...slug]]/route.ts
================================================
import { getLLMText, source } from '@/lib/source';
import { notFound } from 'next/navigation';
export const revalidate = false;
export async function GET(_req: Request, { params }: RouteContext<'/llms.mdx/docs/[[...slug]]'>) {
const { slug } = await params;
const page = source.getPage(slug);
if (!page) notFound();
return new Response(await getLLMText(page), {
headers: {
'Content-Type': 'text/markdown',
},
});
}
export function generateStaticParams() {
return source.generateParams();
}
================================================
FILE: apps/docs/src/app/manifest.ts
================================================
import type { MetadataRoute } from 'next'
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'Monicon',
short_name: 'Monicon',
description: 'Monicon',
start_url: '/',
display: 'standalone',
background_color: '#fff',
theme_color: '#fff',
icons: [
{
src: "/favicon.ico",
sizes: "any",
type: "image/x-icon",
},
{
src: "/android-icon-36x36.png",
sizes: "36x36",
type: "image/png",
},
{
src: "/android-icon-48x48.png",
sizes: "48x48",
type: "image/png",
},
{
src: "/android-icon-72x72.png",
sizes: "72x72",
type: "image/png",
},
{
src: "/android-icon-96x96.png",
sizes: "96x96",
type: "image/png",
},
{
src: "/android-icon-144x144.png",
sizes: "144x144",
type: "image/png",
},
{
src: "/android-icon-192x192.png",
sizes: "192x192",
type: "image/png",
},
],
};
}
================================================
FILE: apps/docs/src/app/og/docs/[...slug]/route.tsx
================================================
import { getPageImage, source } from "@/lib/source";
import { notFound } from "next/navigation";
import { ImageResponse } from "next/og";
import { generate as DefaultImage } from "fumadocs-ui/og";
export const revalidate = false;
export async function GET(
_req: Request,
{ params }: RouteContext<"/og/docs/[...slug]">
) {
const { slug } = await params;
const page = source.getPage(slug.slice(0, -1));
if (!page) notFound();
return new ImageResponse(
(
<DefaultImage
title={page.data.title}
description={page.data.description}
site="Monicon"
primaryColor="#403c3b"
primaryTextColor="white"
/>
),
{
width: 1200,
height: 630,
}
);
}
export function generateStaticParams() {
return source.getPages().map((page) => ({
lang: page.locale,
slug: getPageImage(page).segments,
}));
}
================================================
FILE: apps/docs/src/app/og/route.tsx
================================================
import { ImageResponse } from "next/og";
import { generate as DefaultImage } from "fumadocs-ui/og";
export const revalidate = false;
export async function GET(_req: Request) {
const searchParams = new URL(_req.url).searchParams;
const title = searchParams.get("title") ?? "Monicon";
const description =
searchParams.get("description") ??
"Monicon is an easy-to-use icon orchestration tool that makes adding icons to your projects simple.";
return new ImageResponse(
(
<DefaultImage
title={title}
description={description}
primaryColor="#403c3b"
primaryTextColor="white"
/>
),
{
width: 1200,
height: 630,
}
);
}
================================================
FILE: apps/docs/src/app/sitemap.ts
================================================
import type { MetadataRoute } from 'next';
import { source } from '@/lib/source';
export const revalidate = false;
const getBaseUrl = () => {
if (process.env.VERCEL_URL)
return `https://${process.env.VERCEL_URL}`;
return 'http://localhost:3000';
}
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const url = (path: string): string => new URL(path, getBaseUrl()).toString();
const docsPagesSitemap: MetadataRoute.Sitemap = await Promise.all(
source.getPages().map(async (page) => {
return {
url: url(page.url),
changeFrequency: 'weekly',
priority: 0.5,
}
})
);
return [
{
url: url('/'),
changeFrequency: 'monthly',
priority: 1,
},
{
url: url('/docs'),
changeFrequency: 'monthly',
priority: 0.8,
},
...docsPagesSitemap,
];
}
================================================
FILE: apps/docs/src/components/ConfigDemo.tsx
================================================
"use client";
import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
import { buttonVariants } from "fumadocs-ui/components/ui/button";
import { File, Folder, Files } from "fumadocs-ui/components/files";
import { useState } from "react";
import { CodeBlock } from "fumadocs-ui/components/codeblock";
const examples = [
{
name: "React",
code: `import type { MoniconConfig } from "@monicon/core";
import { react } from "@monicon/core/plugins";
export default {
icons: ["mdi:home"],
plugins: [
react(),
],
} satisfies MoniconConfig;`,
files: ["src/components/icons/mdi/home.tsx"],
},
{
name: "Vue",
code: `import type { MoniconConfig } from "@monicon/core";
import { vue } from "@monicon/core/plugins";
export default {
icons: ["mdi:home"],
collections: ["lucide"],
plugins: [
vue(),
],
} satisfies MoniconConfig;`,
files: ["src/components/icons/mdi/home.vue"],
},
{
name: "Svelte",
code: `import type { MoniconConfig } from "@monicon/core";
import { svelte } from "@monicon/core/plugins";
export default {
icons: ["mdi:home"],
collections: ["lucide"],
plugins: [
svelte(),
],
} satisfies MoniconConfig;`,
files: ["src/components/icons/mdi/home.svelte"],
},
{
name: "SVG",
code: `import type { MoniconConfig } from "@monicon/core";
import { svg } from "@monicon/core/plugins";
export default {
icons: ["mdi:home"],
collections: ["lucide"],
plugins: [
svg(),
],
} satisfies MoniconConfig;`,
files: ["src/components/icons/mdi/home.svg"],
},
{
name: "Advanced",
code: `import type { MoniconConfig } from "@monicon/core";
import {
loadJSONCollection,
loadLocalCollection,
loadRemoteCollection,
} from "@monicon/core/loaders";
import { react } from "@monicon/core/plugins";
export default {
icons: ["mdi:home"],
collections: ["lucide"],
plugins: [
react(),
],
loaders: {
local: loadLocalCollection("local"),
json: loadJSONCollection(
"https://gist.githubusercontent.com/oktaysenkan/39681ecdb066dc44c52fa840dacc7562/raw/6aa7b8f8bf9d806742be0e1c4759809391d00bcd/icons.json"
),
remote: loadRemoteCollection({
download: "https://api.iconify.design/lucide:cloud-download.svg",
attachment: "https://api.iconify.design/ri:attachment-2.svg",
}),
},
} satisfies MoniconConfig;`,
files: [
"src/components/icons/mdi/home.tsx",
"src/components/icons/lucide/house.tsx",
"src/components/icons/lucide/message-circle.tsx",
"src/components/icons/lucide/download.tsx",
"src/components/icons/lucide/<other-lucide-icons>.tsx",
"src/components/icons/local/<all-icons-in-folder>.tsx",
"src/components/icons/json/network.tsx",
"src/components/icons/remote/download.tsx",
"src/components/icons/remote/attachment.tsx",
],
},
{
name: "Custom",
code: `import type { MoniconConfig } from "@monicon/core";
import { generic } from "@monicon/core/plugins";
export default {
icons: ["mdi:home"],
plugins: [
generic({
extension: "json",
content: (icon) => JSON.stringify(icon, null, 2),
}),
],
} satisfies MoniconConfig;`,
files: ["src/components/icons/mdi/home.json"],
},
];
interface FileNode {
name: string;
type: "file" | "folder";
children?: FileNode[];
}
function buildFileTree(paths: string[]): FileNode {
const root: FileNode = { name: "", type: "folder", children: [] };
paths.forEach((path) => {
const parts = path.split("/");
let current = root;
parts.forEach((part, index) => {
const isFile = index === parts.length - 1;
let node = current.children?.find((child) => child.name === part);
if (!node) {
node = {
name: part,
type: isFile ? "file" : "folder",
children: isFile ? undefined : [],
};
current.children?.push(node);
}
if (!isFile) {
current = node;
}
});
});
return root;
}
function renderFileTree(node: FileNode): React.ReactNode {
if (node.type === "file") {
return <File key={node.name} name={node.name} />;
}
if (node.children && node.children.length > 0) {
return (
<Folder key={node.name} name={node.name} defaultOpen>
{node.children.map((child) => renderFileTree(child))}
</Folder>
);
}
return null;
}
export function ConfigDemo() {
const [currentIndex, setCurrentIndex] = useState(0);
const currentExample = examples[currentIndex];
const fileTree = buildFileTree(currentExample.files);
return (
<div className="relative w-full max-w-7xl flex flex-col gap-6">
<div className="flex items-center gap-2 flex-wrap">
{examples.map((example, index) => (
<button
key={example.name}
className={buttonVariants({
variant: index === currentIndex ? "secondary" : "outline",
className: "cursor-pointer",
})}
onClick={() => setCurrentIndex(index)}
>
{example.name}
</button>
))}
</div>
<div className="relative w-full flex gap-12 lg:flex-row flex-col">
<div className="flex flex-col w-full lg:w-8/12 p-2 border rounded-md gap-2 h-fit">
<div className="flex flex-col border-b -mx-2">
<h2 className="font-medium text-sm px-2 pb-2">monicon.config.ts</h2>
</div>
<DynamicCodeBlock lang="ts" code={currentExample.code} />
</div>
<div className="flex flex-col w-full lg:w-4/12">
<div
key={currentIndex}
className="p-2 border rounded-md flex flex-col gap-2"
>
<div className="flex flex-col border-b -mx-2">
<h2 className="font-medium text-sm px-2 pb-2">Generated Files</h2>
</div>
<Files>
{fileTree.children?.map((child) => renderFileTree(child))}
</Files>
</div>
</div>
</div>
</div>
);
}
================================================
FILE: apps/docs/src/components/ai/page-actions.tsx
================================================
'use client';
import { useMemo, useState } from 'react';
import { Check, ChevronDown, Copy, ExternalLinkIcon, MessageCircleIcon } from 'lucide-react';
import { cn } from '@/lib/cn';
import { useCopyButton } from 'fumadocs-ui/utils/use-copy-button';
import { buttonVariants } from 'fumadocs-ui/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from 'fumadocs-ui/components/ui/popover';
const cache = new Map<string, string>();
export function LLMCopyButton({
/**
* A URL to fetch the raw Markdown/MDX content of page
*/
markdownUrl,
}: {
markdownUrl: string;
}) {
const [isLoading, setLoading] = useState(false);
const [checked, onClick] = useCopyButton(async () => {
const cached = cache.get(markdownUrl);
if (cached) return navigator.clipboard.writeText(cached);
setLoading(true);
try {
await navigator.clipboard.write([
new ClipboardItem({
'text/plain': fetch(markdownUrl).then(async (res) => {
const content = await res.text();
cache.set(markdownUrl, content);
return content;
}),
}),
]);
} finally {
setLoading(false);
}
});
return (
<button
disabled={isLoading}
className={cn(
buttonVariants({
color: 'secondary',
size: 'sm',
className: 'gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground',
}),
)}
onClick={onClick}
>
{checked ? <Check /> : <Copy />}
Copy Markdown
</button>
);
}
export function ViewOptions({
markdownUrl,
githubUrl,
}: {
/**
* A URL to the raw Markdown/MDX content of page
*/
markdownUrl: string;
/**
* Source file URL on GitHub
*/
githubUrl: string;
}) {
const items = useMemo(() => {
const fullMarkdownUrl =
typeof window !== 'undefined' ? new URL(markdownUrl, window.location.origin) : 'loading';
const q = `Read ${fullMarkdownUrl}, I want to ask questions about it.`;
return [
{
title: 'Open in GitHub',
href: githubUrl,
icon: (
<svg fill="currentColor" role="img" viewBox="0 0 24 24">
<title>GitHub</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
</svg>
),
},
{
title: 'Open in Scira AI',
href: `https://scira.ai/?${new URLSearchParams({
q,
})}`,
icon: (
<svg
width="910"
height="934"
viewBox="0 0 910 934"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>Scira AI</title>
<path
d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
fill="currentColor"
stroke="currentColor"
strokeWidth="8"
strokeLinejoin="round"
/>
<path
d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
fill="currentColor"
stroke="currentColor"
strokeWidth="8"
strokeLinejoin="round"
/>
<path
d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
stroke="currentColor"
strokeWidth="20"
strokeLinejoin="round"
/>
<path
d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
stroke="currentColor"
strokeWidth="20"
strokeLinejoin="round"
/>
<path
d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
fill="currentColor"
stroke="currentColor"
strokeWidth="8"
strokeLinejoin="round"
/>
<path
d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
fill="currentColor"
stroke="currentColor"
strokeWidth="8"
strokeLinejoin="round"
/>
<path
d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
stroke="currentColor"
strokeWidth="30"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
),
},
{
title: 'Open in ChatGPT',
href: `https://chatgpt.com/?${new URLSearchParams({
hints: 'search',
q,
})}`,
icon: (
<svg
role="img"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<title>OpenAI</title>
<path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
</svg>
),
},
{
title: 'Open in Claude',
href: `https://claude.ai/new?${new URLSearchParams({
q,
})}`,
icon: (
<svg
fill="currentColor"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<title>Anthropic</title>
<path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" />
</svg>
),
},
{
title: 'Open in T3 Chat',
href: `https://t3.chat/new?${new URLSearchParams({
q,
})}`,
icon: <MessageCircleIcon />,
},
];
}, [githubUrl, markdownUrl]);
return (
<Popover>
<PopoverTrigger
className={cn(
buttonVariants({
color: 'secondary',
size: 'sm',
className: 'gap-2',
}),
)}
>
Open
<ChevronDown className="size-3.5 text-fd-muted-foreground" />
</PopoverTrigger>
<PopoverContent className="flex flex-col">
{items.map((item) => (
<a
key={item.href}
href={item.href}
rel="noreferrer noopener"
target="_blank"
className="text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4"
>
{item.icon}
{item.title}
<ExternalLinkIcon className="text-fd-muted-foreground size-3.5 ms-auto" />
</a>
))}
</PopoverContent>
</Popover>
);
}
================================================
FILE: apps/docs/src/components/mdx/mermaid.tsx
================================================
'use client';
import { use, useEffect, useId, useState } from 'react';
import { useTheme } from 'next-themes';
export function Mermaid({ chart }: { chart: string }) {
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
if (!mounted) return;
return <MermaidContent chart={chart} />;
}
const cache = new Map<string, Promise<unknown>>();
function cachePromise<T>(key: string, setPromise: () => Promise<T>): Promise<T> {
const cached = cache.get(key);
if (cached) return cached as Promise<T>;
const promise = setPromise();
cache.set(key, promise);
return promise;
}
function MermaidContent({ chart }: { chart: string }) {
const id = useId();
const { resolvedTheme } = useTheme();
const { default: mermaid } = use(cachePromise('mermaid', () => import('mermaid')));
mermaid.initialize({
startOnLoad: false,
securityLevel: 'loose',
fontFamily: 'inherit',
themeCSS: 'margin: 1.5rem auto 0;',
theme: resolvedTheme === 'dark' ? 'dark' : 'default',
});
const { svg, bindFunctions } = use(
cachePromise(`${chart}-${resolvedTheme}`, () => {
return mermaid.render(id, chart.replaceAll('\\n', '\n'));
}),
);
return (
<div
ref={(container) => {
if (container) bindFunctions?.(container);
}}
dangerouslySetInnerHTML={{ __html: svg }}
/>
);
}
================================================
FILE: apps/docs/src/lib/cn.ts
================================================
export { twMerge as cn } from 'tailwind-merge';
================================================
FILE: apps/docs/src/lib/layout.shared.tsx
================================================
import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
import { BookIcon } from "lucide-react";
export function baseOptions(): BaseLayoutProps {
return {
nav: {
title: (
<svg
width="30"
height="30"
viewBox="0 0 1000 1000"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M133.907 282.689C166.568 275.563 195.962 272 222.09 272C248.219 272 269.893 272.594 287.114 273.781V318.318C301.366 306.442 319.181 296.347 340.558 288.033C361.936 279.72 381.235 275.563 398.456 275.563C466.152 275.563 511.283 292.487 533.848 326.335C548.694 312.083 568.29 300.207 592.637 290.705C616.983 280.61 639.549 275.563 660.333 275.563C725.653 275.563 769.596 290.409 792.162 320.1C814.727 349.197 826.01 404.126 826.01 484.886V629.185C849.169 638.093 865.499 648.188 875 659.47L866.093 728.057H661.223L652.316 659.47C660.629 648.188 676.96 638.093 701.306 629.185V452.819C701.306 420.159 696.853 398.485 687.945 387.796C679.038 377.107 661.223 371.762 634.501 371.762C608.373 371.762 583.432 381.561 559.679 401.157C562.648 421.347 564.133 449.257 564.133 484.886V629.185C587.292 638.093 603.622 648.188 613.124 659.47L604.216 728.057H399.347L390.439 659.47C398.753 648.188 415.083 638.093 439.43 629.185V452.819C439.43 420.159 434.976 398.485 426.069 387.796C417.162 377.107 399.644 371.762 373.515 371.762C347.387 371.762 322.447 381.264 298.694 400.266V629.185C321.853 638.093 338.183 648.188 347.684 659.47L338.777 728.057H133.907L125 659.47C133.314 648.188 149.644 638.093 173.99 629.185V381.561C153.207 374.435 136.876 364.34 125 351.276L133.907 282.689Z"
fill="currentColor"
/>
</svg>
),
},
links: [
{
icon: <BookIcon />,
text: "v1 Documentation",
url: "https://v1.monicon.dev",
external: true,
on: "menu",
description: "Documentation for Monicon v1",
},
],
githubUrl: "https://github.com/oktaysenkan/monicon",
};
}
================================================
FILE: apps/docs/src/lib/source.ts
================================================
import { docs } from 'fumadocs-mdx:collections/server';
import { type InferPageType, loader } from 'fumadocs-core/source';
import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';
// See https://fumadocs.dev/docs/headless/source-api for more info
export const source = loader({
baseUrl: '/docs',
source: docs.toFumadocsSource(),
plugins: [lucideIconsPlugin()],
});
export function getPageImage(page: InferPageType<typeof source>) {
const segments = [...page.slugs, 'image.png'];
return {
segments,
url: `/og/docs/${segments.join('/')}`,
};
}
export async function getLLMText(page: InferPageType<typeof source>) {
const processed = await page.data.getText('processed');
return `# ${page.data.title}
${processed}`;
}
================================================
FILE: apps/docs/src/mdx-components.tsx
================================================
import defaultMdxComponents from "fumadocs-ui/mdx";
import type { MDXComponents } from "mdx/types";
import * as TabsComponents from "fumadocs-ui/components/tabs";
import * as CodeBlockComponents from "fumadocs-ui/components/codeblock";
import * as Twoslash from "fumadocs-twoslash/ui";
import {
createGenerator,
createFileSystemGeneratorCache,
} from "fumadocs-typescript";
import { AutoTypeTable } from "fumadocs-typescript/ui";
import { Mermaid } from "@/components/mdx/mermaid";
const generator = createGenerator({
// set a cache, necessary for serverless platform like Vercel
cache: createFileSystemGeneratorCache(".next/fumadocs-typescript"),
});
export function getMDXComponents(components?: MDXComponents): MDXComponents {
return {
...defaultMdxComponents,
...TabsComponents,
...CodeBlockComponents,
pre: ({ ref: _ref, ...props }) => (
<CodeBlockComponents.CodeBlock {...props}>
<CodeBlockComponents.Pre>{props.children}</CodeBlockComponents.Pre>
</CodeBlockComponents.CodeBlock>
),
AutoTypeTable: (props) => (
<AutoTypeTable {...props} generator={generator} />
),
Mermaid,
...Twoslash,
...components,
};
}
================================================
FILE: apps/docs/tsconfig.json
================================================
{
"compilerOptions": {
"baseUrl": ".",
"target": "ESNext",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"paths": {
"@/*": [
"./src/*"
],
"fumadocs-mdx:collections/*": [
".source/*"
]
},
"plugins": [
{
"name": "next"
}
]
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}
================================================
FILE: apps/legacy-docs/.gitignore
================================================
.next
node_modules
================================================
FILE: apps/legacy-docs/CHANGELOG.md
================================================
# @monicon/legacy-docs
## 2.0.8
### Patch Changes
- [`8623e16`](https://github.com/oktaysenkan/monicon/commit/8623e16e28e6a562d7a9179e4f45eedc05f0d3bf) Thanks [@oktaysenkan](https://github.com/oktaysenkan)! - update vite peer dependencies version
## 2.0.7
### Patch Changes
- [`450efa2`](https://github.com/oktaysenkan/monicon/commit/450efa221f0f33b56816d7f4c4296d637f210bc2) Thanks [@oktaysenkan](https://github.com/oktaysenkan)! - feat: use only needed loaders
## 2.0.6
### Patch Changes
- [#89](https://github.com/oktaysenkan/monicon/pull/89) [`b07677a`](https://github.com/oktaysenkan/monicon/commit/b07677a0f8ae704a439e34c0e9a824edeff328d6) Thanks [@oktaysenkan](https://github.com/oktaysenkan)! - feat: set default watch false for cli
## 2.0.5
### Patch Changes
- [#87](https://github.com/oktaysenkan/monicon/pull/87) [`a68704f`](https://github.com/oktaysenkan/monicon/commit/a68704f9fdcb9e7de679779df61a9cfe4ffb97e9) Thanks [@oktaysenkan](https://github.com/oktaysenkan)! - feat: change component name generation algorithm
## 2.0.4
### Patch Changes
- [`9a5487c`](https://github.com/oktaysenkan/monicon/commit/9a5487c3b4babbc005de3aeeb25767c9aab613f5) Thanks [@oktaysenkan](https://github.com/oktaysenkan)! - fix: sanitize component names
## 2.0.3
### Patch Changes
- [#84](https://github.com/oktaysenkan/monicon/pull/84) [`313dde7`](https://github.com/oktaysenkan/monicon/commit/313dde7a8425df79e0d42d6cbf40883d5e56da5b) Thanks [@oktaysenkan](https://github.com/oktaysenkan)! - chore: update cosmoconfig
## 2.0.2
### Patch Changes
- [#82](https://github.com/oktaysenkan/monicon/pull/82) [`6bff168`](https://github.com/oktaysenkan/monicon/commit/6bff1681f957d236f87330e276dfba3ecd88bd9e) Thanks [@oktaysenkan](https://github.com/oktaysenkan)! - refactor: add typescript config package as dev dep
## 2.0.1
### Patch Changes
- [#80](https://github.com/oktaysenkan/monicon/pull/80) [`6b083a5`](https://github.com/oktaysenkan/monicon/commit/6b083a55396c8269c831155efe0d4c427b0a8a1d) Thanks [@oktaysenkan](https://github.com/oktaysenkan)! - fix: resolve npx executable issue
## 2.0.0
### Patch Changes
- [#70](https://github.com/oktaysenkan/monicon/pull/70) [`ceeca33`](https://github.com/oktaysenkan/monicon/commit/ceeca334f2ad005206a2e7ce4b9276dcd23dbe35) Thanks [@oktaysenkan](https://github.com/oktaysenkan)! - introduce generic plugin system for creating custom icon transformations and output formats. This powerful new plugin allows unlimited extensibility - generate icons in any format beyond the built-in framework plugins by controlling file paths, names, extensions, and content generation.
================================================
FILE: apps/legacy-docs/LICENSE
================================================
MIT License
Copyright (c) 2022 Shu Ding
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: apps/legacy-docs/README.md
================================================
# Nextra Docs Template
This is a template for creating documentation with [Nextra](https://nextra.site).
[**Live Demo →**](https://nextra-docs-template.vercel.app)
[](https://nextra-docs-template.vercel.app)
## Quick Start
Click the button to clone this repository and deploy it on Vercel:
[](https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra-docs-template&showOptionalTeamCreation=false)
## Local Development
First, run `pnpm i` to install the dependencies.
Then, run `pnpm dev` to start the development server and visit localhost:3000.
## License
This project is licensed under the MIT License.
================================================
FILE: apps/legacy-docs/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
================================================
FILE: apps/legacy-docs/next-sitemap.config.js
================================================
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: process.env.SITE_URL || "https://monicon-docs.vercel.app",
generateRobotsTxt: true,
};
================================================
FILE: apps/legacy-docs/next.config.mjs
================================================
import nextra from "nextra";
const withNextra = nextra({
theme: "nextra-theme-docs",
themeConfig: "./theme.config.tsx",
});
export default withNextra();
================================================
FILE: apps/legacy-docs/package.json
================================================
{
"name": "@monicon/legacy-docs",
"version": "2.0.8",
"description": "Monicon V1 Documentation",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"postbuild": "next-sitemap"
},
"license": "MIT",
"dependencies": {
"@vercel/og": "^0.6.3",
"next": "^14.2.14",
"next-sitemap": "^4.2.3",
"nextra": "^3.0.11",
"nextra-theme-docs": "^3.0.11",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "18.11.10",
"typescript": "^4.9.3"
},
"dependenciesMeta": {
"nextra": {
"injected": true
},
"nextra-theme-docs": {
"injected": true
}
}
}
================================================
FILE: apps/legacy-docs/pages/_app.tsx
================================================
function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default App;
================================================
FILE: apps/legacy-docs/pages/_meta.tsx
================================================
export default {
index: "Introduction",
installation: "Installation",
customization: "Customization",
troubleshooting: "Troubleshooting",
contact: {
title: "Contact ↗",
type: "page",
href: "https://twitter.com/senkanoktay",
newWindow: true,
},
};
================================================
FILE: apps/legacy-docs/pages/api/og.tsx
================================================
import { NextApiRequest, NextApiResponse } from "next";
import { ImageResponse } from "@vercel/og";
export const config = {
runtime: "edge",
};
const interMedium = fetch(
new URL("../../public/Inter-Medium.ttf", import.meta.url)
).then((res) => res.arrayBuffer());
const dotPattern = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<circle cx="1" cy="1" r="1" fill="rgb(163, 163, 163, 0.5)" />
</svg>
`;
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
const [interMediumFont] = await Promise.all([interMedium]);
const { searchParams } = new URL(req.url || "", `http://${req.headers.host}`);
const text = searchParams.get("text") || "Monicon";
return new ImageResponse(
(
<div
style={{
color: "white",
backgroundImage: `url('data:image/svg+xml;utf8,${encodeURIComponent(dotPattern)}'), linear-gradient(-165deg, #121212 40%, #000 100%)`,
backgroundRepeat: "repeat",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
padding: "100px 200px 100px 100px",
fontFamily: "Inter",
fontWeight: 500,
fontSize: 80,
}}
>
{text}
</div>
),
{
width: 1200,
height: 630,
fonts: [
{
name: "Inter",
data: interMediumFont,
style: "normal",
weight: 500,
},
],
}
);
}
================================================
FILE: apps/legacy-docs/pages/customization/_meta.tsx
================================================
export default {
"local-collections": "Local Collections",
"json-collections": "JSON Collections",
"remote-collections": "Remote Collections",
"custom-loader": "Custom Loader",
};
================================================
FILE: apps/legacy-docs/pages/customization/custom-loader.mdx
================================================
# Custom Loader
Custom loaders in Monicon allow you to define your own logic for providing SVG icons. This is especially useful when you want to generate icons dynamically or load them from a non-standard source. Below is an example of how to write and use a custom loader.
```ts
import { Loader } from "@monicon/loader";
export const fooLoader: Loader<void> = () => async () => {
return {
bar: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-flask-conical"><path d="M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2"/><path d="M8.5 2h7"/><path d="M7 16h10"/></svg>',
};
};
```
```ts filename="vite.config.ts"
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import monicon from "@monicon/vite";
export default defineConfig({
plugins: [
react(),
monicon({
customCollections: {
foo: fooLoader(),
},
}),
],
});
```
### Usage
Once your custom loader is set up, you can use the icons it provides in your React components:
```tsx filename="src/App.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="foo:bar" size={24} />
</main>
);
}
export default App;
```
================================================
FILE: apps/legacy-docs/pages/customization/json-collections.mdx
================================================
# JSON Collections
JSON Collections in Monicon allow you to define custom icons from JSON files or URLs. These JSON files typically map icon names to their corresponding SVG data, making it easy to include and manage custom icon sets in your project. In the example above, the loadJSONCollection function fetches icons from a hosted JSON file and integrates them into your application.
```ts filename="vite.config.ts"
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import monicon from "@monicon/vite";
import { loadJSONCollection } from "@monicon/loader";
export default defineConfig({
plugins: [
react(),
monicon({
customCollections: {
json: loadJSONCollection(
"https://gist.githubusercontent.com/oktaysenkan/39681ecdb066dc44c52fa840dacc7562/raw/6aa7b8f8bf9d806742be0e1c4759809391d00bcd/icons.json"
),
},
}),
],
});
```
### Example JSON File
Here is an example JSON file you can use for a Monicon JSON Collection. This file maps an icon name (network) to its corresponding SVG markup:
```json filename="https://gist.githubusercontent.com/oktaysenkan/39681ecdb066dc44c52fa840dacc7562/raw/6aa7b8f8bf9d806742be0e1c4759809391d00bcd/icons.json"
{
"network": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"16\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"2\" y=\"16\" width=\"6\" height=\"6\" rx=\"1\"/><rect x=\"9\" y=\"2\" width=\"6\" height=\"6\" rx=\"1\"/><path d=\"M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3\"/><path d=\"M12 12V8\"/></svg>"
}
```
### Usage
You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.
```tsx filename="src/App.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="json:network" size={24} />
</main>
);
}
export default App;
```
================================================
FILE: apps/legacy-docs/pages/customization/local-collections.mdx
================================================
# Local Collections
Local Collections in Monicon allow you to use icons stored locally on your file system. These collections can be loaded using the `loadLocalCollection` function, which points to the directory containing your SVG files. This setup is ideal for projects where icons are managed locally, providing a quick and flexible way to integrate custom icon sets.
```ts filename="vite.config.ts"
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import monicon from "@monicon/vite";
import { loadLocalCollection } from "@monicon/loader";
export default defineConfig({
plugins: [
react(),
monicon({
customCollections: {
local: loadLocalCollection("assets/icons"),
},
}),
],
});
```
### Example Directory Structure
For the above configuration, your assets/icons directory might look like this:
```
assets/
└── icons/
├── folder.svg
├── user.svg
└── network.svg
```
Each SVG file in the directory is automatically assigned a name based on its filename (e.g., `folder` for `folder.svg`).
### Usage
You can now use Monicon in your React components. Here’s an example of how to use an icon from your local collection in a React component:
```tsx filename="src/App.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="local:folder" size={24} />
<Monicon name="local:user" size={24} />
<Monicon name="local:network" size={24} />
</main>
);
}
export default App;
```
================================================
FILE: apps/legacy-docs/pages/customization/remote-collections.mdx
================================================
# Remote Collections
Remote Collections in Monicon allow you to fetch and use icons directly from remote URLs. These collections are configured using the `loadRemoteCollection` function, which maps icon names to their respective URLs. This setup is perfect for integrating third-party or dynamically fetched icons into your project.
```ts filename="vite.config.ts"
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import monicon from "@monicon/vite";
import { loadRemoteCollection } from "@monicon/loader";
export default defineConfig({
plugins: [
react(),
monicon({
customCollections: {
remote: loadRemoteCollection({
download: "https://api.iconify.design/lucide:cloud-download.svg",
attachment: "https://api.iconify.design/ri:attachment-2.svg",
}),
},
}),
],
});
```
### Usage
You can now use Monicon in your React components. Here’s an example of how to use icons from your remote collection in a React component:
```tsx filename="src/App.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="remote:download" size={24} />
<Monicon name="remote:attachment" size={24} />
</main>
);
}
export default App;
```
================================================
FILE: apps/legacy-docs/pages/index.mdx
================================================
# Monicon: Universal Icon Library
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.
## Why Use Monicon?
- **Huge Icon Library**: Get access to over 200,000 icons from famous sets like Material Design, Feather, and Font Awesome.
- **Custom Icons**: You can create custom icons and use them in your projects. Monicon makes it easy to add your own icons.
- **Works with Modern Tools**: Monicon supports tools like Vite, Webpack, Rollup, and others, so it's ready for any project.
- **Fast and Efficient**: Monicon loads icons quickly to keep your project running smoothly. No flickering or lagging.
- **Easy to Use**: Works with React, Vue, Svelte, Next.js, and other popular frameworks, making icon integration simple. You can discover icons on the [Icones](https://icones.js.org/) website.
- **Customizable**: You can easily change the size, color, and other features of the icons to fit your design.
- **Collaboration**: Monicon helps you collaborate with designers to speed up the design process and get better results. [Iconify Figma Plugin](https://www.figma.com/community/plugin/735098390272716381/iconify) allows you to use icons directly in Figma.
- **Free and Open Source**: Monicon is free to use and open source, so you can use it in any project without restrictions.
No matter which framework you use, Monicon makes adding and managing icons easy. Check out the documentation to see how Monicon can help improve your next project with great-looking icons!
## Comparison: Monicon & Iconify & unplugin-icons
Monicon was created to address a critical gap in the React ecosystem: The need for a truly universal icon package that works seamlessly across both web and native platforms. While tools like unplugin-icons are great for certain use cases, they fall short in key areas that Monicon was specifically designed to solve.
Check out the issues for more details: [Universal Support #15](https://github.com/oktaysenkan/monicon/issues/15#issuecomment-2054178367)
| Feature | Monicon | @iconify/react | unplugin-icons |
| -------------------------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------- |
| **Icon Rendering** | Icons are bundled during build time, ensuring instant rendering with no blinking. | Icons load over HTTP, which can cause blinking during rendering. | Icons are bundled at build time, no blinking issues. |
| **Offline Support** | Fully offline-compatible, works seamlessly with PWAs, Electron apps, and native environments. | Does not work offline due to reliance on HTTP for fetching icons. | Works offline |
| **React Native Support** | Fully supports React Native, making it ideal for mobile and native projects. | No support for React Native. | No support for React Native. |
| **Modern Bundler Support** | Compatible with Metro, Vite, Webpack, Rollup, Rspack, and others. | Primarily web-focused and lacks versatility across bundlers. | No support for Metro. |
| **Custom Icon Support** | Easily create and use custom icons in your projects. | Easily create and use custom icons in your projects. | Easily create and use custom icons in your projects. |
================================================
FILE: apps/legacy-docs/pages/installation/_meta.tsx
================================================
export default {
react: "React",
nextjs: "Next.js",
remix: "Remix",
qwik: "Qwik",
"react-native": "React Native",
vue: "Vue",
nuxt: "Nuxt",
svelte: "Svelte",
"react-webpack": "React (Webpack)",
"react-rollup": "React (Rollup)",
"react-rspack": "React (Rspack)",
"react-esbuild": "React (esbuild)",
};
================================================
FILE: apps/legacy-docs/pages/installation/nextjs.mdx
================================================
import { Steps, Callout } from "nextra/components";
# Install Monicon with Next.js
Setting up Monicon with Next.js is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your Next.js project.
<Steps>
## Install
To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
```sh npm2yarn
npm i @monicon/react@1 @monicon/webpack@1
```
Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
```sh npm2yarn
npm i -D @iconify/json
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```
## Configure Next
If you want to use Monicon with Next.js, you’ll need to configure Next.js.
```js filename="next.config.js"
const { MoniconPlugin } = require("@monicon/webpack");
const nextConfig = {
webpack: (config) => {
config.plugins.push(
new MoniconPlugin({
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
})
);
return config;
},
};
module.exports = nextConfig;
```
<Callout>
The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
</Callout>
## Usage
You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.
```tsx filename="src/app/page.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" size={32} />
<Monicon name="feather:activity" color="red" />
<Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
</main>
);
}
export default App;
```
## Configure .gitignore
Add the following to your `.gitignore` file to prevent icons from being committed to your repository.
```
# monicon
.monicon
```
## Next Steps
You’ve successfully set up Monicon with Next.js! You can now explore more icon sets and customize your usage further.
</Steps>
================================================
FILE: apps/legacy-docs/pages/installation/nuxt.mdx
================================================
import { Steps, Callout } from "nextra/components";
# Install Monicon with Nuxt
Setting up Monicon with Nuxt is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your Nuxt project.
<Steps>
## Install
First, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command.
```sh npm2yarn
npm i @monicon/vue@1 @monicon/nuxt@1
```
Next, install the development dependency @iconify/json for icon sets. This package provides a comprehensive collection of icons that you can easily integrate into your project.
```sh npm2yarn
npm i -D @iconify/json
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```
## Configure Nuxt
Now that the dependencies are installed, you’ll need to configure Nuxt to use Monicon.
```ts filename="nuxt.config.ts"
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ["@monicon/nuxt"],
monicon: {
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
},
});
```
<Callout>
The `icons` array in the `monicon` plugin configuration specifies the icon
sets you want to use in your project. You can add more icon sets as needed.
For a complete list of available icon sets, refer to the
[Icones](https://icones.js.org/) website.
</Callout>
## Usage
You can now use Monicon in your Vue components. Here’s an example of how to use Monicon in a Vue component.
```vue filename="src/app.vue"
<template>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" :size="30" />
<Monicon name="feather:activity" color="red" />
<Monicon name="lucide:badge-check" :size="24" :strokeWidth="4" />
</template>
```
## Configure .gitignore
Add the following to your `.gitignore` file to prevent icons from being committed to your repository.
```
# monicon
.monicon
```
## Next Steps
You’ve successfully set up Monicon! You can now explore more icon sets and customize your usage further.
</Steps>
================================================
FILE: apps/legacy-docs/pages/installation/qwik.mdx
================================================
import { Steps, Callout } from "nextra/components";
# Install Monicon with Qwik
Setting up Monicon with Qwik is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your Qwik project.
<Steps>
## Install
To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
```sh npm2yarn
npm i @monicon/qwik@1 @monicon/vite@1
```
Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
```sh npm2yarn
npm i -D @iconify/json
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```
## Configure Vite
Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
```js filename="vite.config.ts"
import { defineConfig } from "vite";
import monicon from "@monicon/vite";
export default defineConfig({
plugins: [
monicon({
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
}),
],
});
```
<Callout>
The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
</Callout>
## Usage
You can now use Monicon in your Qwik components. Here’s an example of how to use Monicon in a Qwik component.
```tsx filename="src/routes/index.tsx"
import { component$ } from "@builder.io/qwik";
import { Monicon } from "@monicon/qwik";
export default component$(() => {
return (
<main>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" size={32} />
<Monicon name="feather:activity" color="red" />
<Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
</main>
);
}
```
## Configure .gitignore
Add the following to your `.gitignore` file to prevent icons from being committed to your repository.
```
# monicon
.monicon
```
## Next Steps
You’ve successfully set up Monicon with Qwik! You can now explore more icon sets and customize your usage further.
</Steps>
================================================
FILE: apps/legacy-docs/pages/installation/react-esbuild.mdx
================================================
import { Steps, Callout } from "nextra/components";
# Install Monicon with React (esbuild)
Setting up Monicon with React and esbuild is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React project using esbuild as the bundler.
<Steps>
## Install
To get started, you'll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
```sh npm2yarn
npm i @monicon/react@1 @monicon/esbuild@1
```
Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
```sh npm2yarn
npm i -D @iconify/json
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```
## Configure esbuild
Now that the dependencies are installed, you'll need to configure esbuild to use Monicon. Create a build script that uses the Monicon esbuild plugin:
```ts filename="build.ts"
import * as esbuild from "esbuild";
import monicon from "@monicon/esbuild";
await esbuild.build({
plugins: [
monicon({
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
}),
],
});
```
<Callout>
The `icons` array in the `moniconPlugin` configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
</Callout>
## Usage
You can now use Monicon in your React components. Here's an example of how to use Monicon in a React component:
```tsx filename="src/App.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" size={30} />
<Monicon name="feather:activity" color="red" />
<Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
</main>
);
}
export default App;
```
## Configure .gitignore
Add the following to your `.gitignore` file to prevent icons from being committed to your repository:
```
# monicon
.monicon
```
## Next Steps
You've successfully set up Monicon with React and esbuild! You can now explore more icon sets and customize your usage further.
</Steps>
================================================
FILE: apps/legacy-docs/pages/installation/react-native.mdx
================================================
import { Steps, Callout } from "nextra/components";
# Install Monicon with React Native
Setting up Monicon with React Native is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React Native project.
<Steps>
## Install
To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
```sh npm2yarn
npm i @monicon/native@1 @monicon/metro@1 react-native-svg
# if you want react-native-web support
npm i @monicon/webpack@1
```
Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
```sh npm2yarn
npm i -D @iconify/json
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```
## Configure Metro
Now that the dependencies are installed, you’ll need to configure Metro to use Monicon.
```js filename="metro.config.js"
const { getDefaultConfig } = require("expo/metro-config");
const { withMonicon } = require("@monicon/metro");
const config = getDefaultConfig(__dirname);
const configWithMonicon = withMonicon(config, {
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
});
module.exports = configWithMonicon;
```
<Callout>
The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
</Callout>
## Configure Webpack (Optional)
<Callout type="info">If you are using Expo Router, skip this step.</Callout>
If you want to use Monicon with React Native Web, you’ll need to configure Webpack.
```js filename="webpack.config.js"
const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const { MoniconPlugin } = require("@monicon/webpack");
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
config.plugins.push(
new MoniconPlugin({
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
})
);
return config;
};
```
For **bare React Native** projects, you can use the `@monicon/webpack` plugin to configure Webpack.
```js filename="webpack.config.js"
module.exports = {
plugins: [
new MoniconPlugin({
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
}),
],
};
```
## Usage
You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.
```tsx filename="src/App.tsx"
import { View } from "react-native";
import { Monicon } from "@monicon/native";
function App() {
return (
<View>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" size={30} />
<Monicon name="feather:activity" color="red" />
<Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
</View>
);
}
export default App;
```
## Configure .gitignore
Add the following to your `.gitignore` file to prevent icons from being committed to your repository.
```
# monicon
.monicon
```
## Next Steps
You’ve successfully set up Monicon with React Native! You can now explore more icon sets and customize your usage further.
</Steps>
================================================
FILE: apps/legacy-docs/pages/installation/react-rollup.mdx
================================================
import { Steps, Callout } from "nextra/components";
# Install Monicon with React (Rollup)
Setting up Monicon with React and Rollup is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React project.
<Steps>
## Install
To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
```sh npm2yarn
npm i @monicon/react@1 @monicon/rollup@1
```
Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
```sh npm2yarn
npm i -D @iconify/json
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```
## Configure Rollup
Now that the dependencies are installed, you’ll need to configure Rollup to use Monicon.
```ts filename="rollup.config.mjs"
import monicon from "@monicon/rollup";
export default {
plugins: [
monicon({
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
}),
],
};
```
<Callout>
The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
</Callout>
## Usage
You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.
```tsx filename="src/App.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" size={30} />
<Monicon name="feather:activity" color="red" />
<Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
</main>
);
}
export default App;
```
## Configure .gitignore
Add the following to your `.gitignore` file to prevent icons from being committed to your repository.
```
# monicon
.monicon
```
## Next Steps
You’ve successfully set up Monicon with React and Rollup! You can now explore more icon sets and customize your usage further.
</Steps>
================================================
FILE: apps/legacy-docs/pages/installation/react-rspack.mdx
================================================
import { Steps, Callout } from "nextra/components";
# Install Monicon with React (Rspack)
Setting up Monicon with React and Rspack is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React project.
<Steps>
## Install
To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
```sh npm2yarn
npm i @monicon/react@1 @monicon/rspack@1
```
Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
```sh npm2yarn
npm i -D @iconify/json
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```
## Configure Rspack
Now that the dependencies are installed, you’ll need to configure Rollup to use Monicon.
```ts filename="rspack.config.mjs"
import { defineConfig } from "@rspack/cli";
import MoniconPlugin from "@monicon/rspack";
export default defineConfig({
plugins: [
new MoniconPlugin({
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
}),
],
});
```
<Callout>
The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
</Callout>
## Usage
You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.
```tsx filename="src/App.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" size={30} />
<Monicon name="feather:activity" color="red" />
<Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
</main>
);
}
export default App;
```
## Configure .gitignore
Add the following to your `.gitignore` file to prevent icons from being committed to your repository.
```
# monicon
.monicon
```
## Next Steps
You’ve successfully set up Monicon with React and Rspack! You can now explore more icon sets and customize your usage further.
</Steps>
================================================
FILE: apps/legacy-docs/pages/installation/react-webpack.mdx
================================================
import { Steps, Callout } from "nextra/components";
# Install Monicon with React (Webpack)
Setting up Monicon with React and Webpack is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React project.
<Steps>
## Install
To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
```sh npm2yarn
npm i @monicon/react@1 @monicon/webpack@1
```
Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
```sh npm2yarn
npm i -D @iconify/json
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```
## Configure Webpack
Now that the dependencies are installed, you’ll need to configure Webpack to use Monicon.
```js filename="webpack.config.js"
module.exports = {
plugins: [
new MoniconPlugin({
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
}),
],
};
```
<Callout>
The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
</Callout>
## Usage
You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.
```tsx filename="src/App.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" size={30} />
<Monicon name="feather:activity" color="red" />
<Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
</main>
);
}
export default App;
```
## Configure .gitignore
Add the following to your `.gitignore` file to prevent icons from being committed to your repository.
```
# monicon
.monicon
```
## Next Steps
You’ve successfully set up Monicon with React and Webpack! You can now explore more icon sets and customize your usage further.
</Steps>
================================================
FILE: apps/legacy-docs/pages/installation/react.mdx
================================================
import { Steps, Callout } from "nextra/components";
# Install Monicon with React (Vite)
Setting up Monicon with React and Vite is a straightforward process. This guide will walk you through the installation and configuration steps to get started with Monicon in your React project.
<Steps>
## Install
To get started, you’ll need to install the necessary dependencies for Monicon. In your project directory, run the following command to install the dependencies.
```sh npm2yarn
npm i @monicon/react@1 @monicon/vite@1
```
Now you should install the development dependency `@iconify/json` for the icon sets. This package provides a comprehensive collection of icons that can be easily integrated into your project.
```sh npm2yarn
npm i -D @iconify/json
# or specific icon sets
npm i -D @iconify-json/mdi @iconify-json/feather
```
## Configure Vite
Now that the dependencies are installed, you’ll need to configure Vite to use Monicon.
```ts filename="vite.config.ts"
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import monicon from "@monicon/vite";
export default defineConfig({
plugins: [
react(),
monicon({
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
// Load all icons from the listed collections
collections: ["radix-icons"],
}),
],
});
```
<Callout>
The `icons` array in the `monicon` plugin configuration specifies the icon sets you want to use in your project. You can add more icon sets as needed.
For a complete list of available icon sets, refer to the [Icones](https://icones.js.org/) website.
</Callout>
## Usage
You can now use Monicon in your React components. Here’s an example of how to use Monicon in a React component.
```tsx filename="src/App.tsx"
import { Monicon } from "@monicon/react";
function App() {
return (
<main>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" size={30} />
<Monicon name="feather:activity" color="red" />
<Monicon name="lucide:badge-check" size={24} strokeWidth={4} />
</main>
);
}
export default App;
```
## Configure .gitignore
Add the following to your `.gitignore` file to prevent icons from being committed to your repository.
```
# monicon
.monicon
```
## Next Steps
You’ve successfully se
gitextract_nk4uenfv/ ├── .changeset/ │ ├── README.md │ └── config.json ├── .github/ │ ├── FUNDING.yml │ ├── actions/ │ │ └── setup/ │ │ └── action.yml │ └── workflows/ │ ├── ci.yml │ └── release.yml ├── .gitignore ├── .nvmrc ├── .syncpackrc ├── LICENSE ├── README.md ├── apps/ │ ├── docs/ │ │ ├── .gitignore │ │ ├── README.md │ │ ├── content/ │ │ │ └── docs/ │ │ │ ├── architecture.mdx │ │ │ ├── index.mdx │ │ │ ├── installation/ │ │ │ │ ├── cli.mdx │ │ │ │ ├── esbuild.mdx │ │ │ │ ├── library.mdx │ │ │ │ ├── meta.json │ │ │ │ ├── nextjs.mdx │ │ │ │ ├── nuxt.mdx │ │ │ │ ├── qwik.mdx │ │ │ │ ├── react-native.mdx │ │ │ │ ├── react.mdx │ │ │ │ ├── remix.mdx │ │ │ │ ├── rollup.mdx │ │ │ │ ├── rspack.mdx │ │ │ │ ├── svelte.mdx │ │ │ │ ├── universal-build-tool.mdx │ │ │ │ ├── vue.mdx │ │ │ │ └── webpack.mdx │ │ │ ├── loaders/ │ │ │ │ ├── custom-loader.mdx │ │ │ │ ├── json-collections.mdx │ │ │ │ ├── local-collections.mdx │ │ │ │ ├── meta.json │ │ │ │ └── remote-collections.mdx │ │ │ ├── meta.json │ │ │ └── plugins/ │ │ │ ├── clean.mdx │ │ │ ├── custom.mdx │ │ │ ├── debugger.mdx │ │ │ ├── generic.mdx │ │ │ ├── meta.json │ │ │ ├── qwik.mdx │ │ │ ├── react-native.mdx │ │ │ ├── react.mdx │ │ │ ├── svelte.mdx │ │ │ ├── svg.mdx │ │ │ └── vue.mdx │ │ ├── eslint.config.mjs │ │ ├── next.config.mjs │ │ ├── package.json │ │ ├── postcss.config.mjs │ │ ├── public/ │ │ │ └── browserconfig.xml │ │ ├── source.config.ts │ │ ├── src/ │ │ │ ├── app/ │ │ │ │ ├── (home)/ │ │ │ │ │ ├── layout.tsx │ │ │ │ │ └── page.tsx │ │ │ │ ├── api/ │ │ │ │ │ └── search/ │ │ │ │ │ └── route.ts │ │ │ │ ├── docs/ │ │ │ │ │ ├── [[...slug]]/ │ │ │ │ │ │ └── page.tsx │ │ │ │ │ └── layout.tsx │ │ │ │ ├── global.css │ │ │ │ ├── layout.tsx │ │ │ │ ├── llms-full.txt/ │ │ │ │ │ └── route.ts │ │ │ │ ├── llms.mdx/ │ │ │ │ │ └── docs/ │ │ │ │ │ └── [[...slug]]/ │ │ │ │ │ └── route.ts │ │ │ │ ├── manifest.ts │ │ │ │ ├── og/ │ │ │ │ │ ├── docs/ │ │ │ │ │ │ └── [...slug]/ │ │ │ │ │ │ └── route.tsx │ │ │ │ │ └── route.tsx │ │ │ │ └── sitemap.ts │ │ │ ├── components/ │ │ │ │ ├── ConfigDemo.tsx │ │ │ │ ├── ai/ │ │ │ │ │ └── page-actions.tsx │ │ │ │ └── mdx/ │ │ │ │ └── mermaid.tsx │ │ │ ├── lib/ │ │ │ │ ├── cn.ts │ │ │ │ ├── layout.shared.tsx │ │ │ │ └── source.ts │ │ │ └── mdx-components.tsx │ │ └── tsconfig.json │ └── legacy-docs/ │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── next-env.d.ts │ ├── next-sitemap.config.js │ ├── next.config.mjs │ ├── package.json │ ├── pages/ │ │ ├── _app.tsx │ │ ├── _meta.tsx │ │ ├── api/ │ │ │ └── og.tsx │ │ ├── customization/ │ │ │ ├── _meta.tsx │ │ │ ├── custom-loader.mdx │ │ │ ├── json-collections.mdx │ │ │ ├── local-collections.mdx │ │ │ └── remote-collections.mdx │ │ ├── index.mdx │ │ ├── installation/ │ │ │ ├── _meta.tsx │ │ │ ├── nextjs.mdx │ │ │ ├── nuxt.mdx │ │ │ ├── qwik.mdx │ │ │ ├── react-esbuild.mdx │ │ │ ├── react-native.mdx │ │ │ ├── react-rollup.mdx │ │ │ ├── react-rspack.mdx │ │ │ ├── react-webpack.mdx │ │ │ ├── react.mdx │ │ │ ├── remix.mdx │ │ │ ├── svelte.mdx │ │ │ └── vue.mdx │ │ └── troubleshooting/ │ │ ├── _meta.tsx │ │ ├── bundle-size.mdx │ │ ├── module-resolution.mdx │ │ ├── monorepo.mdx │ │ └── typescript.mdx │ ├── public/ │ │ ├── browserconfig.xml │ │ ├── manifest.json │ │ ├── robots.txt │ │ ├── sitemap-0.xml │ │ └── sitemap.xml │ ├── theme.config.tsx │ └── tsconfig.json ├── examples/ │ ├── next/ │ │ ├── .eslintrc.json │ │ ├── .gitignore │ │ ├── README.md │ │ ├── app/ │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── components/ │ │ │ └── icons/ │ │ │ ├── feather/ │ │ │ │ ├── activity.tsx │ │ │ │ └── alert-circle.tsx │ │ │ ├── logos/ │ │ │ │ ├── active-campaign.tsx │ │ │ │ ├── apache.tsx │ │ │ │ └── atom-icon.tsx │ │ │ ├── lucide/ │ │ │ │ ├── badge-check.tsx │ │ │ │ └── cloud-download.tsx │ │ │ └── mdi/ │ │ │ ├── account-badge-outline.tsx │ │ │ ├── account.tsx │ │ │ └── home.tsx │ │ ├── monicon.config.ts │ │ ├── next-env.d.ts │ │ ├── next.config.mjs │ │ ├── package.json │ │ ├── styles/ │ │ │ ├── global.css │ │ │ └── index.module.css │ │ └── tsconfig.json │ ├── nuxt-app/ │ │ ├── .gitignore │ │ ├── README.md │ │ ├── app.vue │ │ ├── components/ │ │ │ └── icons/ │ │ │ ├── feather/ │ │ │ │ ├── activity.vue │ │ │ │ └── alert-circle.vue │ │ │ ├── logos/ │ │ │ │ ├── active-campaign.vue │ │ │ │ ├── apache.vue │ │ │ │ └── atom-icon.vue │ │ │ ├── lucide/ │ │ │ │ ├── badge-check.vue │ │ │ │ └── cloud-download.vue │ │ │ └── mdi/ │ │ │ ├── account-badge-outline.vue │ │ │ ├── account.vue │ │ │ └── home.vue │ │ ├── monicon.config.ts │ │ ├── nuxt.config.ts │ │ ├── package.json │ │ ├── server/ │ │ │ └── tsconfig.json │ │ └── tsconfig.json │ ├── qwik-app/ │ │ ├── .eslintignore │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── .prettierignore │ │ ├── README.md │ │ ├── monicon.config.ts │ │ ├── package.json │ │ ├── public/ │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ ├── qwik.env.d.ts │ │ ├── src/ │ │ │ ├── components/ │ │ │ │ ├── icons/ │ │ │ │ │ ├── feather/ │ │ │ │ │ │ ├── activity.tsx │ │ │ │ │ │ └── alert-circle.tsx │ │ │ │ │ ├── logos/ │ │ │ │ │ │ ├── active-campaign.tsx │ │ │ │ │ │ ├── apache.tsx │ │ │ │ │ │ └── atom-icon.tsx │ │ │ │ │ ├── lucide/ │ │ │ │ │ │ ├── badge-check.tsx │ │ │ │ │ │ └── cloud-download.tsx │ │ │ │ │ └── mdi/ │ │ │ │ │ ├── account-badge-outline.tsx │ │ │ │ │ ├── account.tsx │ │ │ │ │ └── home.tsx │ │ │ │ └── router-head/ │ │ │ │ └── router-head.tsx │ │ │ ├── entry.dev.tsx │ │ │ ├── entry.preview.tsx │ │ │ ├── entry.ssr.tsx │ │ │ ├── global.css │ │ │ ├── root.tsx │ │ │ └── routes/ │ │ │ ├── index.tsx │ │ │ ├── layout.tsx │ │ │ └── service-worker.ts │ │ ├── tsconfig.json │ │ └── vite.config.ts │ ├── react-native-app/ │ │ ├── .gitignore │ │ ├── README.md │ │ ├── app/ │ │ │ ├── (tabs)/ │ │ │ │ ├── _layout.tsx │ │ │ │ ├── explore.tsx │ │ │ │ └── index.tsx │ │ │ ├── +not-found.tsx │ │ │ └── _layout.tsx │ │ ├── app.json │ │ ├── components/ │ │ │ ├── Collapsible.tsx │ │ │ ├── ExternalLink.tsx │ │ │ ├── HapticTab.tsx │ │ │ ├── HelloWave.tsx │ │ │ ├── ParallaxScrollView.tsx │ │ │ ├── ThemedText.tsx │ │ │ ├── ThemedView.tsx │ │ │ ├── icons/ │ │ │ │ ├── feather/ │ │ │ │ │ ├── activity.tsx │ │ │ │ │ └── alert-circle.tsx │ │ │ │ ├── logos/ │ │ │ │ │ ├── active-campaign.tsx │ │ │ │ │ ├── apache.tsx │ │ │ │ │ └── atom-icon.tsx │ │ │ │ ├── lucide/ │ │ │ │ │ ├── badge-check.tsx │ │ │ │ │ └── cloud-download.tsx │ │ │ │ └── mdi/ │ │ │ │ ├── account-badge-outline.tsx │ │ │ │ ├── account.tsx │ │ │ │ └── home.tsx │ │ │ └── ui/ │ │ │ ├── IconSymbol.ios.tsx │ │ │ ├── IconSymbol.tsx │ │ │ ├── TabBarBackground.ios.tsx │ │ │ └── TabBarBackground.tsx │ │ ├── constants/ │ │ │ └── Colors.ts │ │ ├── eslint.config.js │ │ ├── hooks/ │ │ │ ├── useColorScheme.ts │ │ │ ├── useColorScheme.web.ts │ │ │ └── useThemeColor.ts │ │ ├── metro.config.js │ │ ├── monicon.config.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── remix/ │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── app/ │ │ │ ├── components/ │ │ │ │ └── icons/ │ │ │ │ ├── feather/ │ │ │ │ │ ├── activity.tsx │ │ │ │ │ └── alert-circle.tsx │ │ │ │ ├── logos/ │ │ │ │ │ ├── active-campaign.tsx │ │ │ │ │ ├── apache.tsx │ │ │ │ │ └── atom-icon.tsx │ │ │ │ ├── lucide/ │ │ │ │ │ ├── badge-check.tsx │ │ │ │ │ └── cloud-download.tsx │ │ │ │ └── mdi/ │ │ │ │ ├── account-badge-outline.tsx │ │ │ │ ├── account.tsx │ │ │ │ └── home.tsx │ │ │ ├── entry.client.tsx │ │ │ ├── entry.server.tsx │ │ │ ├── root.tsx │ │ │ ├── routes/ │ │ │ │ └── _index.tsx │ │ │ └── tailwind.css │ │ ├── monicon.config.ts │ │ ├── package.json │ │ ├── postcss.config.js │ │ ├── tailwind.config.ts │ │ ├── tsconfig.json │ │ └── vite.config.ts │ ├── rollup-react/ │ │ ├── .babelrc │ │ ├── .gitignore │ │ ├── monicon.config.js │ │ ├── package.json │ │ ├── public/ │ │ │ └── index.html │ │ ├── rollup.config.mjs │ │ └── src/ │ │ ├── App.jsx │ │ ├── components/ │ │ │ └── icons/ │ │ │ ├── feather/ │ │ │ │ ├── activity.jsx │ │ │ │ └── alert-circle.jsx │ │ │ ├── logos/ │ │ │ │ ├── active-campaign.jsx │ │ │ │ ├── apache.jsx │ │ │ │ └── atom-icon.jsx │ │ │ ├── lucide/ │ │ │ │ ├── badge-check.jsx │ │ │ │ └── cloud-download.jsx │ │ │ └── mdi/ │ │ │ ├── account-badge-outline.jsx │ │ │ ├── account.jsx │ │ │ └── home.jsx │ │ └── index.js │ ├── rspack-react/ │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── monicon.config.mjs │ │ ├── package.json │ │ ├── rspack.config.mjs │ │ └── src/ │ │ ├── App.css │ │ ├── App.jsx │ │ ├── components/ │ │ │ └── icons/ │ │ │ ├── feather/ │ │ │ │ ├── activity.jsx │ │ │ │ └── alert-circle.jsx │ │ │ ├── logos/ │ │ │ │ ├── active-campaign.jsx │ │ │ │ ├── apache.jsx │ │ │ │ └── atom-icon.jsx │ │ │ ├── lucide/ │ │ │ │ ├── badge-check.jsx │ │ │ │ └── cloud-download.jsx │ │ │ └── mdi/ │ │ │ ├── account-badge-outline.jsx │ │ │ ├── account.jsx │ │ │ └── home.jsx │ │ ├── index.css │ │ └── main.jsx │ ├── svelte-app/ │ │ ├── .gitignore │ │ ├── .npmrc │ │ ├── .prettierignore │ │ ├── .prettierrc │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── monicon.config.ts │ │ ├── package.json │ │ ├── src/ │ │ │ ├── app.d.ts │ │ │ ├── app.html │ │ │ ├── lib/ │ │ │ │ ├── components/ │ │ │ │ │ └── icons/ │ │ │ │ │ ├── feather/ │ │ │ │ │ │ ├── activity.svelte │ │ │ │ │ │ └── alert-circle.svelte │ │ │ │ │ ├── logos/ │ │ │ │ │ │ ├── active-campaign.svelte │ │ │ │ │ │ ├── apache.svelte │ │ │ │ │ │ └── atom-icon.svelte │ │ │ │ │ ├── lucide/ │ │ │ │ │ │ ├── badge-check.svelte │ │ │ │ │ │ └── cloud-download.svelte │ │ │ │ │ └── mdi/ │ │ │ │ │ ├── account-badge-outline.svelte │ │ │ │ │ ├── account.svelte │ │ │ │ │ └── home.svelte │ │ │ │ └── index.ts │ │ │ └── routes/ │ │ │ └── +page.svelte │ │ ├── svelte.config.js │ │ ├── tsconfig.json │ │ └── vite.config.ts │ ├── vite-react/ │ │ ├── .gitignore │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── index.html │ │ ├── monicon.config.ts │ │ ├── package.json │ │ ├── src/ │ │ │ ├── App.tsx │ │ │ ├── __tests__/ │ │ │ │ ├── App.test.tsx │ │ │ │ └── setup.ts │ │ │ ├── components/ │ │ │ │ └── icons/ │ │ │ │ ├── feather/ │ │ │ │ │ ├── activity.tsx │ │ │ │ │ └── alert-circle.tsx │ │ │ │ ├── logos/ │ │ │ │ │ ├── active-campaign.tsx │ │ │ │ │ ├── apache.tsx │ │ │ │ │ └── atom-icon.tsx │ │ │ │ ├── lucide/ │ │ │ │ │ ├── badge-check.tsx │ │ │ │ │ └── cloud-download.tsx │ │ │ │ ├── material-symbols/ │ │ │ │ │ └── 10k.tsx │ │ │ │ └── mdi/ │ │ │ │ ├── account-badge-outline.tsx │ │ │ │ ├── account.tsx │ │ │ │ └── home.tsx │ │ │ ├── index.css │ │ │ ├── main.tsx │ │ │ └── vite-env.d.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.app.tsbuildinfo │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ ├── tsconfig.node.tsbuildinfo │ │ ├── vite.config.ts │ │ └── vitest.config.ts │ └── vite-vue/ │ ├── .gitignore │ ├── .vscode/ │ │ └── extensions.json │ ├── README.md │ ├── index.html │ ├── monicon.config.ts │ ├── package.json │ ├── src/ │ │ ├── App.vue │ │ ├── __tests__/ │ │ │ └── App.test.ts │ │ ├── components/ │ │ │ └── icons/ │ │ │ ├── feather/ │ │ │ │ ├── activity.vue │ │ │ │ └── alert-circle.vue │ │ │ ├── json/ │ │ │ │ └── network.vue │ │ │ ├── local/ │ │ │ │ ├── folder.vue │ │ │ │ └── nested-folder.vue │ │ │ ├── lucide/ │ │ │ │ ├── badge-check.vue │ │ │ │ └── cloud-download.vue │ │ │ ├── mdi/ │ │ │ │ ├── account-badge-outline.vue │ │ │ │ ├── account.vue │ │ │ │ └── home.vue │ │ │ └── remote/ │ │ │ ├── attachment.vue │ │ │ └── download.vue │ │ ├── main.ts │ │ ├── style.css │ │ └── vite-env.d.ts │ ├── tsconfig.app.json │ ├── tsconfig.app.tsbuildinfo │ ├── tsconfig.json │ ├── tsconfig.node.json │ ├── tsconfig.node.tsbuildinfo │ ├── vite.config.ts │ └── vitest.config.ts ├── lefthook.yml ├── package.json ├── packages/ │ ├── cli/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── monicon.config.ts │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── core/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── monicon.config.ts │ │ ├── package.json │ │ ├── src/ │ │ │ ├── index.ts │ │ │ ├── loaders/ │ │ │ │ ├── index.ts │ │ │ │ ├── json-collection.ts │ │ │ │ ├── local-collection.ts │ │ │ │ ├── remote-collection.ts │ │ │ │ ├── types.ts │ │ │ │ └── utils.ts │ │ │ ├── plugins/ │ │ │ │ ├── clean/ │ │ │ │ │ ├── glob.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ └── plugin.ts │ │ │ │ ├── debugger/ │ │ │ │ │ ├── index.ts │ │ │ │ │ └── plugin.ts │ │ │ │ ├── generic/ │ │ │ │ │ ├── index.ts │ │ │ │ │ └── plugin.ts │ │ │ │ ├── index.ts │ │ │ │ ├── native/ │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── plugin.ts │ │ │ │ │ └── templates.ts │ │ │ │ ├── qwik/ │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── plugin.ts │ │ │ │ │ └── template.ts │ │ │ │ ├── react/ │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── plugin.ts │ │ │ │ │ └── templates.ts │ │ │ │ ├── svelte/ │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── plugin.ts │ │ │ │ │ └── templates.ts │ │ │ │ ├── svg/ │ │ │ │ │ ├── index.ts │ │ │ │ │ └── plugin.ts │ │ │ │ ├── types.ts │ │ │ │ └── vue/ │ │ │ │ ├── index.ts │ │ │ │ ├── plugin.ts │ │ │ │ └── templates.ts │ │ │ ├── types.ts │ │ │ └── utils/ │ │ │ ├── config-loader.ts │ │ │ ├── file-system.ts │ │ │ ├── icon-processor.ts │ │ │ ├── index.ts │ │ │ ├── name.ts │ │ │ ├── plugin-loader.ts │ │ │ └── svg.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── esbuild/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── metro/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── nuxt/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── rollup/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── rspack/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ ├── typescript-config/ │ │ ├── CHANGELOG.md │ │ ├── base.json │ │ ├── nextjs.json │ │ ├── package.json │ │ ├── react-native-library.json │ │ └── vue-library.json │ ├── vite/ │ │ ├── .gitignore │ │ ├── CHANGELOG.md │ │ ├── package.json │ │ ├── src/ │ │ │ └── index.ts │ │ ├── tsconfig.json │ │ └── tsup.config.ts │ └── webpack/ │ ├── .gitignore │ ├── CHANGELOG.md │ ├── package.json │ ├── src/ │ │ └── index.ts │ ├── tsconfig.json │ └── tsup.config.ts └── turbo.json
SYMBOL INDEX (123 symbols across 71 files)
FILE: apps/docs/next.config.mjs
method rewrites (line 8) | async rewrites() {
method redirects (line 16) | redirects() {
FILE: apps/docs/src/app/(home)/layout.tsx
function Layout (line 4) | function Layout({ children }: LayoutProps<"/">) {
FILE: apps/docs/src/app/(home)/page.tsx
function HomePage (line 30) | function HomePage() {
FILE: apps/docs/src/app/docs/[[...slug]]/page.tsx
function Page (line 14) | async function Page(props: PageProps<"/docs/[[...slug]]">) {
function generateStaticParams (line 53) | async function generateStaticParams() {
function generateMetadata (line 57) | async function generateMetadata(
FILE: apps/docs/src/app/docs/layout.tsx
function Layout (line 5) | function Layout({ children }: LayoutProps<'/docs'>) {
FILE: apps/docs/src/app/layout.tsx
function Layout (line 10) | function Layout({ children }: LayoutProps<"/">) {
FILE: apps/docs/src/app/llms-full.txt/route.ts
function GET (line 5) | async function GET() {
FILE: apps/docs/src/app/llms.mdx/docs/[[...slug]]/route.ts
function GET (line 6) | async function GET(_req: Request, { params }: RouteContext<'/llms.mdx/do...
function generateStaticParams (line 18) | function generateStaticParams() {
FILE: apps/docs/src/app/manifest.ts
function manifest (line 3) | function manifest(): MetadataRoute.Manifest {
FILE: apps/docs/src/app/og/docs/[...slug]/route.tsx
function GET (line 8) | async function GET(
function generateStaticParams (line 33) | function generateStaticParams() {
FILE: apps/docs/src/app/og/route.tsx
function GET (line 6) | async function GET(_req: Request) {
FILE: apps/docs/src/app/sitemap.ts
function sitemap (line 13) | async function sitemap(): Promise<MetadataRoute.Sitemap> {
FILE: apps/docs/src/components/ConfigDemo.tsx
type FileNode (line 122) | interface FileNode {
function buildFileTree (line 128) | function buildFileTree(paths: string[]): FileNode {
function renderFileTree (line 158) | function renderFileTree(node: FileNode): React.ReactNode {
function ConfigDemo (line 174) | function ConfigDemo() {
FILE: apps/docs/src/components/ai/page-actions.tsx
function LLMCopyButton (line 11) | function LLMCopyButton({
function ViewOptions (line 60) | function ViewOptions({
FILE: apps/docs/src/components/mdx/mermaid.tsx
function Mermaid (line 6) | function Mermaid({ chart }: { chart: string }) {
function cachePromise (line 19) | function cachePromise<T>(key: string, setPromise: () => Promise<T>): Pro...
function MermaidContent (line 28) | function MermaidContent({ chart }: { chart: string }) {
FILE: apps/docs/src/lib/layout.shared.tsx
function baseOptions (line 4) | function baseOptions(): BaseLayoutProps {
FILE: apps/docs/src/lib/source.ts
function getPageImage (line 12) | function getPageImage(page: InferPageType<typeof source>) {
function getLLMText (line 21) | async function getLLMText(page: InferPageType<typeof source>) {
FILE: apps/docs/src/mdx-components.tsx
function getMDXComponents (line 18) | function getMDXComponents(components?: MDXComponents): MDXComponents {
FILE: apps/legacy-docs/pages/_app.tsx
function App (line 1) | function App({ Component, pageProps }) {
FILE: apps/legacy-docs/pages/api/og.tsx
function handler (line 18) | async function handler(
FILE: apps/legacy-docs/theme.config.tsx
method head (line 14) | head() {
FILE: examples/next/app/layout.tsx
function RootLayout (line 3) | function RootLayout({
FILE: examples/next/app/page.tsx
function Web (line 10) | function Web() {
FILE: examples/qwik-app/vite.config.ts
type PkgDep (line 12) | type PkgDep = Record<string, string>;
function errorOnDuplicatesPkgDeps (line 72) | function errorOnDuplicatesPkgDeps(
FILE: examples/react-native-app/app/(tabs)/_layout.tsx
function TabLayout (line 11) | function TabLayout() {
FILE: examples/react-native-app/app/(tabs)/explore.tsx
function TabTwoScreen (line 11) | function TabTwoScreen() {
FILE: examples/react-native-app/app/(tabs)/index.tsx
function HomeScreen (line 10) | function HomeScreen() {
FILE: examples/react-native-app/app/+not-found.tsx
function NotFoundScreen (line 7) | function NotFoundScreen() {
FILE: examples/react-native-app/app/_layout.tsx
function RootLayout (line 9) | function RootLayout() {
FILE: examples/react-native-app/components/Collapsible.tsx
function Collapsible (line 10) | function Collapsible({ children, title }: PropsWithChildren & { title: s...
FILE: examples/react-native-app/components/ExternalLink.tsx
type Props (line 6) | type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & ...
function ExternalLink (line 8) | function ExternalLink({ href, ...rest }: Props) {
FILE: examples/react-native-app/components/HapticTab.tsx
function HapticTab (line 5) | function HapticTab(props: BottomTabBarButtonProps) {
FILE: examples/react-native-app/components/HelloWave.tsx
function HelloWave (line 13) | function HelloWave() {
FILE: examples/react-native-app/components/ParallaxScrollView.tsx
constant HEADER_HEIGHT (line 14) | const HEADER_HEIGHT = 250;
type Props (line 16) | type Props = PropsWithChildren<{
function ParallaxScrollView (line 21) | function ParallaxScrollView({
FILE: examples/react-native-app/components/ThemedText.tsx
type ThemedTextProps (line 5) | type ThemedTextProps = TextProps & {
function ThemedText (line 11) | function ThemedText({
FILE: examples/react-native-app/components/ThemedView.tsx
type ThemedViewProps (line 5) | type ThemedViewProps = ViewProps & {
function ThemedView (line 10) | function ThemedView({ style, lightColor, darkColor, ...otherProps }: The...
FILE: examples/react-native-app/components/ui/IconSymbol.ios.tsx
function IconSymbol (line 4) | function IconSymbol({
FILE: examples/react-native-app/components/ui/IconSymbol.tsx
type IconMapping (line 8) | type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof...
type IconSymbolName (line 9) | type IconSymbolName = keyof typeof MAPPING;
constant MAPPING (line 16) | const MAPPING = {
function IconSymbol (line 28) | function IconSymbol({
FILE: examples/react-native-app/components/ui/TabBarBackground.ios.tsx
function BlurTabBarBackground (line 5) | function BlurTabBarBackground() {
function useBottomTabOverflow (line 17) | function useBottomTabOverflow() {
FILE: examples/react-native-app/components/ui/TabBarBackground.tsx
function useBottomTabOverflow (line 4) | function useBottomTabOverflow() {
FILE: examples/react-native-app/hooks/useColorScheme.web.ts
function useColorScheme (line 7) | function useColorScheme() {
FILE: examples/react-native-app/hooks/useThemeColor.ts
function useThemeColor (line 9) | function useThemeColor(
FILE: examples/remix/app/entry.server.tsx
constant ABORT_DELAY (line 15) | const ABORT_DELAY = 5_000;
function handleRequest (line 17) | function handleRequest(
function handleBotRequest (line 42) | function handleBotRequest(
function handleBrowserRequest (line 92) | function handleBrowserRequest(
FILE: examples/remix/app/root.tsx
function Layout (line 26) | function Layout({ children }: { children: React.ReactNode }) {
function App (line 44) | function App() {
FILE: examples/remix/app/routes/_index.tsx
function Index (line 17) | function Index() {
FILE: examples/rspack-react/src/App.jsx
function App (line 12) | function App() {
FILE: examples/vite-react/src/App.tsx
function App (line 8) | function App() {
FILE: packages/cli/tsup.config.ts
method outExtension (line 13) | outExtension(ctx) {
FILE: packages/core/src/loaders/json-collection.ts
type JSONCollectionLoaderOptions (line 5) | type JSONCollectionLoaderOptions =
FILE: packages/core/src/loaders/local-collection.ts
type LocalCollectionLoaderOptions (line 12) | type LocalCollectionLoaderOptions =
FILE: packages/core/src/loaders/remote-collection.ts
type RemoteCollectionLoaderOptions (line 6) | type RemoteCollectionLoaderOptions = Record<
FILE: packages/core/src/loaders/types.ts
type LoaderResult (line 3) | type LoaderResult = Record<string, string>;
type Loader (line 5) | type Loader<T = any> = (
type Content (line 9) | type Content = {
FILE: packages/core/src/plugins/clean/plugin.ts
type CleanOptions (line 5) | type CleanOptions = {
FILE: packages/core/src/plugins/debugger/plugin.ts
type DebuggerPluginOptions (line 3) | type DebuggerPluginOptions = {
FILE: packages/core/src/plugins/generic/plugin.ts
type FileCreationOptions (line 12) | type FileCreationOptions = {
type HasRequiredKey (line 19) | type HasRequiredKey<T extends object> = {} extends T ? false : true;
type NormalizeOptions (line 21) | type NormalizeOptions<T extends object> =
type GenericPluginOptions (line 24) | type GenericPluginOptions<T extends object = object> = NormalizeOptions<
method generate (line 126) | async generate() {
FILE: packages/core/src/plugins/native/plugin.ts
type ReactNativePluginOptionsInternal (line 8) | type ReactNativePluginOptionsInternal = ComponentNameOptions & {
type ReactNativePluginOptions (line 12) | type ReactNativePluginOptions = GenericPluginOptions<ReactNativePluginOp...
FILE: packages/core/src/plugins/qwik/plugin.ts
type QwikPluginOptionsInternal (line 8) | type QwikPluginOptionsInternal = ComponentNameOptions
type QwikPluginOptions (line 10) | type QwikPluginOptions = GenericPluginOptions<QwikPluginOptionsInternal>;
FILE: packages/core/src/plugins/react/plugin.ts
type ReactPluginOptionsInternal (line 9) | type ReactPluginOptionsInternal = ComponentNameOptions & {
type ReactPluginOptions (line 13) | type ReactPluginOptions = GenericPluginOptions<ReactPluginOptionsInternal>;
FILE: packages/core/src/plugins/svelte/plugin.ts
type SveltePluginOptionsInternal (line 8) | type SveltePluginOptionsInternal = ComponentNameOptions
type SveltePluginOptions (line 10) | type SveltePluginOptions = GenericPluginOptions<SveltePluginOptionsInter...
FILE: packages/core/src/plugins/svg/plugin.ts
type SvgPluginOptions (line 4) | type SvgPluginOptions = GenericPluginOptions;
FILE: packages/core/src/plugins/types.ts
type MoniconPluginPayload (line 3) | type MoniconPluginPayload = {
type PromiseLike (line 7) | type PromiseLike<T> = Promise<T> | T;
type MoniconPluginFile (line 9) | type MoniconPluginFile = {
type MoniconPluginContext (line 14) | type MoniconPluginContext<T = any> = T & {
type MoniconPluginLoadContext (line 19) | type MoniconPluginLoadContext = MoniconPluginContext<{
type MoniconPluginGenerateContext (line 23) | type MoniconPluginGenerateContext = MoniconPluginContext<{
type MoniconPluginWriteFilesContext (line 27) | type MoniconPluginWriteFilesContext = MoniconPluginContext<{
type MoniconPlugin (line 31) | type MoniconPlugin<T = any> = (opts: T) => (
type MoniconPluginFunction (line 49) | type MoniconPluginFunction = Awaited<ReturnType<MoniconPlugin>>;
type MoniconPluginInstance (line 51) | type MoniconPluginInstance = Awaited<ReturnType<MoniconPluginFunction>>;
FILE: packages/core/src/plugins/vue/plugin.ts
type VuePluginOptionsInternal (line 8) | type VuePluginOptionsInternal = ComponentNameOptions & {
type VuePluginOptions (line 12) | type VuePluginOptions = GenericPluginOptions<VuePluginOptionsInternal>;
FILE: packages/core/src/types.ts
type MoniconConfig (line 4) | type MoniconConfig = {
type CollectionIcon (line 12) | type CollectionIcon = {
type Collection (line 18) | type Collection = {
type Icon (line 26) | type Icon = {
FILE: packages/core/src/utils/config-loader.ts
type WatchConfigFileParams (line 7) | type WatchConfigFileParams = {
FILE: packages/core/src/utils/name.ts
type ComponentNameOptions (line 4) | type ComponentNameOptions = {
FILE: packages/core/tsup.config.ts
method outExtension (line 18) | outExtension(ctx) {
FILE: packages/esbuild/src/index.ts
method setup (line 7) | setup(build) {
FILE: packages/nuxt/src/index.ts
method setup (line 14) | async setup(options, nuxt) {
FILE: packages/rspack/src/index.ts
class MoniconPlugin (line 6) | class MoniconPlugin extends MoniconWebpackPlugin {
method constructor (line 9) | constructor(config?: MoniconConfig) {
FILE: packages/vite/src/index.ts
method buildStart (line 10) | async buildStart() {
FILE: packages/webpack/src/index.ts
class MoniconPlugin (line 6) | class MoniconPlugin {
method constructor (line 12) | constructor(config?: MoniconConfig) {
method apply (line 16) | async apply(compiler: Compiler) {
Condensed preview — 478 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (764K chars).
[
{
"path": ".changeset/README.md",
"chars": 510,
"preview": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that wo"
},
{
"path": ".changeset/config.json",
"chars": 623,
"preview": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@3.0.3/schema.json\",\n \"changelog\": [\n \"@changesets/changelog-git"
},
{
"path": ".github/FUNDING.yml",
"chars": 20,
"preview": "github: oktaysenkan\n"
},
{
"path": ".github/actions/setup/action.yml",
"chars": 293,
"preview": "name: Setup\ndescription: Setup Node.js and install dependencies\n\nruns:\n using: composite\n steps:\n - name: Setup Nod"
},
{
"path": ".github/workflows/ci.yml",
"chars": 337,
"preview": "name: CI\non:\n pull_request:\n branches:\n - '**'\n\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - na"
},
{
"path": ".github/workflows/release.yml",
"chars": 666,
"preview": "name: Release\n\non:\n push:\n branches: [main]\n\njobs:\n release:\n if: github.repository == 'oktaysenkan/monicon'\n\n "
},
{
"path": ".gitignore",
"chars": 408,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n.pnp\n"
},
{
"path": ".nvmrc",
"chars": 3,
"preview": "v22"
},
{
"path": ".syncpackrc",
"chars": 74,
"preview": "{\n \"semverRange\": \"*\",\n \"source\": [\n \"packages/*/package.json\"\n ]\n}\n"
},
{
"path": "LICENSE",
"chars": 1069,
"preview": "MIT License\n\nCopyright (c) 2025 Oktay Şenkan\n\nPermission is hereby granted, free of charge, to any person obtaining a co"
},
{
"path": "README.md",
"chars": 981,
"preview": "<a href=\"https://monicon-docs.vercel.app/\" target=\"_blank\" rel=\"noopener\">\n <picture>\n <source srcset=\"https://githu"
},
{
"path": "apps/docs/.gitignore",
"chars": 239,
"preview": "# deps\n/node_modules\n\n# generated content\n.source\n\n# test & build\n/coverage\n/.next/\n/out/\n/build\n*.tsbuildinfo\n\n# misc\n."
},
{
"path": "apps/docs/README.md",
"chars": 1517,
"preview": "# docs\n\nThis is a Next.js application generated with\n[Create Fumadocs](https://github.com/fuma-nama/fumadocs).\n\nRun deve"
},
{
"path": "apps/docs/content/docs/architecture.mdx",
"chars": 10647,
"preview": "---\ntitle: Architecture\ndescription: Understand Monicon's architecture, package structure, and how components work toget"
},
{
"path": "apps/docs/content/docs/index.mdx",
"chars": 3966,
"preview": "---\ntitle: Introduction\ndescription: Monicon is an easy-to-use icon orchestration tool that makes adding icons to your p"
},
{
"path": "apps/docs/content/docs/installation/cli.mdx",
"chars": 1871,
"preview": "---\ntitle: CLI\ndescription: Learn how to use the Monicon CLI to generate icons\n---\n\nThe Monicon CLI provides a command-l"
},
{
"path": "apps/docs/content/docs/installation/esbuild.mdx",
"chars": 2254,
"preview": "---\ntitle: React (esbuild)\ndescription: Learn how to install and use Monicon in your React (esbuild) project\n---\n\n## Ins"
},
{
"path": "apps/docs/content/docs/installation/library.mdx",
"chars": 4781,
"preview": "---\ntitle: Library\ndescription: Learn how to use Monicon programmatically as a library\n---\n\nMonicon can be used programm"
},
{
"path": "apps/docs/content/docs/installation/meta.json",
"chars": 268,
"preview": "{\n \"title\": \"Installation\",\n \"pages\": [\n \"cli\",\n \"library\",\n \"universal-build-tool\",\n \"react\",\n \"nextjs"
},
{
"path": "apps/docs/content/docs/installation/nextjs.mdx",
"chars": 2511,
"preview": "---\ntitle: Next.js\ndescription: Learn how to install and use Monicon in your Next.js project\n---\n\n## Installation\n\nInsta"
},
{
"path": "apps/docs/content/docs/installation/nuxt.mdx",
"chars": 2163,
"preview": "---\ntitle: Nuxt\ndescription: Learn how to install and use Monicon in your Nuxt project\n---\n\n## Installation\n\nInstall Mon"
},
{
"path": "apps/docs/content/docs/installation/qwik.mdx",
"chars": 2624,
"preview": "---\ntitle: Qwik\ndescription: Learn how to install and use Monicon in your Qwik project\n---\n\n## Installation\n\nInstall Mon"
},
{
"path": "apps/docs/content/docs/installation/react-native.mdx",
"chars": 2714,
"preview": "---\ntitle: React Native\ndescription: Learn how to install and use Monicon in your React Native project\n---\n\n## Installat"
},
{
"path": "apps/docs/content/docs/installation/react.mdx",
"chars": 2280,
"preview": "---\ntitle: React\ndescription: Learn how to install and use Monicon in your React (Vite) project\n---\n\n## Installation\n\nIn"
},
{
"path": "apps/docs/content/docs/installation/remix.mdx",
"chars": 2530,
"preview": "---\ntitle: Remix\ndescription: Learn how to install and use Monicon in your Remix project\n---\n\n## Installation\n\nInstall M"
},
{
"path": "apps/docs/content/docs/installation/rollup.mdx",
"chars": 2272,
"preview": "---\ntitle: React (Rollup)\ndescription: Learn how to install and use Monicon in your Rollup project\n---\n\n## Installation\n"
},
{
"path": "apps/docs/content/docs/installation/rspack.mdx",
"chars": 2381,
"preview": "---\ntitle: React (Rspack)\ndescription: Learn how to install and use Monicon in your React (Rspack) project\n---\n\n## Insta"
},
{
"path": "apps/docs/content/docs/installation/svelte.mdx",
"chars": 2285,
"preview": "---\ntitle: Svelte\ndescription: Learn how to install and use Monicon in your Svelte (SvelteKit) project\n---\n\n## Installat"
},
{
"path": "apps/docs/content/docs/installation/universal-build-tool.mdx",
"chars": 2145,
"preview": "---\ntitle: Universal Build Tool\ndescription: Learn how to use Monicon in universal build tools projects like Swift, Kotl"
},
{
"path": "apps/docs/content/docs/installation/vue.mdx",
"chars": 2237,
"preview": "---\ntitle: Vue\ndescription: Learn how to install and use Monicon in your Vue (Vite) project\n---\n\n## Installation\n\nInstal"
},
{
"path": "apps/docs/content/docs/installation/webpack.mdx",
"chars": 2548,
"preview": "---\ntitle: React (Webpack)\ndescription: Learn how to install and use Monicon in your React (Webpack) project\n---\n\n## Ins"
},
{
"path": "apps/docs/content/docs/loaders/custom-loader.mdx",
"chars": 1736,
"preview": "---\ntitle: Custom Loader\ndescription: Create your own custom icon loader\n---\n\nCustom loaders in Monicon allow you to def"
},
{
"path": "apps/docs/content/docs/loaders/json-collections.mdx",
"chars": 2477,
"preview": "---\ntitle: JSON Collections\ndescription: Load icons from JSON files or URLs\n---\n\nJSON Collections in Monicon allow you t"
},
{
"path": "apps/docs/content/docs/loaders/local-collections.mdx",
"chars": 2275,
"preview": "---\ntitle: Local Collections\ndescription: Load icons from your local file system\n---\n\nLocal Collections in Monicon allow"
},
{
"path": "apps/docs/content/docs/loaders/meta.json",
"chars": 138,
"preview": "{\n \"title\": \"Loaders\",\n \"pages\": [\n \"local-collections\",\n \"json-collections\",\n \"remote-collections\",\n \"cus"
},
{
"path": "apps/docs/content/docs/loaders/remote-collections.mdx",
"chars": 1708,
"preview": "---\ntitle: Remote Collections\ndescription: Fetch icons directly from remote URLs\n---\n\nRemote Collections in Monicon allo"
},
{
"path": "apps/docs/content/docs/meta.json",
"chars": 131,
"preview": "{\n \"title\": \"Documentation\",\n \"pages\": [\n \"index\",\n \"architecture\",\n \"installation\",\n \"loaders\",\n \"plug"
},
{
"path": "apps/docs/content/docs/plugins/clean.mdx",
"chars": 2273,
"preview": "---\ntitle: Clean\ndescription: Clean output directories before generating icons\n---\n\nThe Clean plugin removes files and d"
},
{
"path": "apps/docs/content/docs/plugins/custom.mdx",
"chars": 6628,
"preview": "---\ntitle: Custom Plugin\ndescription: Build your own Monicon plugins with full control over icon processing\n---\n\nLearn h"
},
{
"path": "apps/docs/content/docs/plugins/debugger.mdx",
"chars": 2644,
"preview": "---\ntitle: Debugger\ndescription: Debug the icon generation process\n---\n\nThe Debugger plugin logs information about the i"
},
{
"path": "apps/docs/content/docs/plugins/generic.mdx",
"chars": 4588,
"preview": "---\ntitle: Generic\ndescription: Create custom icon outputs with flexible file generation\n---\n\nThe Generic plugin is a fl"
},
{
"path": "apps/docs/content/docs/plugins/meta.json",
"chars": 211,
"preview": "{\n \"title\": \"Plugins\",\n \"pages\": [\n \"react\",\n \"vue\",\n \"svelte\",\n \"qwik\",\n \"react-native\","
},
{
"path": "apps/docs/content/docs/plugins/qwik.mdx",
"chars": 3047,
"preview": "---\ntitle: Qwik\ndescription: Generate Qwik components for your icons\n---\n\nThe Qwik plugin generates Qwik components from"
},
{
"path": "apps/docs/content/docs/plugins/react-native.mdx",
"chars": 3720,
"preview": "---\ntitle: React Native\ndescription: Generate React Native components for your icons\n---\n\nThe React Native plugin genera"
},
{
"path": "apps/docs/content/docs/plugins/react.mdx",
"chars": 3335,
"preview": "---\ntitle: React\ndescription: Generate React components for your icons\n---\n\nThe React plugin generates React components "
},
{
"path": "apps/docs/content/docs/plugins/svelte.mdx",
"chars": 2849,
"preview": "---\ntitle: Svelte\ndescription: Generate Svelte components for your icons\n---\n\nThe Svelte plugin generates Svelte compone"
},
{
"path": "apps/docs/content/docs/plugins/svg.mdx",
"chars": 1831,
"preview": "---\ntitle: SVG\ndescription: Export icons as raw SVG files\n---\n\nThe SVG plugin exports your icons as raw SVG files, usefu"
},
{
"path": "apps/docs/content/docs/plugins/vue.mdx",
"chars": 3239,
"preview": "---\ntitle: Vue\ndescription: Generate Vue components for your icons\n---\n\nThe Vue plugin generates Vue 3 Single File Compo"
},
{
"path": "apps/docs/eslint.config.mjs",
"chars": 318,
"preview": "import { defineConfig, globalIgnores } from 'eslint/config';\nimport nextVitals from 'eslint-config-next/core-web-vitals'"
},
{
"path": "apps/docs/next.config.mjs",
"chars": 2582,
"preview": "import { createMDX } from \"fumadocs-mdx/next\";\n\nconst withMDX = createMDX();\n\n/** @type {import('next').NextConfig} */\nc"
},
{
"path": "apps/docs/package.json",
"chars": 1063,
"preview": "{\n \"name\": \"@monicon/docs\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"build\": \"next build\",\n \"dev"
},
{
"path": "apps/docs/postcss.config.mjs",
"chars": 70,
"preview": "export default {\n plugins: {\n '@tailwindcss/postcss': {},\n },\n};\n"
},
{
"path": "apps/docs/public/browserconfig.xml",
"chars": 281,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig><msapplication><tile><square70x70logo src=\"/ms-icon-70x70.png\"/><s"
},
{
"path": "apps/docs/source.config.ts",
"chars": 1023,
"preview": "import { defineConfig, defineDocs, frontmatterSchema, metaSchema } from 'fumadocs-mdx/config';\nimport { transformerTwosl"
},
{
"path": "apps/docs/src/app/(home)/layout.tsx",
"chars": 239,
"preview": "import { HomeLayout } from \"fumadocs-ui/layouts/home\";\nimport { baseOptions } from \"@/lib/layout.shared\";\n\nexport defaul"
},
{
"path": "apps/docs/src/app/(home)/page.tsx",
"chars": 5293,
"preview": "import Link from \"next/link\";\nimport { ConfigDemo } from \"@/components/ConfigDemo\";\nimport { buttonVariants } from \"fuma"
},
{
"path": "apps/docs/src/app/api/search/route.ts",
"chars": 243,
"preview": "import { source } from '@/lib/source';\nimport { createFromSource } from 'fumadocs-core/search/server';\n\nexport const { G"
},
{
"path": "apps/docs/src/app/docs/[[...slug]]/page.tsx",
"chars": 2065,
"preview": "import { getPageImage, source } from \"@/lib/source\";\nimport {\n DocsBody,\n DocsDescription,\n DocsPage,\n DocsTitle,\n} "
},
{
"path": "apps/docs/src/app/docs/layout.tsx",
"chars": 332,
"preview": "import { source } from '@/lib/source';\nimport { DocsLayout } from 'fumadocs-ui/layouts/docs';\nimport { baseOptions } fro"
},
{
"path": "apps/docs/src/app/global.css",
"chars": 141,
"preview": "@import 'tailwindcss';\n@import 'fumadocs-ui/css/neutral.css';\n@import 'fumadocs-ui/css/preset.css';\n@import 'fumadocs-tw"
},
{
"path": "apps/docs/src/app/layout.tsx",
"chars": 802,
"preview": "import { RootProvider } from \"fumadocs-ui/provider/next\";\nimport \"./global.css\";\nimport { Inter } from \"next/font/google"
},
{
"path": "apps/docs/src/app/llms-full.txt/route.ts",
"chars": 257,
"preview": "import { getLLMText, source } from '@/lib/source';\n\nexport const revalidate = false;\n\nexport async function GET() {\n co"
},
{
"path": "apps/docs/src/app/llms.mdx/docs/[[...slug]]/route.ts",
"chars": 520,
"preview": "import { getLLMText, source } from '@/lib/source';\nimport { notFound } from 'next/navigation';\n\nexport const revalidate "
},
{
"path": "apps/docs/src/app/manifest.ts",
"chars": 1365,
"preview": "import type { MetadataRoute } from 'next'\n\nexport default function manifest(): MetadataRoute.Manifest {\n return {\n "
},
{
"path": "apps/docs/src/app/og/docs/[...slug]/route.tsx",
"chars": 885,
"preview": "import { getPageImage, source } from \"@/lib/source\";\nimport { notFound } from \"next/navigation\";\nimport { ImageResponse "
},
{
"path": "apps/docs/src/app/og/route.tsx",
"chars": 705,
"preview": "import { ImageResponse } from \"next/og\";\nimport { generate as DefaultImage } from \"fumadocs-ui/og\";\n\nexport const revali"
},
{
"path": "apps/docs/src/app/sitemap.ts",
"chars": 990,
"preview": "import type { MetadataRoute } from 'next';\nimport { source } from '@/lib/source';\n\nexport const revalidate = false;\n\ncon"
},
{
"path": "apps/docs/src/components/ConfigDemo.tsx",
"chars": 6036,
"preview": "\"use client\";\n\nimport { DynamicCodeBlock } from \"fumadocs-ui/components/dynamic-codeblock\";\nimport { buttonVariants } fr"
},
{
"path": "apps/docs/src/components/ai/page-actions.tsx",
"chars": 10406,
"preview": "'use client';\nimport { useMemo, useState } from 'react';\nimport { Check, ChevronDown, Copy, ExternalLinkIcon, MessageCir"
},
{
"path": "apps/docs/src/components/mdx/mermaid.tsx",
"chars": 1384,
"preview": "'use client';\n\nimport { use, useEffect, useId, useState } from 'react';\nimport { useTheme } from 'next-themes';\n\nexport "
},
{
"path": "apps/docs/src/lib/cn.ts",
"chars": 48,
"preview": "export { twMerge as cn } from 'tailwind-merge';\n"
},
{
"path": "apps/docs/src/lib/layout.shared.tsx",
"chars": 2040,
"preview": "import type { BaseLayoutProps } from \"fumadocs-ui/layouts/shared\";\nimport { BookIcon } from \"lucide-react\";\n\nexport func"
},
{
"path": "apps/docs/src/lib/source.ts",
"chars": 759,
"preview": "import { docs } from 'fumadocs-mdx:collections/server';\nimport { type InferPageType, loader } from 'fumadocs-core/source"
},
{
"path": "apps/docs/src/mdx-components.tsx",
"chars": 1194,
"preview": "import defaultMdxComponents from \"fumadocs-ui/mdx\";\nimport type { MDXComponents } from \"mdx/types\";\nimport * as TabsComp"
},
{
"path": "apps/docs/tsconfig.json",
"chars": 834,
"preview": "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"target\": \"ESNext\",\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n "
},
{
"path": "apps/legacy-docs/.gitignore",
"chars": 19,
"preview": ".next\nnode_modules\n"
},
{
"path": "apps/legacy-docs/CHANGELOG.md",
"chars": 2632,
"preview": "# @monicon/legacy-docs\n\n## 2.0.8\n\n### Patch Changes\n\n- [`8623e16`](https://github.com/oktaysenkan/monicon/commit/8623e16"
},
{
"path": "apps/legacy-docs/LICENSE",
"chars": 1065,
"preview": "MIT License\n\nCopyright (c) 2022 Shu Ding\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\no"
},
{
"path": "apps/legacy-docs/README.md",
"chars": 691,
"preview": "# Nextra Docs Template \n\nThis is a template for creating documentation with [Nextra](https://nextra.site).\n\n[**Live Demo"
},
{
"path": "apps/legacy-docs/next-env.d.ts",
"chars": 230,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": "apps/legacy-docs/next-sitemap.config.js",
"chars": 165,
"preview": "/** @type {import('next-sitemap').IConfig} */\nmodule.exports = {\n siteUrl: process.env.SITE_URL || \"https://monicon-doc"
},
{
"path": "apps/legacy-docs/next.config.mjs",
"chars": 159,
"preview": "import nextra from \"nextra\";\n\nconst withNextra = nextra({\n theme: \"nextra-theme-docs\",\n themeConfig: \"./theme.config.t"
},
{
"path": "apps/legacy-docs/package.json",
"chars": 708,
"preview": "{\n \"name\": \"@monicon/legacy-docs\",\n \"version\": \"2.0.8\",\n \"description\": \"Monicon V1 Documentation\",\n \"private\": true"
},
{
"path": "apps/legacy-docs/pages/_app.tsx",
"chars": 103,
"preview": "function App({ Component, pageProps }) {\n return <Component {...pageProps} />;\n}\n\nexport default App;\n"
},
{
"path": "apps/legacy-docs/pages/_meta.tsx",
"chars": 275,
"preview": "export default {\n index: \"Introduction\",\n installation: \"Installation\",\n customization: \"Customization\",\n troublesho"
},
{
"path": "apps/legacy-docs/pages/api/og.tsx",
"chars": 1517,
"preview": "import { NextApiRequest, NextApiResponse } from \"next\";\nimport { ImageResponse } from \"@vercel/og\";\n\nexport const config"
},
{
"path": "apps/legacy-docs/pages/customization/_meta.tsx",
"chars": 188,
"preview": "export default {\n \"local-collections\": \"Local Collections\",\n \"json-collections\": \"JSON Collections\",\n \"remote-collect"
},
{
"path": "apps/legacy-docs/pages/customization/custom-loader.mdx",
"chars": 1423,
"preview": "# Custom Loader\n\nCustom loaders in Monicon allow you to define your own logic for providing SVG icons. This is especiall"
},
{
"path": "apps/legacy-docs/pages/customization/json-collections.mdx",
"chars": 2043,
"preview": "# JSON Collections\n\nJSON Collections in Monicon allow you to define custom icons from JSON files or URLs. These JSON fil"
},
{
"path": "apps/legacy-docs/pages/customization/local-collections.mdx",
"chars": 1526,
"preview": "# Local Collections\n\nLocal Collections in Monicon allow you to use icons stored locally on your file system. These colle"
},
{
"path": "apps/legacy-docs/pages/customization/remote-collections.mdx",
"chars": 1277,
"preview": "# Remote Collections\n\nRemote Collections in Monicon allow you to fetch and use icons directly from remote URLs. These co"
},
{
"path": "apps/legacy-docs/pages/index.mdx",
"chars": 3958,
"preview": "# Monicon: Universal Icon Library\n\nMonicon is an easy-to-use icon library that makes adding icons to your projects simpl"
},
{
"path": "apps/legacy-docs/pages/installation/_meta.tsx",
"chars": 325,
"preview": "export default {\n react: \"React\",\n nextjs: \"Next.js\",\n remix: \"Remix\",\n qwik: \"Qwik\",\n \"react-native\": \"React Nativ"
},
{
"path": "apps/legacy-docs/pages/installation/nextjs.mdx",
"chars": 2501,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with Next.js\n\nSetting up Monicon with Next.js is "
},
{
"path": "apps/legacy-docs/pages/installation/nuxt.mdx",
"chars": 2176,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with Nuxt\n\nSetting up Monicon with Nuxt is a stra"
},
{
"path": "apps/legacy-docs/pages/installation/qwik.mdx",
"chars": 2447,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with Qwik\n\nSetting up Monicon with Qwik is a stra"
},
{
"path": "apps/legacy-docs/pages/installation/react-esbuild.mdx",
"chars": 2522,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with React (esbuild)\n\nSetting up Monicon with Rea"
},
{
"path": "apps/legacy-docs/pages/installation/react-native.mdx",
"chars": 3832,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with React Native\n\nSetting up Monicon with React "
},
{
"path": "apps/legacy-docs/pages/installation/react-rollup.mdx",
"chars": 2394,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with React (Rollup)\n\nSetting up Monicon with Reac"
},
{
"path": "apps/legacy-docs/pages/installation/react-rspack.mdx",
"chars": 2468,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with React (Rspack)\n\nSetting up Monicon with Reac"
},
{
"path": "apps/legacy-docs/pages/installation/react-webpack.mdx",
"chars": 2372,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with React (Webpack)\n\nSetting up Monicon with Rea"
},
{
"path": "apps/legacy-docs/pages/installation/react.mdx",
"chars": 2483,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with React (Vite)\n\nSetting up Monicon with React "
},
{
"path": "apps/legacy-docs/pages/installation/remix.mdx",
"chars": 2489,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with Remix\n\nSetting up Monicon with Remix and Vit"
},
{
"path": "apps/legacy-docs/pages/installation/svelte.mdx",
"chars": 2453,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with Svelte\n\nSetting up Monicon with Svelte is a "
},
{
"path": "apps/legacy-docs/pages/installation/vue.mdx",
"chars": 2726,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Install Monicon with Vue\n\nSetting up Monicon with Vue is a straig"
},
{
"path": "apps/legacy-docs/pages/troubleshooting/_meta.tsx",
"chars": 148,
"preview": "export default {\n typescript: \"TypeScript\",\n monorepo: \"Monorepo\",\n \"module-resolution\": \"Module Resolution\",\n \"bund"
},
{
"path": "apps/legacy-docs/pages/troubleshooting/bundle-size.mdx",
"chars": 1886,
"preview": "import { Steps, Callout } from \"nextra/components\";\n\n# Bundle Size\n\nTo keep your application efficient, it’s best to onl"
},
{
"path": "apps/legacy-docs/pages/troubleshooting/module-resolution.mdx",
"chars": 677,
"preview": "# Module Resolution\n\nHere, module resolution ensures that the correct version and format of the module are loaded, makin"
},
{
"path": "apps/legacy-docs/pages/troubleshooting/monorepo.mdx",
"chars": 501,
"preview": "# Monorepo Configuration\n\nThis monorepo configuration each app has a unique output file, so you can use Monicon in multi"
},
{
"path": "apps/legacy-docs/pages/troubleshooting/typescript.mdx",
"chars": 788,
"preview": "# TypeScript\n\nMonicon uses TypeScript to generate types for the icons. To enable TypeScript type definitions for your ic"
},
{
"path": "apps/legacy-docs/public/browserconfig.xml",
"chars": 281,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig><msapplication><tile><square70x70logo src=\"/ms-icon-70x70.png\"/><s"
},
{
"path": "apps/legacy-docs/public/manifest.json",
"chars": 812,
"preview": "{\n \"name\": \"Monicon\",\n \"icons\": [\n {\n \"src\": \"/android-icon-36x36.png\",\n \"sizes\": \"36x36\",\n \"type\": "
},
{
"path": "apps/legacy-docs/public/robots.txt",
"chars": 138,
"preview": "# *\nUser-agent: *\nAllow: /\n\n# Host\nHost: https://monicon-docs.vercel.app\n\n# Sitemaps\nSitemap: https://monicon-docs.verce"
},
{
"path": "apps/legacy-docs/public/sitemap-0.xml",
"chars": 4072,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\" xmlns:news=\"http://ww"
},
{
"path": "apps/legacy-docs/public/sitemap.xml",
"chars": 197,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<sitemapindex xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">\n<sitemap><loc>"
},
{
"path": "apps/legacy-docs/theme.config.tsx",
"chars": 5694,
"preview": "import React from \"react\";\nimport { DocsThemeConfig, useConfig, useTheme } from \"nextra-theme-docs\";\nimport { useRouter "
},
{
"path": "apps/legacy-docs/tsconfig.json",
"chars": 510,
"preview": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sk"
},
{
"path": "examples/next/.eslintrc.json",
"chars": 40,
"preview": "{\n \"extends\": \"next/core-web-vitals\"\n}\n"
},
{
"path": "examples/next/.gitignore",
"chars": 386,
"preview": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pn"
},
{
"path": "examples/next/README.md",
"chars": 1365,
"preview": "## Getting Started\n\nFirst, run the development server:\n\n```bash\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localh"
},
{
"path": "examples/next/app/layout.tsx",
"chars": 201,
"preview": "import \"../styles/global.css\";\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n"
},
{
"path": "examples/next/app/page.tsx",
"chars": 812,
"preview": "import styles from \"../styles/index.module.css\";\n\nimport BadgeCheckIcon from \"../components/icons/lucide/badge-check\";\ni"
},
{
"path": "examples/next/components/icons/feather/activity.tsx",
"chars": 445,
"preview": "import React from \"react\";\n\nconst FeatherActivityIcon = (props: React.ComponentPropsWithoutRef<\"svg\">) => {\n return (\n "
},
{
"path": "examples/next/components/icons/feather/alert-circle.tsx",
"chars": 504,
"preview": "import React from \"react\";\n\nconst FeatherAlertCircleIcon = (\n props: React.ComponentPropsWithoutRef<\"svg\">,\n) => {\n re"
},
{
"path": "examples/next/components/icons/logos/active-campaign.tsx",
"chars": 6757,
"preview": "import React from \"react\";\n\nconst LogosActiveCampaignIcon = (\n props: React.ComponentPropsWithoutRef<\"svg\">,\n) => {\n r"
},
{
"path": "examples/next/components/icons/logos/apache.tsx",
"chars": 7836,
"preview": "import React from \"react\";\n\nconst LogosApacheIcon = (props: React.ComponentPropsWithoutRef<\"svg\">) => {\n return (\n <"
},
{
"path": "examples/next/components/icons/logos/atom-icon.tsx",
"chars": 4998,
"preview": "import React from \"react\";\n\nconst LogosAtomIconIcon = (props: React.ComponentPropsWithoutRef<\"svg\">) => {\n return (\n "
},
{
"path": "examples/next/components/icons/lucide/badge-check.tsx",
"chars": 631,
"preview": "import React from \"react\";\n\nconst LucideBadgeCheckIcon = (props: React.ComponentPropsWithoutRef<\"svg\">) => {\n return (\n"
},
{
"path": "examples/next/components/icons/lucide/cloud-download.tsx",
"chars": 554,
"preview": "import React from \"react\";\n\nconst LucideCloudDownloadIcon = (\n props: React.ComponentPropsWithoutRef<\"svg\">,\n) => {\n r"
},
{
"path": "examples/next/components/icons/mdi/account-badge-outline.tsx",
"chars": 642,
"preview": "import React from \"react\";\n\nconst MdiAccountBadgeOutlineIcon = (\n props: React.ComponentPropsWithoutRef<\"svg\">,\n) => {\n"
},
{
"path": "examples/next/components/icons/mdi/account.tsx",
"chars": 412,
"preview": "import React from \"react\";\n\nconst MdiAccountIcon = (props: React.ComponentPropsWithoutRef<\"svg\">) => {\n return (\n <s"
},
{
"path": "examples/next/components/icons/mdi/home.tsx",
"chars": 310,
"preview": "import React from \"react\";\n\nconst MdiHomeIcon = (props: React.ComponentPropsWithoutRef<\"svg\">) => {\n return (\n <svg "
},
{
"path": "examples/next/monicon.config.ts",
"chars": 1176,
"preview": "import { debuggerPlugin, react, clean } from \"@monicon/core/plugins\";\n// import {\n// loadJSONCollection,\n// loadLoca"
},
{
"path": "examples/next/next-env.d.ts",
"chars": 201,
"preview": "/// <reference types=\"next\" />\n/// <reference types=\"next/image-types/global\" />\n\n// NOTE: This file should not be edite"
},
{
"path": "examples/next/next.config.mjs",
"chars": 589,
"preview": "import { MoniconPlugin } from \"@monicon/webpack\";\n\nconst nextConfig = {\n reactStrictMode: true,\n webpack: (config, { d"
},
{
"path": "examples/next/package.json",
"chars": 659,
"preview": "{\n \"name\": \"@monicon/next\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\":"
},
{
"path": "examples/next/styles/global.css",
"chars": 221,
"preview": "body {\n font-family: \"SF Pro Text\", \"SF Pro Icons\", \"Helvetica Neue\", \"Helvetica\",\n \"Arial\", sans-serif;\n display: "
},
{
"path": "examples/next/styles/index.module.css",
"chars": 128,
"preview": ".container {\n height: 100vh;\n width: 100vw;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: "
},
{
"path": "examples/next/tsconfig.json",
"chars": 231,
"preview": "{\n \"extends\": \"@monicon/typescript-config/nextjs.json\",\n \"compilerOptions\": {\n \"plugins\": [{ \"name\": \"next\" }]\n },"
},
{
"path": "examples/nuxt-app/.gitignore",
"chars": 180,
"preview": "# Nuxt dev/build outputs\n.output\n.data\n.nuxt\n.nitro\n.cache\ndist\n\n# Node dependencies\nnode_modules\n\n# Logs\nlogs\n*.log\n\n# "
},
{
"path": "examples/nuxt-app/README.md",
"chars": 1265,
"preview": "## Getting Started\n\nFirst, run the development server:\n\n```bash\npnpm dev\n```\n\nOpen [http://localhost:3001](http://localh"
},
{
"path": "examples/nuxt-app/app.vue",
"chars": 1084,
"preview": "<script setup lang=\"ts\">\nimport BadgeCheckIcon from \"@/components/icons/lucide/badge-check.vue\";\nimport CloudDownloadIco"
},
{
"path": "examples/nuxt-app/components/icons/feather/activity.vue",
"chars": 434,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/components/icons/feather/alert-circle.vue",
"chars": 481,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/components/icons/logos/active-campaign.vue",
"chars": 6742,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/components/icons/logos/apache.vue",
"chars": 7643,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/components/icons/logos/atom-icon.vue",
"chars": 4992,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/components/icons/lucide/badge-check.vue",
"chars": 629,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/components/icons/lucide/cloud-download.vue",
"chars": 544,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/components/icons/mdi/account-badge-outline.vue",
"chars": 624,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/components/icons/mdi/account.vue",
"chars": 411,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/components/icons/mdi/home.vue",
"chars": 318,
"preview": "<script setup lang=\"ts\">\nconst props = defineProps();\n</script>\n\n<template>\n <svg xmlns=\"http://www.w3.org/2000/svg\" vi"
},
{
"path": "examples/nuxt-app/monicon.config.ts",
"chars": 1204,
"preview": "import { debuggerPlugin, clean, vue } from \"@monicon/core/plugins\";\n// import {\n// loadJSONCollection,\n// loadLocalC"
},
{
"path": "examples/nuxt-app/nuxt.config.ts",
"chars": 134,
"preview": "export default defineNuxtConfig({\n devtools: { enabled: true },\n compatibilityDate: \"2024-10-05\",\n modules: [\"@monico"
},
{
"path": "examples/nuxt-app/package.json",
"chars": 553,
"preview": "{\n \"name\": \"@monicon/nuxt-app\",\n \"version\": \"0.0.0\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\""
},
{
"path": "examples/nuxt-app/server/tsconfig.json",
"chars": 49,
"preview": "{\n \"extends\": \"../.nuxt/tsconfig.server.json\"\n}\n"
},
{
"path": "examples/nuxt-app/tsconfig.json",
"chars": 94,
"preview": "{\n // https://nuxt.com/docs/guide/concepts/typescript\n \"extends\": \"./.nuxt/tsconfig.json\"\n}\n"
},
{
"path": "examples/qwik-app/.eslintignore",
"chars": 390,
"preview": "**/*.log\n**/.DS_Store\n*.\n.vscode/settings.json\n.history\n.yarn\nbazel-*\nbazel-bin\nbazel-out\nbazel-qwik\nbazel-testlogs\ndist"
},
{
"path": "examples/qwik-app/.eslintrc.cjs",
"chars": 1261,
"preview": "module.exports = {\n root: true,\n env: {\n browser: true,\n es2021: true,\n node: true,\n },\n extends: [\n \"es"
},
{
"path": "examples/qwik-app/.gitignore",
"chars": 384,
"preview": "# Build\n/dist\n/lib\n/lib-types\n/server\n\n# Development\nnode_modules\n.env\n*.local\n\n# Cache\n.cache\n.mf\n.rollup.cache\ntsconfi"
},
{
"path": "examples/qwik-app/.prettierignore",
"chars": 385,
"preview": "**/*.log\n**/.DS_Store\n*.\n.vscode/settings.json\n.history\n.yarn\nbazel-*\nbazel-bin\nbazel-out\nbazel-qwik\nbazel-testlogs\ndist"
},
{
"path": "examples/qwik-app/README.md",
"chars": 2446,
"preview": "# Qwik City App ⚡️\n\n- [Qwik Docs](https://qwik.dev/)\n- [Discord](https://qwik.dev/chat)\n- [Qwik GitHub](https://github.c"
},
{
"path": "examples/qwik-app/monicon.config.ts",
"chars": 1203,
"preview": "import { debuggerPlugin, qwik, clean } from \"@monicon/core/plugins\";\n// import {\n// loadJSONCollection,\n// loadLocal"
},
{
"path": "examples/qwik-app/package.json",
"chars": 1568,
"preview": "{\n \"name\": \"@monicon/qwik-app\",\n \"version\": \"0.0.0\",\n \"description\": \"Blank project with routing included\",\n \"engine"
},
{
"path": "examples/qwik-app/public/manifest.json",
"chars": 258,
"preview": "{\n \"$schema\": \"https://json.schemastore.org/web-manifest-combined.json\",\n \"name\": \"qwik-project-name\",\n \"short_name\":"
},
{
"path": "examples/qwik-app/public/robots.txt",
"chars": 0,
"preview": ""
},
{
"path": "examples/qwik-app/qwik.env.d.ts",
"chars": 221,
"preview": "// This file can be used to add references for global types like `vite/client`.\n\n// Add global `vite/client` types. For "
},
{
"path": "examples/qwik-app/src/components/icons/feather/activity.tsx",
"chars": 530,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst FeatherActivityIcon = component$(\n (p"
},
{
"path": "examples/qwik-app/src/components/icons/feather/alert-circle.tsx",
"chars": 588,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst FeatherAlertCircleIcon = component$(\n "
},
{
"path": "examples/qwik-app/src/components/icons/logos/active-campaign.tsx",
"chars": 6826,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst LogosActiveCampaignIcon = component$(\n"
},
{
"path": "examples/qwik-app/src/components/icons/logos/apache.tsx",
"chars": 7914,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst LogosApacheIcon = component$((props: Q"
},
{
"path": "examples/qwik-app/src/components/icons/logos/atom-icon.tsx",
"chars": 5049,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst LogosAtomIconIcon = component$((props:"
},
{
"path": "examples/qwik-app/src/components/icons/lucide/badge-check.tsx",
"chars": 720,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst LucideBadgeCheckIcon = component$(\n ("
},
{
"path": "examples/qwik-app/src/components/icons/lucide/cloud-download.tsx",
"chars": 638,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst LucideCloudDownloadIcon = component$(\n"
},
{
"path": "examples/qwik-app/src/components/icons/mdi/account-badge-outline.tsx",
"chars": 711,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst MdiAccountBadgeOutlineIcon = component"
},
{
"path": "examples/qwik-app/src/components/icons/mdi/account.tsx",
"chars": 463,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst MdiAccountIcon = component$((props: Qw"
},
{
"path": "examples/qwik-app/src/components/icons/mdi/home.tsx",
"chars": 361,
"preview": "import { component$, type QwikIntrinsicElements } from \"@builder.io/qwik\";\n\nconst MdiHomeIcon = component$((props: QwikI"
},
{
"path": "examples/qwik-app/src/components/router-head/router-head.tsx",
"chars": 1203,
"preview": "import { component$ } from \"@builder.io/qwik\";\nimport { useDocumentHead, useLocation } from \"@builder.io/qwik-city\";\n\n/*"
},
{
"path": "examples/qwik-app/src/entry.dev.tsx",
"chars": 588,
"preview": "/*\n * WHAT IS THIS FILE?\n *\n * Development entry point using only client-side modules:\n * - Do not use this mode in prod"
},
{
"path": "examples/qwik-app/src/entry.preview.tsx",
"chars": 652,
"preview": "/*\n * WHAT IS THIS FILE?\n *\n * It's the bundle entry point for `npm run preview`.\n * That is, serving your app built in "
},
{
"path": "examples/qwik-app/src/entry.ssr.tsx",
"chars": 765,
"preview": "/**\n * WHAT IS THIS FILE?\n *\n * SSR entry point, in all cases the application is rendered outside the browser, this\n * e"
},
{
"path": "examples/qwik-app/src/global.css",
"chars": 182,
"preview": "body {\n margin: 0;\n}\n\n.home {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n justify-content: center;\n align-items"
},
{
"path": "examples/qwik-app/src/root.tsx",
"chars": 951,
"preview": "import { component$ } from \"@builder.io/qwik\";\nimport {\n QwikCityProvider,\n RouterOutlet,\n ServiceWorkerRegister,\n} f"
},
{
"path": "examples/qwik-app/src/routes/index.tsx",
"chars": 1012,
"preview": "import { component$ } from \"@builder.io/qwik\";\nimport type { DocumentHead } from \"@builder.io/qwik-city\";\n\nimport Apache"
},
{
"path": "examples/qwik-app/src/routes/layout.tsx",
"chars": 612,
"preview": "import { component$, Slot } from \"@builder.io/qwik\";\nimport type { RequestHandler } from \"@builder.io/qwik-city\";\n\nexpor"
},
{
"path": "examples/qwik-app/src/routes/service-worker.ts",
"chars": 631,
"preview": "/*\n * WHAT IS THIS FILE?\n *\n * The service-worker.ts file is used to have state of the art prefetching.\n * https://qwik."
},
{
"path": "examples/qwik-app/tsconfig.json",
"chars": 637,
"preview": "{\n \"compilerOptions\": {\n \"allowJs\": true,\n \"target\": \"ES2017\",\n \"module\": \"ES2022\",\n \"lib\": [\"es2022\", \"DOM"
},
{
"path": "examples/qwik-app/vite.config.ts",
"chars": 3993,
"preview": "/**\n * This is the base config for vite.\n * When building, the adapter config is used which loads this file and extends "
},
{
"path": "examples/react-native-app/.gitignore",
"chars": 411,
"preview": "# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files\n\n# dependencies\nnode_modules"
},
{
"path": "examples/react-native-app/README.md",
"chars": 1738,
"preview": "# Welcome to your Expo app 👋\n\nThis is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.n"
},
{
"path": "examples/react-native-app/app/(tabs)/_layout.tsx",
"chars": 1328,
"preview": "import { Tabs } from 'expo-router';\nimport React from 'react';\nimport { Platform } from 'react-native';\n\nimport { Haptic"
},
{
"path": "examples/react-native-app/app/(tabs)/explore.tsx",
"chars": 4576,
"preview": "import { Image } from 'expo-image';\nimport { Platform, StyleSheet } from 'react-native';\n\nimport { Collapsible } from '@"
},
{
"path": "examples/react-native-app/app/(tabs)/index.tsx",
"chars": 1124,
"preview": "import { StyleSheet, View } from \"react-native\";\n\nimport ApacheLogo from \"@/components/icons/logos/apache\";\nimport Badge"
},
{
"path": "examples/react-native-app/app/+not-found.tsx",
"chars": 793,
"preview": "import { Link, Stack } from 'expo-router';\nimport { StyleSheet } from 'react-native';\n\nimport { ThemedText } from '@/com"
},
{
"path": "examples/react-native-app/app/_layout.tsx",
"chars": 864,
"preview": "import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';\nimport { useFonts } from 'expo-font';"
},
{
"path": "examples/react-native-app/app.json",
"chars": 976,
"preview": "{\n \"expo\": {\n \"name\": \"react-native-app\",\n \"slug\": \"react-native-app\",\n \"version\": \"1.0.0\",\n \"orientation\":"
},
{
"path": "examples/react-native-app/components/Collapsible.tsx",
"chars": 1358,
"preview": "import { PropsWithChildren, useState } from 'react';\nimport { StyleSheet, TouchableOpacity } from 'react-native';\n\nimpor"
},
{
"path": "examples/react-native-app/components/ExternalLink.tsx",
"chars": 713,
"preview": "import { Href, Link } from 'expo-router';\nimport { openBrowserAsync } from 'expo-web-browser';\nimport { type ComponentPr"
},
{
"path": "examples/react-native-app/components/HapticTab.tsx",
"chars": 564,
"preview": "import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';\nimport { PlatformPressable } from '@react-navig"
},
{
"path": "examples/react-native-app/components/HelloWave.tsx",
"chars": 936,
"preview": "import { useEffect } from 'react';\nimport { StyleSheet } from 'react-native';\nimport Animated, {\n useAnimatedStyle,\n u"
}
]
// ... and 278 more files (download for full content)
About this extraction
This page contains the full source code of the oktaysenkan/react-native-iconify GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 478 files (680.4 KB), approximately 273.8k tokens, and a symbol index with 123 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.