radix-ui / icons Goto Github PK

A cookie icon would be awesome! 🍪

Either a floppy disc or some other kind of icon which stands for explicitly saving a state would be nice.

Hi, great set of icons, however npm install @modulz/radix-icons and import { SunIcon } from '@modulz/radix-icons'; (using just 1 icon) adds 75KB to the production build (using create react app). This makes them kind of unusable as an npm install.

Consider making each icon its own file in the build process so can do something like import { SunIcon } from '@modulz/radix-icons/sun-icon';

The app instantly crashed on "+" input - tested on firefox and chrome

Just as there are Pin and PinFilled icons, there should be a bookmark filled icon variant to represent a "bookmarked" state.

Hi, I love the icons. To change them faster in the application I created this component, which could be default export of the application maybe. It simply returns the appropriate component after searching in all exports.

import * as Icons from "@modulz/radix-icons"

export const Icon = React.forwardRef(({ children, name, ...props }, ref) => {
  if (name) {
    const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)
    const modified = name
      .split(" ")
      .map(e => capitalize(e))
      .join("")
    const id = `${modified}Icon`
    const available = Object.keys(Icons)
    if (available.includes(id)) {
      const Icon_ = Icons[id]
      return (
        <Icon_ {...props} ref={ref}>
          {children}
        </Icon_>
      )
    }
  }
  return <></>
})

export default Icon

Usage:

<Icon name="layers" />
<Icon name="zoom in" />

http://codesandbox.io/

An angle icon, can for example be used to visualize the rotation of an element. Like in Figma:

Would love a simple version of thePolywork logo.

I don't believe it's used or needed so we should remove it.

Not an issue, but do you plan on iconjar package? Or possibly grouping icons inside folders for easier organization? Thanks.

Hi! It's possible to use react-figma for creating universal react components that can be used on Figma (rendering icons to document through plugin) and on the web. I can make PR if are you interested.

example from feather icons:

Consumers cannot attach refs to any of the icons atm. This is causing errors when trying to use the icons via the as prop in some of the Radix Primitives.

Click the button below to see the error:

https://codesandbox.io/s/hopeful-rain-gkrg7?file=/src/App.tsx

Hi team.

thank you guys create this project.

I want to know if you have plans to open source the website code?

It’d be great to have a star icon, maybe something similar to GitHub’s star icon. Thanks.

http://vercel.com/

Hi,

Could you please export the twitter and the camera icon as fills?

Some exporting tools like Iconmoon does not support strokes at the moment

appreciate for previous work #46 it's help me a lot ,but now now some new probelm appear. icon pack can't find a suitable icon to express flex 'align-items'.could implement it in spare time

A pilcrow icon is often used for paragraph formatting.

Inspiration

Material design:

Alternative shape:

https://www.linkedin.com

Hi, I really like this icon set, the design ascetics are on point! It'd be great to have a line chart icon to use with the bar chart and table icons.

Also more data related icons in general would be useful as well. For example icons for: data (to represent raw data not in any form), processing data, scatter plot, bubble chart, pie chart, and area chart. Thanks!

https://www.npmjs.com/package/@radix-ui/react-icons

Which of these is the correct package?

npm install @modulz/radix-icons
or
npm install @radix-ui/react-icons

beautiful web sites and categoryed icons. pls extend flex layout icon will better for current front dev sence(most fontend developer are used it).

there missing space-between,space-around in alignment.

https://developer.mozilla.org/de/docs/Web/CSS/justify-content
https://developer.mozilla.org/de/docs/Web/CSS/align-items

The sun and moon icons work great as light and dark mode icons, but there is also auto dark mode which uses the system dark mode preference.

It'd be great to have a version of the sun and moon icons that indicates the site is in auto dark mode so it's easy to represent the 3 states (always light mode, always dark mode, auto dark mode). My suggestion would be to add a capital letter "A" to the lower right corner of the existing sun and moon icons to indicate auto mode. Thanks!

https://www.notion.so/

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.

Hi, it'd be great have a timeline icon. Thanks!

There is a margin icon, but not a padding one. It would be nice to also have the padding variant.

If you type ? in the search input field if breaks the site and a message saying An unexpected error has occurred. shows up.

Hello everyone,

I'm using Radix icons on a project of mine, and I was surprised to see that there's no ❤️ icon yet?

I'm going to open a PR in order to fix that.

Thanks :)

It'd be great to have a data graph icon. There is a Table icon which I can use for data in table format, and it'd be great to have a corresponding data in graph format icon (maybe something with lines or bars). Thanks!

Hey ✌️

I noticed that none of the icons have a <title> element inside the <svg>, which acts as alternative text for screen readers. It would be great to add something like this for the generated icons:

<svg aria-labelledby="arrowLeftIcon">
  <title id="arrowLeftIcon">Arrow left icon</title>
   // actual svg implementation
</svg>

I think there would have to be some changes made to the generate-icon-lib package, which I'm happy to do with some direction!

A direction icon, can for example be used for an input showing the direction of a gradient (left -> right, bottom-left -> top-right). Maybe a compass-inspired icon?

A sparkly wand like the auto-adjust icon for filtering images on mobile apps like Instagram.

Curious to know how you arrived at these base dimensions, rather than the more popular 16x16. I assume it has something to do with "crispness", forcing most lines to fall on physical pixels?

Hi, thanks for creating these icons I've found them very useful!

However, a lot of them have implied padding making them difficult to work with. By implied padding I mean that the icon does not go to the edge of the svg. As a user my expectation is that the long dimension of the icon goes to the edge of the svg. For example, using a standard 15x15 svg, the size of the GitHub icon is 13.3x12.97, and the size of the Zoom in/out icons are 11x11.

As a user it is easy for me to add padding/margin outside the svg if I need it. And it is also easy to shrink the svg, for example if the Zoom icons were 15x15, but I needed an 11x11 I could just set width="11" height="11". But what is not easy is removing the implied padding if I need the icon to go to the edge of the svg, the only way I found to do this is to use transform: scale(...).

For example, here's the GitHub icon next the Sun icon (which doesn't have implied padding):

Here's the pair with focus styles applied:

Fixed - here's the pair with transform: scale(1.1333333) applied to the GitHub icon:

Fixed - with focus styles applied: