tigen/README.md

Convert SVG to typed component.

# tigen

A CLI for converting SVG to typed component.
![Image](https://github.com/user-attachments/assets/85fad3ae-a5dd-4e84-a495-f6d11d0f55c3)
![Image](https://github.com/user-attachments/assets/a37daf25-a8bb-474a-95f1-ca05e4f211f0)

## Features

- ⚡ Fetches SVG icons directly from a Figma page
- 🧠 Automatically generates icon path data and type definitions
- 🚫 No need to install globally – supports `npx`, `yarn dlx`
- ⚙️ Outputs fully typed, ready-to-use icon metadata

## Usage

You don't need to install `tigen` to use it:

```bash
npx tigen
# or
yarn dlx tigen
pnpx tigen
```

## Requirements

You must set the following environment variables:

| Variable          | Description                   |
| ----------------- | ----------------------------- |
| `FIGMA_API_TOKEN` | Your personal Figma API token |
| `FIGMA_FILE_ID`   | The Figma file ID             |
| `FIGMA_PAGE_NAME` | The name of the page (canvas) |

- Set them directly in you shell using `export`
- Or You can place these in a `.env` file:

```.env
FIGMA_API_TOKEN=your_figma_token
FIGMA_FILE_ID=your_file_id
FIGMA_PAGE_NAME=page_name_in_file
```

## Output

Running `tigen` will generate the following files in your project root:

### `svgPaths.ts`

Contains the icon metadata extracted from the SVGs:

```ts
export const svgPaths = {
  ico_24_male: {
    width: "24",
    height: "24",
    paths: ["M19.75 4.25V9.75H18.25...", "..."],
  },
  ico_24_female: {
    width: "24",
    height: "24",
    paths: ["M11.25 20.75V18.75H9.25...", "..."],
  },
  // ...
};
```

### `icons.ts`

Contains typed icon name constants and types:

```ts
export const ICON_NAME = {
  ico_24_male: "ico_24_male",
  ico_24_female: "ico_24_female",
  // ...
} as const;

export type IconName = (typeof ICON_NAME)[keyof typeof ICON_NAME];
```

## Example Usage

Here's how you might use the generated output to build a typed `<Icon />` component:

```tsx
// Icon.tsx
import { SVGProps } from "react";
import { svgPaths } from "./svgPaths";
import { IconName } from "./icons";

interface Props extends SVGProps<SVGSVGElement> {
  icon: IconName;
}

export function Icon({ icon, className, ...props }: Props) {
  const { width, height, paths } = svgPaths[icon];

  return (
    <svg
      className={className}
      width={width}
      height={height}
      fillRule="evenodd"
      clipRule="evenodd"
      {...props}
    >
      {paths.map((d, index) => (
        <path key={index} d={d} />
      ))}
    </svg>
  );
}
```

## 🔧 Comming Soon

Here are some upcoming features planned for future releases of **tigen**:

- **Local SVG import support**

  Allow generating `svgPaths.ts` and `icons.ts` from a local folder of SVG files, without relying on Figma.

- **Custom output paths**

  Support for specifying custom output locations for generated files via CLI flags.

- **Custom icon name prefix**

  Support for specifying custom prefix for icon name.

- **Icon component generator**

  Auto-generate a reusable `<Icon />` React component template.