We need to do some audit and cleanup on our various icon components to ensure that:
- They have a consistent set of props (eg. for setting
id)
- They are styled as efficiently as possible
- They are accessible (eg. via applying
aria-hidden where appropriate)
For reference:
We probably don't want to be following this pattern from the Header and Footer logo SVGs of assigning a default id to SVGs unless we are very sure that there should only be one instance of them that will occur on a single page. id is meant to be globally unique on an entire HTML page, so we should generally opt for styling SVGs using class where we have the option. Keeping the id prop as an option is nice for icons we anticipate folks importing from the library and using (like from an SVG icon/logo collection we expose proactively), though we could just use spread ...props for this purpose instead, IMO.
Originally posted by @ty2k in #611 (comment)
We need to do some audit and cleanup on our various icon components to ensure that:
id)aria-hiddenwhere appropriate)For reference:
Originally posted by @ty2k in #611 (comment)