@velocity-exchange/icons

React icon components generated from Figma. 200+ icons, each rendered as an SVG wrapped in a styled <span>.

Installation

npm install @velocity-exchange/icons
# or
bun add @velocity-exchange/icons

Usage

import { Account, ArrowLeft, ChevronDown } from '@velocity-exchange/icons';

// Default — 16px, inherits currentColor
<Account />

// Custom size and color
<ArrowLeft size={24} color="#6683A7" />

// Scale with font-size (useful inside text)
<ChevronDown autoSize />

// Pass props directly to the SVG element
<Account svgProps={{ strokeWidth: 2 }} />

Props

All icon components accept IconProps:

| Prop | Type | Default | Description | |------|------|---------|-------------| | color | string | currentColor | Fill color | | size | number | 16 | Width and height in px | | autoSize | boolean | false | Set width/height to 1em (scales with font-size) | | svgProps | React.SVGProps<SVGSVGElement> | — | Props forwarded to the <svg> element | | ...rest | React.HTMLProps<HTMLSpanElement> | — | Any other prop is forwarded to the wrapping <span> |

color and size are omitted from the spread to the span so they don't conflict with HTML attributes.

Generating icons from Figma

Requires Figma admin access on the source file.

1. Configure environment

Copy .env.example to .env and fill in your credentials:

cp .env.example .env

FIGMA_API_TOKEN="<your personal access token>"
FIGMA_FILE_ID=7ontXyBmE6iK8xhRMLfkCV
FIGMA_CANVAS='24x24 Product icon'

Get a personal access token from Figma → Settings → Security → Personal access tokens.

2. Install dependencies

bun install

3. Compile the generator script

bun run build-icons-script

4. Pull icons from Figma and generate components

bun run icons

This fetches all SVGs from the configured Figma canvas, converts them to TypeScript React components via SVGR, and writes them to src/icons/components/. It also regenerates src/icons/index.ts.

5. Build the package

bun run build

Output goes to dist/.

Adding icons manually

Drop .svg files into src/icons/svgs/. They will be picked up by bun run icons alongside the Figma icons and converted into components. The generator logs any existing components that don't match a Figma SVG so stale ones are easy to spot.

Scripts

| Script | Description | |--------|-------------| | bun run build-icons-script | Compile generate.ts → generate.js | | bun run icons | Fetch from Figma and generate React components | | bun run icons:debug | Same as above with Node inspector attached | | bun run build | Compile TypeScript → dist/ | | bun run clean | Remove dist/ | | bun run clean-icons | Remove generated components in src/icons/components/ |