[docs-infra] `@mui/icons-material` in-editor preview
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Summary 💡
Having a preview of the icons in the editor is similar to having autocomplete available for the API. Our icons explorer is definitely helpful and better if you need inspiration. But if you know what kind of icon you want then in-editor preview should boost productivity.
Examples 🌈
- link to icons explorer in SvgIcon.d.ts jsdoc
- This shows a preview (vscode) when hovering over an imported icon
import SvgIcon from '@material-ui/core/SvgIcon';
/**
* Preview: 
*/
declare const LockIcon: typeof SvgIcon;
export default LockIcon;
credit to @leMaik for the markdown idea.
- Show icon preview in autocomplete (probably requires IDE extension)
Motivation 🔦
Seemed like a useful thing to have to me.
Each of the examples can be explored further and implemented by whomever is looking for some work to do.
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
The issue points to the @mui/icons-material declarations, including SvgIcon.d.ts, and the icons explorer; start by comparing those entry points with the three proposed approaches. Done requires selecting and implementing a defined preview approach, with its scope and validation agreed, since the issue currently leaves all three options open.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- developer-experience, documentation
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100