Skip to content

Commit

Permalink
Revert "docs(docs): add troubleshooting docs"
Browse files Browse the repository at this point in the history
This reverts commit 787cc11.
  • Loading branch information
oktaysenkan committed Oct 17, 2024
1 parent e75a1ab commit 238bfcf
Show file tree
Hide file tree
Showing 13 changed files with 266 additions and 222 deletions.
1 change: 0 additions & 1 deletion apps/docs/pages/_meta.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export default {
index: "Introduction",
installation: "Installation",
troubleshooting: "Troubleshooting",
contact: {
title: "Contact ↗",
type: "page",
Expand Down
44 changes: 27 additions & 17 deletions apps/docs/pages/installation/nextjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ Setting up Monicon with Next.js is a straightforward process. This guide will wa

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 @monicon/webpack
```sh npm2yarn copy
npm i @monicon/core @monicon/react @monicon/webpack
```

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
```sh npm2yarn copy
npm i -D @iconify/json

# or specific icon sets
Expand All @@ -27,21 +27,12 @@ npm i -D @iconify-json/mdi @iconify-json/feather

If you want to use Monicon with Next.js, you’ll need to configure Next.js.

```js filename="next.config.js"
```js filename="next.config.js" copy
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",
],
})
);
config.plugins.push(new MoniconPlugin());

return config;
},
Expand All @@ -50,17 +41,35 @@ const nextConfig = {
module.exports = nextConfig;
```

## Configure Monicon

Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.

```ts filename="monicon.config.ts" copy
import type { MoniconOptions } from "@monicon/core";

export default {
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
} satisfies MoniconOptions;
```

<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.
The `icons` array in the 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"
```tsx filename="src/app/page.tsx" copy
import { Monicon } from "@monicon/react";

function App() {
Expand All @@ -80,4 +89,5 @@ export default App;
## Next Steps

You’ve successfully set up Monicon with Next.js! You can now explore more icon sets and customize your usage further.
</Steps>

</Steps>
54 changes: 33 additions & 21 deletions apps/docs/pages/installation/nuxt.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,18 @@ import { Steps, Callout } from "nextra/components";
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 @monicon/nuxt
```sh npm2yarn copy
npm i @monicon/core @monicon/vue @monicon/nuxt
```

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
```sh npm2yarn copy
npm i -D @iconify/json

# or specific icon sets
Expand All @@ -26,41 +27,52 @@ npm i -D @iconify-json/mdi @iconify-json/feather

Now that the dependencies are installed, you’ll need to configure Nuxt to use Monicon.

```ts filename="nuxt.config.ts"
```ts filename="nuxt.config.ts" copy
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ["@monicon/nuxt"],
monicon: {
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check"
],
},
});
```

## Configure Monicon

Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.

```ts filename="monicon.config.ts" copy
import type { MoniconOptions } from "@monicon/core";

export default {
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
} satisfies MoniconOptions;
```

<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.
The `icons` array in the 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"
```vue filename="src/app.vue" copy
<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" />
<monicon name="mdi:home" />
<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" />
<monicon name="mdi:home" />
</template>
```

## Next Steps

You’ve successfully set up Monicon! You can now explore more icon sets and customize your usage further.
</Steps>

</Steps>
68 changes: 36 additions & 32 deletions apps/docs/pages/installation/react-native.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@ Setting up Monicon with React Native is a straightforward process. This guide wi

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 @monicon/metro @monicon/babel-plugin
```sh npm2yarn copy
npm i @monicon/core @monicon/native @monicon/metro @monicon/babel-plugin

# if you want react-native-web support
npm i @monicon/webpack
```

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
```sh npm2yarn copy
npm i -D @iconify/json

# or specific icon sets
Expand All @@ -30,34 +30,22 @@ npm i -D @iconify-json/mdi @iconify-json/feather

Now that the dependencies are installed, you’ll need to configure Metro to use Monicon.

```js filename="metro.config.js"
```js filename="metro.config.js" copy
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",
],
});
const configWithMonicon = withMonicon(config);

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 Babel

Now you’ll need to configure Babel.

```ts filename="vite.config.ts"
```ts filename="babel.config.js" copy
module.exports = function (api) {
api.cache(true);
return {
Expand All @@ -71,39 +59,54 @@ module.exports = function (api) {

If you want to use Monicon with React Native Web, you’ll need to configure Webpack.

```js filename="webpack.config.js"
```js filename="webpack.config.js" copy
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"
],
})
);
config.plugins.push(new MoniconPlugin());

return config;
};
```

## Configure Monicon

Now you need to configure Monicon to use the icon sets you want in your project. Also you can use `monicon.config.js` file to configure Monicon.

```ts filename="monicon.config.ts" copy
import type { MoniconOptions } from "@monicon/core";

export default {
icons: [
"mdi:home",
"feather:activity",
"logos:active-campaign",
"lucide:badge-check",
],
} satisfies MoniconOptions;
```

<Callout>
The `icons` array in the 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"
```tsx filename="src/App.tsx" copy
import { View } from "react-native";
import { Monicon } from "@monicon/native";

function App() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<View>
<Monicon name="mdi:home" />
<Monicon name="logos:active-campaign" size={30} />
<Monicon name="feather:activity" color="red" />
Expand All @@ -118,4 +121,5 @@ export default App;
## Next Steps

You’ve successfully set up Monicon with React Native! You can now explore more icon sets and customize your usage further.
</Steps>

</Steps>
Loading

0 comments on commit 238bfcf

Please sign in to comment.