From c963ba688f5bc5b55764883a15b5bdede8d4ebc4 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 19 Dec 2023 17:51:27 +0100
Subject: [PATCH] docs(theming): improve `Icons` section

---
 docs/content/1.getting-started/3.theming.md | 26 ++++++++++++---------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index 77fb85c5..a77e0dc6 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -281,12 +281,14 @@ export default defineNuxtConfig({
 Search the icon you want to use on https://icones.js.org built by [@antfu](https://github.com/antfu).
 ::
 
-Unlike the official [nuxt-icon](https://github.com/nuxt-modules/icon/) module, this module will not fetch any icon from the web and will only bundle the icons you use in your app thanks to [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons).
-
-However, you will need to install either `@iconify/json` (full icon collections, 50MB) or the individual icon packages you want to use in your app.
+Thanks to [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons) plugin, only the icons you use in your app will be bundled in your CSS. However, you need to install the icon collections you specified in the `ui.icons` key:
 
 ::code-group
 
+```bash [pnpm]
+pnpm i @iconify-json/{collection_name}
+```
+
 ```bash [yarn]
 yarn add @iconify-json/{collection_name}
 ```
@@ -295,25 +297,21 @@ yarn add @iconify-json/{collection_name}
 npm install @iconify-json/{collection_name}
 ```
 
-```sh [pnpm]
-pnpm i @iconify-json/{collection_name}
-```
-
 ::
 
-When using `@iconify/json`, you can specifiy `icons: 'all'` in your `nuxt.config.ts` to use any icon in your app.
+If you choose to use the full `@iconify/json` icon collection (50MB), you can specifiy `icons: 'all'` or `icons: {}` in your `nuxt.config.ts` to use any icon in your app.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   ui: {
-    icons: 'all'
+    icons: {}
   }
 })
 ```
 
 ### Custom config
 
-If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
+If you have specific needs, like using a custom icon collection, you can use the `icons` option in your `nuxt.config.ts` as an object to override the config of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
 
 ```ts [nuxt.config.ts]
 import { getIconCollections } from '@egoist/tailwindcss-icons'
@@ -345,7 +343,13 @@ export default defineNuxtConfig({
 })
 ```
 
----
+### Dynamic icons
+
+The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
+
+Read more about this in the [Icon](/elements/icon#dynamic) component page.
+
+### Defaults
 
 You can easily replace all the default icons of the components in your `app.config.ts`.