Prop to set line-width

[sboerrigter]

It would be great if there was a prop to set the line width. So something like this:

<Hamburger lineWidth={3} />

Keep up the epic work!! 💪😄

[luukdv]

I think you can get pretty far with a combination of the width and distance props, could you elaborate on the design you want to achieve? Just so I can think along about ways to accomplish it, and if a new prop would be suitable. 😁

[sboerrigter]

I am trying to make this:

The width is 24px and the line-height is 3px. I've tried playing around with the distance prop, but they all result in a line-height of 2px.

Thanks for looking into this!

[luukdv]

Yup, the distance prop only controls the distance between the lines.

I've thought about this for a bit, but I'm not sure about adding lineWidth. For example, what would happen if you set both size and lineWidth? They would conflict and the API wouldn't be as dead-simple to reason about as it is now.

My goal is to have a simple burger that's suitable for 90% of the use cases, by setting a size and forgetting about it. When the ability to control every pixel is desirable, something custom-made is probably more suitable.

With something like barWidth ideally you'd want to add barHeight as well, and make sure size takes precedence over one/both of them (or the other way around). It's confusing and the logic would add even more bytes to the component.

Maybe this could be something for the next breaking version (3.0).

[sboerrigter]

Ok, I understand. Thanks for considering this.

[ms007]

I have a case where the customer also wants the line-height to be different (thicker) and so I also lack the ability to customize the line-height.

[z0lo13]

@ms007 @luukdv

.hamburger-react div div {
      height: 4px !important;
    }

Would be a great Prop To Have To control both height and width