Icons

IconSync allows you to easily fetch icons from Figma and use them in your application as React components.

Configuration

Create an icon.config.ts file in your project root:

import { iconConfig } from "@iconsync/core";
 
export default iconConfig({
  figma: {
    token: process.env.FIGMA_TOKEN!, // Your Figma API token
    url: "https://www.figma.com/design/YOUR_FILE_ID/YOUR_FILE_NAME?node-id=YOUR_NODE_ID",
  },
  fetch: {
    concurrentDownloads: 5, // Number of concurrent downloads
  },
  generator: {
    icon: true, // Generate icon components
    typescript: true, // Generate TypeScript files
    titleProp: true, // Add title prop to components
    dimensions: false, // Include width/height dimensions
    expandProps: "end", // Position of expanded props
    replaceAttrValues: {
      "#000000": "currentColor", // Replace specific colors
      "#fff": "currentColor",
    },
    outDir: "src/components/icons", // Output directory
    ext: "tsx", // File extension
    prettier: true, // Format with Prettier
    filenameCase: "camel", // Filename case style
  },
});

Fetching Icons

After setting up your configuration file, you can fetch icons from Figma:

# Using the CLI directly
npx @iconsync/core fetch
 
# Or using a package.json script
npm run icon:fetch

Generating Components

After fetching icons, you can generate React components:

# Using the CLI directly
npx @iconsync/core generator
 
# Or using a package.json script
npm run icon:generate

Using Generated Icons

Once your icon components are generated, you can import and use them in your React application:

import { ArrowRight } from "./components/icons";
 
export default function IconExample() {
  return (
    <ArrowRight
      width={24}
      height={24}
      color="currentColor"
      title="Arrow Right Icon"
    />
  );
}

The exact props available will depend on your generator configuration.

Usage Icon Components