Details
-
Type:
Story
-
Status: Closed (View Workflow)
-
Priority:
P3
-
Resolution: Done
-
Affects Version/s: None
-
Fix Version/s: None
-
Labels:
-
Template:customfield_11100 20888
-
Sprint:stripes-force Sprint 50
Description
Problem
We shouldn't need inline variants of icons: https://github.com/folio-org/stripes-components/pull/564 and https://github.com/folio-org/stripes-components/pull/565
Approach
Treat all icons as if they're character glyphs meant to sit inline with text.
- Render icons by default at 1em by 1em, so they just fit their context.
- Change the small/medium/large props to use em that corresponds to the font size ratios defined in variables.css.
- Use a consistent viewBox that's a multiple of the base font size. 0 0 16 16 is a good option. So is 0 0 512 512. 0 0 14 14 and 0 0 24 24 aren't multiples of 16.
- Most existing icons will need cropping/resizing to use the new viewBox. Font Awesome has good examples of appropriate proportions for most of the icons we're dealing with.
- Add padding to IconButton and other uses of Icon, since the SVGs themselves will now have far less padding.
This work should all be doable without breaking changes.
Out of Scope
Future needed work re: icons:
- The .stripes__icon class shouldn't need to be a global. Remove it and find a different solution.
- Use fill: currentColor instead of injecting classes and styles into the SVGs themselves. Should make for easier maintenance.
- Consistently kebab-case icon names.
- Redraw the icons with their new proportions for consistent line weights.