search

radix-ui / icons

A crisp set of 15×15 icons designed by the @workos team.
https://radix-ui.com/icons
MIT License
2.15k stars 107 forks source link

Request: Compatibility as cursors #116

Closed penx closed 2 years ago

penx commented 2 years ago

I'd love to be able to use some of these icons as a cursor.

e.g.

import pencil from @radix-ui/icons/pencil-1.svg?raw';

const CustomCursor = styled('div', {
  cursor: `url("data:image/svg+xml,${pencil}") 0 15, pointer`
});

However this would require:

  1. creating a package @radix-ui/icons with the raw SVG icons or including the raw SVG assets with the existing react-icons package (they are not bundled at present)/
  2. dual tone icons, e.g. for the pencil having a black outline and a white fill - this is so that the icon would remain visible when moving between white and black background areas.
vladmoroz commented 2 years ago

Hi @penx, adapting the icons for cursors is a bit out of scope for this package since it might be a bit too niche and has a bunch of extra design constraints. Feel free to modify the icons for your project and use them as you see fit though.