From 3947d42fa7f93f8f9bafdb39364ab6f5ceac54ad Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 11 Apr 2026 17:33:52 +0300
Subject: [PATCH] docs: update Iconify Tailwind configuration to use dynamic
 selectors and refresh code examples

---
 src/icon/alternativeIconsPacks.mdx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/icon/alternativeIconsPacks.mdx b/src/icon/alternativeIconsPacks.mdx
index d672fe3..26c456d 100644
--- a/src/icon/alternativeIconsPacks.mdx
+++ b/src/icon/alternativeIconsPacks.mdx
@@ -19,7 +19,7 @@ To get started with Iconify in a Tailwind CSS project, follow these steps:
 Add the official plugin and any icon sets you want to use as development dependencies. For example, to use Material Design Icons (light theme) you can run: `npm install -D @iconify/tailwind @iconify-json/mdi-light`.
 
 #### 2. **Configure Tailwind to use the Iconify plugin:**
-Open your tailwind.config.js and import the plugin. Then add it to the plugins array, specifying which icon sets (by their prefix) to include if using the static selectors. For example:
+Open your tailwind.config.js and import the plugin. Then add it to the plugins array. For example:
 
 ```javascript
 // tailwind.config.js
@@ -45,14 +45,14 @@ After setup, you can use Iconify icons in your Vue components just like using an
 
 ```vue
 <template>
-  <!-- Using the 'home' icon from Material Design Icons (mdi-light set) -->
-  <span class="icon-[mdi-light--home] text-gray-600 w-6 h-6"></span>
-  <icon name="icon-[mdi-light--home]" />
-  <Button iconName="icon-[mdi-light--home]" />
-  <IconButton iconName="icon-[mdi-light--home]" />
+  <!-- Using the 'hand-stop' icon from Tabler Icons (tabler set) -->
+  <span class="iconify tabler--hand-stop text-gray-600 w-6 h-6"></span>
+  <Icon name="iconify tabler--hand-stop" />
+  <Button iconName="iconify tabler--hand-stop" />
+  <IconButton iconName="iconify tabler--hand-stop" />
 </template>
 ```
 
-In the snippet above, the icon-[mdi-light--home] class inserts the mdi-light:home icon as an inline SVG. We also apply Tailwind utility classes for color and size. In this example, text-gray-600 sets the icon color (monotone icons inherit the text color), and w-6 h-6 gives it a fixed width and height. You can swap out the prefix and icon name to use any icon from Iconify’s library (just make sure you’ve installed the corresponding icon set).
+In the snippet above, the iconify tabler--hand-stop class inserts the tabler:hand-stop icon. We also apply Tailwind utility classes for color and size. In this example, text-gray-600 sets the icon color (monotone icons inherit the text color), and w-6 h-6 gives it a fixed width and height. You can swap out the prefix and icon name to use any icon from Iconify’s library (just make sure you’ve installed the corresponding icon set).
 
 For more details on using Iconify with Tailwind (and other setup options like additional icon sets or dynamic mode), refer to the official Iconify Tailwind CSS documentation.