Radix Icons

repository·main·Indexed 25 days ago

A collection of high-quality, 15×15 pixel icons designed by WorkOS for modern web interfaces. The repository includes a set of React SVG components and the `generate-icon-lib` CLI tool, which automates pulling icon designs from Figma files to generate React components and an icon manifest using a Figma Personal Access Token.

Tokens: 20.3K
Snippets: 4
Records: 345
Agent score: 82%

What's inside radix-ui-icons

Overview of Radix Icons
main
Radix Icons is a set of crisp 15×15 icons designed by the WorkOS team. They are intended for use in user interfaces requiring high-quality, small-scale iconography.
https://github.com/radix-ui/icons/blob/main/README.md
Authenticate with Figma using a Personal Access Token
main
To access Figma files, you must provide a Personal Access Token.
1. Create a Personal Access Token in your Figma Account Settings.
2. Set the token using the FIGMA_ACCESS_TOKEN environment variable.
You can create an .env file in your target directory to store the token for reuse.
```
echo "FIGMA_ACCESS_TOKEN=<token>" >> packages/radix-icons/.env
```
https://github.com/radix-ui/icons/blob/main/packages/generate-icon-lib/README.md
Import Radix Icons
main
Radix Icons are exported as individual React components from the @radix-ui/react-icons package. You can import any icon by its specific name (e.g., ArrowRightIcon, CheckIcon, GearIcon) to use within your React application.
https://github.com/radix-ui/icons/blob/main/packages/radix-icons/src/index.tsx
Configure the FIGMA_ACCESS_TOKEN environment variable
main
The FIGMA_ACCESS_TOKEN environment variable is used to provide authentication for Figma API interactions, likely required during icon generation or development processes within the repository.
```
FIGMA_ACCESS_TOKEN="figd_..."
```
https://github.com/radix-ui/icons/blob/main/packages/radix-icons/.env.example
Generate icon library from a Figma file
main
Use the generate-icon-lib CLI to generate an icon library from a specific Figma document. You must provide the figma-file-key, which can be extracted from a Figma URL (e.g., https://www.figma.com/file/<figma-file-key>).
```
generate-icon-lib --file=<figma-file-key>
```
https://github.com/radix-ui/icons/blob/main/packages/generate-icon-lib/README.md
Fetch resources with retry support
main
The fetch function is a wrapper around the global fetch API that includes automatic retry logic. It is useful for making resilient network requests when generating icons.
Retry Configuration: By default, it uses a defaultRetry configuration:
- delay: 1000ms
- retries: 2
You can override these settings by passing a retry object within the fetchOptions.
Error Handling: If all retries fail and the device is offline, it rejects with a CodedError using the NETWORK_OFFLINE code.
https://github.com/radix-ui/icons/blob/main/packages/generate-icon-lib/src/utils.ts
Handle errors with handleError
main
The handleError function is used to process errors, unmount the current view, and log formatted error messages to the console. If the error is an instance of CodedError, it displays the specific error code and message. If exit is set to true (default), the process will terminate with exit code 1.
https://github.com/radix-ui/icons/blob/main/packages/generate-icon-lib/src/utils.ts
Extract leaf node strings from an object with pushObjLeafNodesToArr
main
The pushObjLeafNodesToArr function traverses an object and collects all string values found at leaf nodes into a provided array. This is useful for flattening nested configuration or data structures.
Parameters:
- obj: The source object to traverse.
- arr: The array where the discovered string values will be pushed.
- accessor (optional): An array of keys used to navigate to a specific sub-object before starting the traversal.
https://github.com/radix-ui/icons/blob/main/packages/generate-icon-lib/src/utils.ts
Reference the generate-icon-lib CLI flags
main
The following flags are available for the generate-icon-lib CLI:
Flag Short Type Description
--file -f string The Figma File Key from which to source icons.
--help N/A N/A Show this message.
```
Options
	  --file, -f    File Key from Figma
	  --help        Show this message
```
https://github.com/radix-ui/icons/blob/main/packages/generate-icon-lib/src/cli.ts
Reference: Radix Icons List
main
The following icons are available for import from the package entry point:
https://github.com/radix-ui/icons/blob/main/packages/radix-icons/src/index.tsx
Use the generate-icon-lib CLI to sync icons from Figma
main
The generate-icon-lib CLI automates the process of pulling icon designs from a Figma file, downloading them as SVGs, and generating React components and an icon manifest.
To run the CLI, you must provide the Figma file key using the --file or -f flag. The CLI expects a page named Icons to exist in the Figma document, containing frames that group icon sets.
https://github.com/radix-ui/icons/blob/main/packages/generate-icon-lib/src/cli.ts
Use the PersonIcon component
main
The PersonIcon component renders a person silhouette icon. It is a React component that accepts standard SVG props and an optional color prop. By default, the icon uses currentColor for its fill color.
https://github.com/radix-ui/icons/blob/main/packages/radix-icons/src/PersonIcon.tsx

Flag	Short	Type	Description
`--file`	`-f`	`string`	The Figma File Key from which to source icons.
`--help`	N/A	N/A	Show this message.