unable to use svg as icon for the BitNav component

STRstark commented 2 weeks ago

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 :

it would be best if it was possible to set a position for the toggle button if the item has children

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 commented 2 weeks ago

@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 commented 1 week ago

@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 : 

> ![image](https://github.com/user-attachments/assets/42bca095-f80b-45f3-8a41-2d9d666bbf9e)

- 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 `Blazor`Projects) 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 commented 1 week ago

@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.

bitfoundation / bitplatform