Rotate the accordion plus toggle so it works with sprite icons (#3075)

.changeset/accordion-plus-toggle-rotate.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"@tabler/docs": patch
+---
+
+Fixed `.accordion-button-toggle-plus` with sprite icons by rotating the plus into a close icon instead of hiding a path.

core/scss/ui/_accordion.scss

@@ -96,17 +96,14 @@
     color: var(--accordion-active-color);
     transform: rotate(-180deg);
   }
-
-  path {
-    transition: $transition-time opacity;
-  }
 }
 
+// A plus turns into a close icon by rotating a quarter turn. Rotating the
+// toggle instead of hiding an svg path works with every icon source — inline
+// svg, a sprite `<use>`, an icon font (#2606).
 .accordion-button-toggle-plus {
   .accordion-button:not(.collapsed) & {
-    path:first-child {
+    transform: rotate(45deg);
-      opacity: 0;
-    }
   }
 }
 

docs/content/ui/components/accordion.mdx

@@ -21,7 +21,7 @@ classnames:
     - class: accordion-button-toggle
       desc: Chevron indicator on the toggle
     - class: accordion-button-toggle-plus
-      desc: Plus and minus indicator instead of a chevron
+      desc: Plus indicator that turns into a close icon when open
   modifier:
     - class: accordion-flush
       desc: Removes the outer border and rounding, to sit flush in a parent
@@ -75,7 +75,7 @@ This preview shows the base structure with one expanded section.
 
 ### Plus toggle icon
 
-Use `.accordion-button-toggle-plus` to hide the first SVG path when expanded. This pattern is useful for plus-to-minus toggles.
+Use `.accordion-button-toggle-plus` with a `plus` icon. When the section opens, the toggle rotates a quarter turn and the plus becomes a close icon. It rotates the whole toggle, so it works with an inline SVG, a sprite `<use>` or an icon font.
 
 <Example>
 <div class="accordion" id="accordion-plus">