Uploaded image for project: 'stripes-components'
  1. stripes-components
  2. STCOM-386

Resize icon library

    XMLWordPrintable

    Details

    • Template:
    • 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.

        TestRail: Results

          Attachments

            Activity

              People

              Assignee:
              cherewaty Jeffrey Cherewaty
              Reporter:
              cherewaty Jeffrey Cherewaty
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  TestRail: Runs

                    TestRail: Cases