Search⌘ K

Fragments with HTML Snippets as Parameters

Learn to pass HTML snippets as parameters in fragments.

We'll cover the following...

In our application, each menu item has an SVG icon. As a reminder, here is how a menu item in our application currently looks like:

HTML
<a href="#"
class="group flex items-center px-2 py-2 text-sm leading-5 font-medium
text-gray-900 rounded-md bg-gray-100 hover:text-gray-900 hover:bg-gray-100
focus:outline-none focus:bg-gray-200 transition ease-in-out duration-150">
<svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:textgray-
600 transition ease-in-out duration-150"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0
01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
</svg>
Dashboard
</a>

Parameterized fragment

If we want to create a parameterized fragment out of this, we need a way to pass the <svg> element ...