Use a common interface for Icons

[damianog]

Insead of using an enumerable type for icons why not use a more expandable approach

A common inteface to allow different CSS combination

    public interface ICssAttribute
    {
        string ToString();
    }

A specific interface for Icons

    public interface ICssIconName : ICssAttribute
    {
    }

The implementation of the IconName class

    public sealed class IconName : ICssIconName
    {
        private readonly string _name;
        internal IconName(string name)
        {
            _name = name;
        }

        public static IconName From(string name)
        {
            return new IconName(name);
        }

        public static readonly IconName _123 = new("123");
        public static readonly IconName AlarmFill = new("alarm-fill");
        public static readonly IconName Alarm = new("alarm");
        public static readonly IconName AlignBottom = new("align-bottom");


        .
        .
        .        

        public static readonly IconName FuelPumpDieselFill = new("fuel-pump-diesel-fill");
        public static readonly IconName FuelPumpDiesel = new("fuel-pump-diesel");
        public static readonly IconName FuelPumpFill = new("fuel-pump-fill");
        public static readonly IconName FuelPump = new("fuel-pump");

        public override string ToString()
        {
            return $"bi-{_name}";
        }
    }

and in the Icon component

[Parameter, EditorRequired] public ICssIconName Name { get; set; } = null!;

[stsrki]

Seems like a neat idea. It could be extended further to look more like our utilities(Margin, Padding, etc.) to combine it with the styles, sizes, and more. The only downside I see is that in your approach, you have static members and fixed CSS icon names. That would have to be managed dynamically at runtime to support all our providers.

[damianog]

This is what I do with spacing

    public interface ICssSpacing : ICssAttribute
    {
        public static ICssSpacing operator +(ICssSpacing left, ICssSpacing right)
        {
            return new Internal.CssSpacingCompose(left, right);
        }
    }

    internal sealed class CssSpacingCompose : ICssSpacing
    {
        private readonly ICssSpacing[] _args;

        public CssSpacingCompose(params ICssSpacing[] args)
        {
            _args = args;
        }

        public override string ToString()
        {
            if (_args is null) return string.Empty;
            return string.Join<ICssSpacing>(' ', _args);
        }
    }

    public sealed class Spacing
    {
        public static SpacingProperty Margin => new("m");
        public static SpacingProperty Padding => new("p");
    }

    public sealed class SpacingProperty
    {
        private readonly string _property;

        internal SpacingProperty(string value)
        {
            _property = value;
        }

        public SpacingSide Top => new(this, "t");
        public SpacingSide Bottom => new(this, "b");
        public SpacingSide Start => new(this, "s");
        public SpacingSide End => new(this, "e");
        public SpacingSide X => new(this, "x");
        public SpacingSide Y => new(this, "y");
        public SpacingSide All => new(this, "");

        public override string ToString()
        {
            return _property;
        }
    }

    public sealed class SpacingSide
    {
        private readonly SpacingProperty _property;
        private readonly string _side;

        internal SpacingSide(SpacingProperty property, string value)
        {
            _property = property;
            _side = value;
        }

        public SpacingProperty Property => _property;

        public SpacingSize Is0 => new(this, "0");
        public SpacingSize Is1 => new(this, "1");
        public SpacingSize Is2 => new(this, "2");
        public SpacingSize Is3 => new(this, "3");
        public SpacingSize Is4 => new(this, "4");
        public SpacingSize Is5 => new(this, "5");
        public SpacingSize Auto => new(this, "auto");

        public SpacingBreakpoint Sm => new(this, "sm");
        public SpacingBreakpoint Md => new(this, "md");
        public SpacingBreakpoint Lg => new(this, "lg");
        public SpacingBreakpoint Xl => new(this, "xl");
        public SpacingBreakpoint Xxl => new(this, "xxl");

        public override string ToString()
        {
            return _side;
        }
    }

    public sealed class SpacingSize : Interface.ICssSpacing
    {
        private readonly SpacingProperty _property;
        private readonly SpacingSide _side;
        private readonly SpacingBreakpoint? _breakpoint;
        private readonly string _size;

        internal SpacingSize(SpacingSide side, string size)
        {
            _property = side.Property;
            _side = side;
            _size = size;
        }

        public static ICssSpacing operator +(SpacingSize left, SpacingSize right)
        {
            return new Internal.CssSpacingCompose(left, right);
        }

        internal SpacingSize(SpacingBreakpoint breakpoint, string size)
        {
            _property = breakpoint.Property;
            _side = breakpoint.Side;
            _breakpoint = breakpoint;
            _size = size;
        }

        public override string ToString()
        {
            return _breakpoint is null
                ? $"{_property}{_side}-{_size}"
                : $"{_property}{_side}-{_breakpoint}-{_size}";
        }
    }

    public sealed class SpacingBreakpoint
    {
        private readonly SpacingProperty _property;
        private readonly SpacingSide _side;
        private readonly string _breakpoint;

        internal SpacingBreakpoint(SpacingSide side, string breakpoint)
        {
            _property = side.Property;
            _side = side;
            _breakpoint = breakpoint;
        }

        public SpacingProperty Property => _property;
        public SpacingSide Side => _side;

        public SpacingSize Is0 => new(this, "0");
        public SpacingSize Is1 => new(this, "1");
        public SpacingSize Is2 => new(this, "2");
        public SpacingSize Is3 => new(this, "3");
        public SpacingSize Is4 => new(this, "4");
        public SpacingSize Is5 => new(this, "5");
        public SpacingSize Auto => new(this, "auto");

        public override string ToString()
        {
            return _breakpoint;
        }
    }

The property on the component base will be

[Parameter] public ICssSpacing? Spacing { get; set; }

So you could combine margin and padding with the overloaded operator:

<Container Spacing="Spacing.Margin.All.Auto + Spacing.Padding.Top.Is4">
</Container>

[stsrki]

That's what we also have https://github.com/Megabit/Blazorise/blob/master/Source/Blazorise/Fluent/FluentSpacing.cs

[damianog]

I saw, very complex with all those interfaces, that's why I looked for an easier approach.