switch-icon.mdx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. ---
  2. title: Switch icon
  3. description: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
  4. banner: icons
  5. ---
  6. ## Default markup
  7. To replace the icons, all should add `active` class to the `switch-icon` component.
  8. ```html code example centered
  9. <button class="switch-icon" data-bs-toggle="switch-icon">
  10. <span class="switch-icon-a text-muted">
  11. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  12. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  13. <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
  14. </svg>
  15. </span>
  16. <span class="switch-icon-b text-red">
  17. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  18. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  19. <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
  20. </svg>
  21. </span>
  22. </button>
  23. ```
  24. ## Switch animations
  25. You can also add a fancy animation to add variety to your button. See demo below:
  26. ```html example code centered separated
  27. <button class="switch-icon" data-bs-toggle="switch-icon">
  28. <span class="switch-icon-a text-muted">
  29. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  30. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  31. <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
  32. </svg>
  33. </span>
  34. <span class="switch-icon-b text-primary">
  35. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  36. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  37. <path d="M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z" stroke-width="0" fill="currentColor"></path>
  38. </svg>
  39. </span>
  40. </button>
  41. <button class="switch-icon switch-icon-fade" data-bs-toggle="switch-icon">
  42. <span class="switch-icon-a text-muted">
  43. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  44. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  45. <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
  46. </svg>
  47. </span>
  48. <span class="switch-icon-b text-red">
  49. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  50. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  51. <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
  52. </svg>
  53. </span>
  54. </button>
  55. <button class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon">
  56. <span class="switch-icon-a text-muted">
  57. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  58. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  59. <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
  60. </svg>
  61. </span>
  62. <span class="switch-icon-b text-yellow">
  63. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  64. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  65. <path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" stroke-width="0" fill="currentColor"></path>
  66. </svg>
  67. </span>
  68. </button>
  69. <button class="switch-icon switch-icon-flip" data-bs-toggle="switch-icon">
  70. <span class="switch-icon-a text-muted">
  71. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  72. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  73. <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path>
  74. </svg>
  75. </span>
  76. <span class="switch-icon-b text-facebook">
  77. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  78. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  79. <path d="M13 3a3 3 0 0 1 2.995 2.824l.005 .176v4h2a3 3 0 0 1 2.98 2.65l.015 .174l.005 .176l-.02 .196l-1.006 5.032c-.381 1.626 -1.502 2.796 -2.81 2.78l-.164 -.008h-8a1 1 0 0 1 -.993 -.883l-.007 -.117l.001 -9.536a1 1 0 0 1 .5 -.865a2.998 2.998 0 0 0 1.492 -2.397l.007 -.202v-1a3 3 0 0 1 3 -3z" stroke-width="0" fill="currentColor"></path>
  80. <path d="M5 10a1 1 0 0 1 .993 .883l.007 .117v9a1 1 0 0 1 -.883 .993l-.117 .007h-1a2 2 0 0 1 -1.995 -1.85l-.005 -.15v-7a2 2 0 0 1 1.85 -1.995l.15 -.005h1z" stroke-width="0" fill="currentColor"></path>
  81. </svg>
  82. </span>
  83. </button>
  84. <button class="switch-icon switch-icon-slide-up" data-bs-toggle="switch-icon">
  85. <span class="switch-icon-a text-muted">
  86. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  87. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  88. <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
  89. </svg>
  90. </span>
  91. <span class="switch-icon-b text-twitter">
  92. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  93. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  94. <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
  95. </svg>
  96. </span>
  97. </button>
  98. <button class="switch-icon switch-icon-slide-left" data-bs-toggle="switch-icon">
  99. <span class="switch-icon-a text-muted">
  100. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  101. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  102. <path d="M5 12l5 5l10 -10" />
  103. </svg>
  104. </span>
  105. <span class="switch-icon-b text-red">
  106. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  107. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  108. <line x1="18" y1="6" x2="6" y2="18" />
  109. <line x1="6" y1="6" x2="18" y2="18" />
  110. </svg>
  111. </span>
  112. </button>
  113. <button class="switch-icon switch-icon-slide-down" data-bs-toggle="switch-icon">
  114. <span class="switch-icon-a text-muted">
  115. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  116. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  117. <line x1="12" y1="5" x2="12" y2="19" />
  118. <line x1="18" y1="13" x2="12" y2="19" />
  119. <line x1="6" y1="13" x2="12" y2="19" />
  120. </svg>
  121. </span>
  122. <span class="switch-icon-b text-muted">
  123. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  124. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  125. <line x1="12" y1="5" x2="12" y2="19" />
  126. <line x1="18" y1="11" x2="12" y2="5" />
  127. <line x1="6" y1="11" x2="12" y2="5" />
  128. </svg>
  129. </span>
  130. </button>
  131. <button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
  132. <span class="switch-icon-a text-muted">
  133. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  134. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  135. <circle cx="7" cy="17" r="2" />
  136. <circle cx="17" cy="17" r="2" />
  137. <path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" />
  138. </svg>
  139. </span>
  140. <span class="switch-icon-b text-muted">
  141. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  142. <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  143. <circle cx="18" cy="17" r="2" />
  144. <circle cx="6" cy="17" r="2" />
  145. <path d="M8 17h5a6 6 0 0 1 5 -5v-5a2 2 0 0 0 -2 -2h-1" />
  146. </svg>
  147. </span>
  148. </button>
  149. ```