unable to use svg as icon for the BitNav component

[StrStark]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

hi, happy to reporting this problem/lack of capability

i am trying to create this using the BitNav component :

and i just could not add Svg as icon to it since its using the icongrophy of the bitplatform components class bases

i have came up with this as my current usage of Bitnav :

and this is the code for the BitNav component (in case it helps :) )

Expected Behavior

im hoping if :

1. it would be best if it was possible to set a position for the toggle button if the item has children
2. it was possible to use svg icons

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

8.0

Anything else?

No response

[msynk]

@STRstark Thanks for contacting us.

Unfortunately, bit BlazorUI components do not support custom icons. the only built-in icons that we support are from our own Icons package. but to achieve what you explained in the issue, there are a few ways developed in the BitNav component:

• you can use the ItemTemplate parameter together ItemTemplateRenderMode parameter to customize all of the nav items.
• you can use the Template property of the BitNavItem together with its TemplateRenderMode property to customize each item individually.

check this example out to see how you can use these customizations in action:

https://blazorui.bitplatform.dev/components/nav#example4

Note: to share source code, it's NOT a good idea to use images. GitHub has great support for code sharing in an issue.

[StrStark]

@msynk Thanks for Responding,🙏

im sorry for using pictures for sharing some of my projects source code, i try using GitHub code sharing capability

well, i use the recommended ItemTemplate to add custom svg icons using if statements for every item in the navbar :

<BitNav 
    Items="navItems"
    DefaultSelectedItem="navItems[0]"
    OnItemClick="(BitNavItem item) => HandleNavItemClick(item)"
    Styles="@(new(){
                Item = "font-weight : 700;",
                ItemContainer = "width : 90%; margin-top : 10px; margin-bottom :10px; margin-left : 10px; margin-right : 10px; padding-top:10px; padding-bottom : 10px; border-radius : 15px;",
                SelectedItemContainer = "width : 90%; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.25); background : linear-gradient(90deg, #D3347B 0%, #FCCE6C 100%); border-radius : 15px; border-right : 0px;border-left : 0px; ",
                SelectedItem = "color : var(--bit-clr-bg-pri);",
                Root= "padding-top:0px;",
                ItemIcon = "transform : scale(1.3); margin : 5px;", 
                ToggleButton = "color : transpaernt; direction:ltr;"
            })" 
    ReversedChevron = "true"
>
    <ItemTemplate Context="item">
        @if (item.Text == Localizer[nameof(AppStrings.MainMenu)].Value) // Mina menu icon
        {   
            if (Selected == item)
            {
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="" fill="var(--bit-clr-bg-pri)" />
                </svg>

            }
            else
            {
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="" fill="var(--bit-clr-pri)" />
                </svg>

            }

        }
        else if (item.Text == Localizer[nameof(AppStrings.PageDashBoard)].Value) // Dashboard icon
        {
            if (Selected == item)
            {
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="" fill="var(--bit-clr-bg-pri)" />
                </svg>
            }
            else
            {
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="" fill="var(--bit-clr-pri)" />
                </svg>
            }
        }
        @* ... *@

        <span>@item.Text</span>

    </ItemTemplate>
</BitNav>

• and because i had different colors for the selected items icon i tried storing the selected BitNavItem when selected and set the fill property inside the path of my svg (that is why i am using another if statements inside of every other if statements)

private BitNavItem? Selected;
private async Task HandleNavItemClick(BitNavItem item)
{
   if (string.IsNullOrEmpty(item.Url)) return;
   Selected = item;

   await CloseMenu();
}

and the product of the code in the app looks something like this :

• By the way if the approach for the monopoly of the Platform-specific icons is the compulsion of the developers to use All-Native Bitplatform blazorUi Components and icons (which i think its a fantastic component base for BlazorProjects) i recommend considering some changes to the icons:
  • adding some component variants like Outlined, Filled, etc
  • expanding the diversity of the icons and adding categories so every BlazorUi user would have a fantastic experience while using this great product :)

Thanks for helping me out i am currently building my app using BitPlatforms template : BoilerPlate which is an Art i could say 😁

[msynk]

@STRstark thanks for your feedback. we already have plans to support external icons (through custom CSS classes or image URLs) but unfortunately, it is not our priority for now, since adding these features requires a lot of effort from our side which we don't have time for atm.

[msynk]

I'm closing this issue since it is not our priority at the moment.