@icapps/react-iconic-icons

The React implementation of the iconic icons. This package is generated from the iconic Figma file and contains all icons as React components for both web and React Native.

Installation

npm install @icapps/react-iconic-icons

Or with yarn:

yarn add @icapps/react-iconic-icons

Usage

Web (React)

import { IconName } from "@icapps/react-iconic-icons/web";

function MyComponent() {
  return <IconName />;
}

Native (React Native)

import { IconName } from "@icapps/react-iconic-icons/native";

function MyComponent() {
  return <IconName />;
}

Adding New Icons

When new icons are added to the Figma file, follow these steps:

1. Ensure you have the FIGMA_TOKEN environment variable set (see Requirements below)
2. Run the export command:

npm run figma:export

This command will:

• Export icons from Figma as SVG files
• Convert SVGs to React components for both web and native
• Generate TypeScript types

3. Build the package:

npm run build

Requirements

FIGMA_TOKEN

To export icons from Figma, you need a Figma access token:

1. Get the token from 1Password vault "icapps internal"
2. Set it as an environment variable:

export FIGMA_TOKEN=your-token-here

Source

Icons are sourced from the Figma design file: Iconic Icons - Figma

Development

Scripts

• npm run build - Build the package (TypeScript compilation + copy assets)
• npm run figma:export - Export icons from Figma and generate components
• npm run convert:svg:native - Convert SVG files to React Native components
• npm run convert:svg:web - Convert SVG files to React web components
• npm run generate:icons - Generate TypeScript types for icon names

License

UNLICENSED