docs: update cjs usage in readme file (#332)

* docs: update cjs usage in readme file

* chore: include only code snippets for the latest version

README.md

@@ -154,7 +154,7 @@ export default {
 module.exports = {
  /* ... */
  plugins: [
- require('unplugin-icons/webpack')({ /* options */ }),
+ require('unplugin-icons/webpack').default({ /* options */ }),
  ],
 }
 ```
@@ -198,7 +198,21 @@ See [the Nuxt example](examples/nuxt3) for a working example project.
 module.exports = {
  configureWebpack: {
  plugins: [
- require('unplugin-icons/webpack')({ /* options */ }),
+ require('unplugin-icons/webpack').default({ /* options */ }),
+ ],
+ },
+}
+```
+
+You can also rename the Vue configuration file to `vue.config.mjs` and use static import syntax (you should use latest `@vue/cli-service ^5.0.8`):
+```ts
+// vue.config.mjs
+import Icons from 'unplugin-icons/webpack'
+
+export default {
+ configureWebpack: {
+ plugins: [
+ Icons({ /* options */ }),
  ],
  },
 }
@@ -269,24 +283,45 @@ See [the Svelte + Vite example](examples/vite-svelte) for a working example proj
 <summary>Next.js</summary><br>
 
 The `unplugin-icons` plugin should be configured on `next.config.js` configuration file:
-
-```js
+```ts
+// next.config.js
 /** @type {import('next').NextConfig} */
 module.exports = {
  reactStrictMode: true,
  webpack(config) {
  config.plugins.push(
- require('unplugin-icons/webpack')({
+ require('unplugin-icons/webpack').default({
  compiler: 'jsx',
- jsx: 'react',
- }),
+ jsx: 'react'
+ })
  )
 
  return config
  },
 }
 ```
 
+You can also rename the Next configuration file to `next.config.mjs` and use static import syntax:
+```ts
+// next.config.mjs
+import Icons from 'unplugin-icons/webpack'
+
+/** @type {import('next').NextConfig} */
+export default {
+ reactStrictMode: true,
+ webpack(config) {
+ config.plugins.push(
+ Icons({
+ compiler: 'jsx',
+ jsx: 'react'
+ })
+ ) 
+
+ return config
+ }
+}
+```
+
 Check instructions in the `Frameworks -> React` section below if you faced module import errors.
 
 ⚠️ **Warning:** to import an icon is necessary to explicitly add the `.jsx` extension to the import path, so that Next.js knows how to load it, by example:
@@ -312,11 +347,12 @@ See [the Next.js example](examples/next) for a working example project.
 ```ts
 // esbuild.config.js
 import { build } from 'esbuild'
+import Icons from 'unplugin-icons/esbuild'
 
 build({
  /* ... */
  plugins: [
- require('unplugin-icons/esbuild')({
+ Icons({
  /* options */
  }),
  ],