Per T260617: Evaluate and decide on customizable icon sizes for Codex we need to support various pre-defined sizes in the Icon component. Right now there are 3 possible sizes of icon: "x-small" (12px), "small" (16px) and "medium" (20px). Icon size applies to both width and height, and there are corresponding min-height and min-width tokens as well. Finally, the sizes should also be applied in the SVG markup itself (viewbox dimensions, etc).
Use Cases
- Chips component needs a small icon (currently this is achieved via CSS overrides, but it would be better to just pass props to Icon)
- Link component (which is currently handled as a LESS mixin) should use a smaller icon size when an external link icon is included with the text
- Others?
Design
Acceptance criteria (or Done)
- Add size properties to the Icon component: medium, small and x-small (20px, 16px and 12px canvas respectively). medium is the default and will be used if no other size prop is provided.
- Add 'warning' message for x-small being only for exceptional usage, as they'd feature usability and accessibility issues when used without care.
- Ensure that CSS-only Icon component can also handle these pre-defined sizes via modifier classes and/or LESS mixin parameters (@AnneT I'll defer to you here)