[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