Let users pass through 'slots' for custom icons

[aFuzzyBear]

Hey paji, I really like what you have done with this set of components,

But I was thinking it might be a bit better for the DX if we could pass in as a slot another Icon that they would like to use or even leverage astro-icon in the background to then let users just pass in via prop the name of the icon they want to consume.

This is a great component, I really do like how you have composed this.

astro-navbar/src/components/MenuIcon.astro

Lines 9 to 28 in dd75d2d

	<svg
	fill="currentColor"
	class:list={[className]}
	width="24"
	height="24"
	viewBox="0 0 20 20"
	xmlns="https://www.w3.org/2000/svg">
	<title>Menu</title>
	<path
	class="astronav-toggle hidden"
	fill-rule="evenodd"
	clip-rule="evenodd"
	d="M18.278 16.864a1 1 0 01-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 01-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 011.414-1.414l4.829 4.828 4.828-4.828a1 1 0 111.414 1.414l-4.828 4.829 4.828 4.828z"
	></path>
	<path
	class="astronav-toggle"
	fill-rule="evenodd"
	d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"
	></path>
	</svg>

[surjithctly]

Great idea. I should also add a logic here to support close icon as well. As you can see its bit clever here 😀

Maybe something like this. Default can be empty to use the current one.

<MenuIcons>
   <OpenIcon><svg/></OpenIcon>
   <CloseIcon><svg/></CloseIcon>
</MenuIcons>

[aFuzzyBear]

Aye that would be alot better for the DX

[surjithctly]

Done :)