Skip to content

Icon components: standardize props and styling #614

@mkernohanbc

Description

@mkernohanbc

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)

Metadata

Metadata

Assignees

Labels

ComponentsChanges or issues affect the design-system-react-components package

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions