fix(Toggle): wrong icon-off positioning

nuxt · May 10, 2023 · d5471f4 · d5471f4
1 parent 00b444b
commit d5471f4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/docs/content/3.forms/7.toggle.md b/docs/content/3.forms/7.toggle.md
@@ -10,6 +10,21 @@ headlessui:
 ::component-card
 ::
 
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon-on` and `icon-off` props by using this pattern: `i-{collection_name}-{icon_name}`.
+
+::component-card
+---
+props:
+  iconOn: 'i-heroicons-check-20-solid'
+  iconOff: 'i-heroicons-x-mark-20-solid'
+excludedProps:
+  - iconOn
+  - iconOff
+---
+::
+
 ## Props
 
 :component-props

diff --git a/src/runtime/components/forms/Toggle.vue b/src/runtime/components/forms/Toggle.vue
@@ -7,7 +7,7 @@
       <span v-if="iconOn" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
         <UIcon :name="iconOn" :class="ui.icon.on" />
       </span>
-      <span v-if="iconOff" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
+      <span v-if="iconOff" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
         <UIcon :name="iconOff" :class="ui.icon.off" />
       </span>
     </span>