[SOLVED] How to keep a SVG icon on the same line, inside an unordered list, using Tailwind CSS?

How to keep a SVG icon on the same line, inside an unordered list, using Tailwind CSS?

The svg icon is not staying in the

text, even though I have "flex" in the icon's class.

Here's the sample code:

<ul class="my-12 bg-amber-100 p-6">
  <li class="list-disc text-wrap text-xl">
    Before before before before before before before before (<svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="flex size-6"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
      /></svg
    >) After after after after after after after after after
  </li>
</ul>

And here's a screenshot of what appears onscreen:

Solution

Instead of "flex" in the SVG's class, use "inline-flex"

Corrected sample code:

  <ul class="bg-amber-100 p-6 my-12">
  <li class="list-decimal text-wrap text-xl">
    Before before before before before before before before (<svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="size-6 inline-flex"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
      /></svg>) After after after after after after after after after 
  </li>
  </ul>

Screenshot after code was corrected: