[Directory] Add copy-to-clipboard when clicking an icon
Author: NaveenGali11Created Apr 8, 2026Updated Apr 8, 2026
Labelsfeature request
Is your feature request related to a problem?
When browsing the icon directory at https://oblador.github.io/react-native-vector-icons/, there is no way to quickly copy an icon's name. Users have to manually read the label, remember it, and type it into their code — which is friction-heavy during active development.
Describe the solution you'd like
When a user clicks on an icon card in the directory, the icon's name string should be copied to the clipboard automatically.
Proposed UX:
- Click any icon card → icon name is copied via navigator.clipboard.writeText(name)
- Hover state shows a subtle "Click to copy" label
- After clicking, card briefly shows "Copied!" feedback for ~1.8s, then resets
- Accessible: icon card becomes a button, includes aria-live region and title tooltip
Describe alternatives you've considered
- A small copy icon button next to the name label (more cluttered UI)
- Right-click context menu (non-obvious, not mobile-friendly)
- Clicking the full card is the cleanest and most discoverable pattern
Additional context
This is a small, self-contained improvement to the developer experience of the icon directory. Changes are isolated to:
- apps/directory/src/App.tsx — convert renderIcon fn → IconCard component with state
- apps/directory/src/App.css — hover/copied styles
No new dependencies required. Uses the native Web Clipboard API. Happy to submit a PR for this if the approach looks good to maintainers.
Source: oblador/react-native-vector-icons