[RFC] Add prebundled icons

[shayanhabibi]

A common pattern in usage of icons in FluentUI is to bundle two icons which may present under different circumstances (such as the filled icon being rendered when the item is hovered).

By a large majority, this simply results in users bundling the filled and regular versions of the same icon.

Fui.bundleIcon ( bundleIcon.boardFilled, bundleIcon.boardRegular )

My idea is to add a separate type which helps reduce boiler plate object definition.

Implementation:

module FS.FluentUI.BundledIcon

open Fable.Core
open Fable.Core.JsInterop
open FS.FluentUI

type [<Erase>] bundleHelper =
    static member inline expandImport (value : string) =
        (import $"{value}Filled" FluentIcons |> unbox<BundleIcon>),
        (import $"{value}Regular" FluentIcons |> unbox<BundleIcon>)

type [<Erase>] bundledIcon = // Note this is bundle`D`Icon rather than bundleIcon
    static member inline accessTime = bundleHelper.expandImport "AccessTime"

Usage:

Fui.bundleIcon ( bundledIcon.accessTime )

Alternatively:

Implementation:

type [<Erase>] bundleHelper =
    static member inline expandImport (value : string) =
        Fui.bundleIcon (
            (import $"{value}Filled" FluentIcons |> unbox<BundleIcon>),
            (import $"{value}Regular" FluentIcons |> unbox<BundleIcon>)
        )

type [<Erase>] bundledIcon =
    static member inline accessTime = bundleHelper.expandImport "AccessTime"

Usage:

Fui.bundledIcon.accessTime

I am happy to implement this and make a pull request pending on thoughts

[shayanhabibi]

I've implemented this in the above pattern with a python script and some manual changes to fix things like class by replacing it with class'

BundledIcon.md

Edit: I'm just patching this into my repo by changing the module to module FS.FluentUI.BundledIcon.Fui so that I can use this pattern: Fui.bundledIcon.accessTime

[sydsutton]

Thanks for all of the work on this and the other stuff, by the way! I love making this library easier to use, and discussions/issues like these helps a lot.

[sydsutton]

I love this. I didn't think it was possible to dynamically call these icons for some reason. I think I'll do it a little differently by returning a { Filled: BundleIcon; Regular: BundleIcon } type so that the user can access both the Filled and Regular icons which is needed/necessary for Rating and RatingDisplay components that have properties like .iconFilled and .iconOutline.

type [<Erase>] bundleHelper =
    static member inline expandImport (value : string) =
        let filled = import $"{value}Filled" FluentIcons |> unbox<BundleIcon>
        let regular = import $"{value}Regular" FluentIcons |> unbox<BundleIcon>

        { Filled = filled; Regular = regular }

Then when bundling like normal, all you'd have to do is:

let AlertIcon = Fui.bundleIcon bundleIcons.alert

AlertIcon []

and instead of rating.iconOutline bundleIcon.circleRegular it's rating.iconOutline bundleIcons.cirle.Regular

I feel like this creates the least amount of breaking changes and still allows the user to use the ratings properties like before. Plus, I'm cutting out like 2,500 lines of code which is awesome.

[sydsutton]

Added this to v1.18.0 that I just pushed!

[sydsutton]

Damnit, I was under the impression that less code means a smaller package size. This actually increased the package size by roughly 10%. That's what I get for making assumptions.

[shayanhabibi]

Is this in package deployment or the package distribution?

[sydsutton]

Not sure honestly, still kind of a noob. I'm just going off of Nuget.

[shayanhabibi]

Woof, I'm using the update which is great, but should maybe consider sticking this into a major release or something. The new bundleIcons is a breaking change (considering the old syntax won't work anymore).

[sydsutton]

Done, I just pushed 2.0.0. I unlisted 1.18.0 also. Thanks for the suggestion!

[sydsutton]

@shayanhabibi Hey, I just want your honest opinion on something. When making these bundleIcons changes, I realized that there were roughly 50 icons that didn't have a Filled or Regular counterpart. If you tried to bundle these icons with the new code, it would throw a runtime error because it's trying to import an icon that doesn't exist.

Do you think that adding this import function would help to the point of anyone actually using it? I know the chances of someone trying to use one of those icons with Fui.bundleIcon is pretty low, but I just want to give people as many options as possible. Thanks!

 
type [<Erase>] bundleIcons =

    static member inline import (iconName: string) =
        import $"{iconName}" FluentIcons |> unbox<BundleIcon>

Fui.bundleIcon { Filled = bundleIcons.import "LayoutColumnThreeFocusLeftFilled"; Regular = bundleIcons.accessTime.Regular }

[shayanhabibi]

Yes I'm a massive fan of this kind of flexibility. It also protects you from having to push updates for something like new icons being released; in those situations, users can just use import without having to worry about the implementation details until a release is pushed.
Of course they should come with their own warnings, but I think it's a great idea