Open lyzadanger opened 1 year ago
@lyzadanger here is the SVG for the revised cancel icon:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
<path fill="currentColor" d="M1.503 16h-.006a1.5 1.5 0 0 1-1.058-2.56L5.88 8 .439 2.56A1.5 1.5 0 0 1 2.561.44L8 5.878l5.44-5.44a1.497 1.497 0 0 1 2.121 0 1.5 1.5 0 0 1 0 2.122L10.12 8l5.44 5.44c.292.292.438.675.439 1.058v.004c0 .383-.147.766-.44 1.059a1.495 1.495 0 0 1-1.055.439h-.01a1.495 1.495 0 0 1-1.056-.44L8 10.122l-5.44 5.44A1.495 1.495 0 0 1 1.504 16Z" />
</svg>
One small note: I made the visual weight of the icon a little heavier because we are scaling =up, keeping it be a 2px stroke looked weird.
The current
CancelIcon
's SVG doesn't fill its viewbox. Its viewbox is 16px square but the "X" shape in the SVG only fills 12 or 13px of that.This causes problems of proportionality and spacing when using it near text and/or in buttons.
Many affordances to layout have been made over time to account for the existing icon, including custom padding and sizing, e.g., in various buttons. So we can't take the current
CancelIcon
away immediately, but should instead consider introducing an alternate icon that does fill its viewport and converting over to it as time allows.