Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[design system] always set dimensions for Icon #45

Open
macfarlandian opened this issue Jul 15, 2021 · 0 comments
Open

[design system] always set dimensions for Icon #45

macfarlandian opened this issue Jul 15, 2021 · 0 comments

Comments

@macfarlandian
Copy link
Contributor

What needs to be done? Why does it need to be done?
The SVG icons will not be displayed properly in all supported browsers without an explicit size set. There are a few options for accomplishing this that can be evaluated:

  1. set a default value
    • if this can't be the same for all icons, it may be more trouble than it's worth
  2. require either size or height & width props
    • most explicit option but also a breaking change

In addition: height and width are currently applied as attributes rather than CSS properties. We should either transition those to CSS or ensure that the attribute values are not set in rem units (which is not supported as an SVG attribute) by detecting rems and converting them back to pixels. (polished has some utility functions that can help with this)

Additional context
See https://github.com/Recidiviz/recidiviz-data/pull/8259 as well as numerous React console warnings in Case Triage about unexpected rem units

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant