Support multi-color icons 🌈
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 39
- Forks
- 14
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 13
Description
😯 Problem to Solve
The design team has started providing icons with colored accents but our current icon strategy relies on setting the SVG fill to a single color. We'll need a way to specify multiple colors for an icon.
We also need to figure out whether the accent colors might need to change in response to themes or icon states like error and warning. Original thread.
💁 Proposed Solution
I think @rajsite had ideas about how to leverage SVG features to make this happen, but I don't recall what they were.
Some expected colors:
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/nimble-components/src/icon-base/styles.ts, where the current single-color SVG fill strategy is defined, and review the linked design discussion and original thread. Determine how SVG icons can expose multiple colors and whether accent colors must respond to themes or error and warning states. Done means the icon strategy supports the expected multi-color accents and the required theme or state behavior is defined.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100