From 91faebb592c94b12a679bc2d34f3d66bdfa37887 Mon Sep 17 00:00:00 2001 From: userquin Date: Sat, 2 Dec 2023 14:28:28 +0100 Subject: [PATCH 1/2] docs: update cjs usage in readme file --- README.md | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 82 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8385d61..47f3e0c 100644 --- a/README.md +++ b/README.md @@ -149,6 +149,18 @@ export default {
Webpack
+From version `v0.18.0+` you need to use `default` export: +```ts +// webpack.config.js +module.exports = { + /* ... */ + plugins: [ + require('unplugin-icons/webpack').default({ /* options */ }), + ], +} +``` + +If you are using a version earlier than `v0.18.0`: ```ts // webpack.config.js module.exports = { @@ -193,6 +205,33 @@ See [the Nuxt example](examples/nuxt3) for a working example project.
Vue CLI
+From version `v0.18.0+` you need to use `default` export: +```ts +// vue.config.js +module.exports = { + configureWebpack: { + plugins: [ + require('unplugin-icons/webpack').default({ /* options */ }), + ], + }, +} +``` + +or you can 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 */ }), + ], + }, +} +``` + +If you are using a version earlier than `v0.18.0`: ```ts // vue.config.js module.exports = { @@ -268,9 +307,51 @@ See [the Svelte + Vite example](examples/vite-svelte) for a working example proj
Next.js
-The `unplugin-icons` plugin should be configured on `next.config.js` configuration file: +The `unplugin-icons` plugin should be configured on `next.config.js` configuration file. + +From version `v0.18.0+` you need to use `default` export: +```ts +// next.config.js +/** @type {import('next').NextConfig} */ +module.exports = { + reactStrictMode: true, + webpack(config) { + config.plugins.push( + require('unplugin-icons/webpack').default({ + compiler: 'jsx', + jsx: 'react' + }) + ) + + return config + }, +} +``` + +or you can 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 + } +} +``` +If you are using a version earlier than `v0.18.0`: ```js +// next.config.js /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, From 348a1bbbb7a9292b871fb343a1e10db3ca66cd77 Mon Sep 17 00:00:00 2001 From: userquin Date: Sun, 3 Dec 2023 14:24:00 +0100 Subject: [PATCH 2/2] chore: include only code snippets for the latest version --- README.md | 55 +++++-------------------------------------------------- 1 file changed, 5 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 47f3e0c..14449b2 100644 --- a/README.md +++ b/README.md @@ -149,7 +149,6 @@ export default {
Webpack
-From version `v0.18.0+` you need to use `default` export: ```ts // webpack.config.js module.exports = { @@ -160,17 +159,6 @@ module.exports = { } ``` -If you are using a version earlier than `v0.18.0`: -```ts -// webpack.config.js -module.exports = { - /* ... */ - plugins: [ - require('unplugin-icons/webpack')({ /* options */ }), - ], -} -``` -
@@ -205,7 +193,6 @@ See [the Nuxt example](examples/nuxt3) for a working example project.
Vue CLI
-From version `v0.18.0+` you need to use `default` export: ```ts // vue.config.js module.exports = { @@ -217,7 +204,7 @@ module.exports = { } ``` -or you can rename the Vue configuration file to `vue.config.mjs` and use static import syntax (you should use latest `@vue/cli-service ^5.0.8`): +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' @@ -231,18 +218,6 @@ export default { } ``` -If you are using a version earlier than `v0.18.0`: -```ts -// vue.config.js -module.exports = { - configureWebpack: { - plugins: [ - require('unplugin-icons/webpack')({ /* options */ }), - ], - }, -} -``` -
@@ -307,9 +282,7 @@ See [the Svelte + Vite example](examples/vite-svelte) for a working example proj
Next.js
-The `unplugin-icons` plugin should be configured on `next.config.js` configuration file. - -From version `v0.18.0+` you need to use `default` export: +The `unplugin-icons` plugin should be configured on `next.config.js` configuration file: ```ts // next.config.js /** @type {import('next').NextConfig} */ @@ -328,7 +301,7 @@ module.exports = { } ``` -or you can rename the Next configuration file to `next.config.mjs` and use static import syntax: +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' @@ -349,25 +322,6 @@ export default { } ``` -If you are using a version earlier than `v0.18.0`: -```js -// next.config.js -/** @type {import('next').NextConfig} */ -module.exports = { - reactStrictMode: true, - webpack(config) { - config.plugins.push( - require('unplugin-icons/webpack')({ - 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: @@ -393,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 */ }), ],