# @clipto/icons

Icon package containing SVG icons exported from Figma. Icons are organized by variant type and can be imported directly as SVG files.

## Structure

Icons are organized into the following directories:

- `outline/` - Outline/line style icons (processed with currentColor)
- `mono/` - Mono style icons (processed with currentColor)
- `solid/` - Solid/filled style icons (processed with currentColor)
- `clipto/` - Custom Clipto icons (processed with currentColor)
- `social/colored/` - Colored brand icons (original colors preserved)
- `social/black/` - Black brand icons (original colors preserved)
- `social/white/` - White brand icons (original colors preserved)

The `raw/` directory contains the original SVGs extracted from layered files without any color processing. This serves as a backup and reference for the original icon designs.

## Installation

```bash
npm install @clipto/icons
# or
pnpm add @clipto/icons
# or
yarn add @clipto/icons
```

## Usage

Icons can be imported directly as SVG files. The package uses standard `package.json` exports, so no special webpack configuration is needed beyond standard SVG processing.

### Next.js Setup

If you're using Next.js, configure SVG processing in `next.config.js`:

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    // Standard SVG processing (required for any SVG library)
    config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.(js|jsx|ts|tsx)$/,
      use: ['@svgr/webpack'],
    });

    // Enable package.json exports field support (standard webpack config)
    config.resolve.conditionNames = ['import', 'require', 'default'];
    config.resolve.exportsFields = ['exports', 'main', 'module'];

    return config;
  },
};

export default nextConfig;
```

Install the required dependency:

```bash
npm install --save-dev @svgr/webpack
```

### Other Frameworks

For other frameworks (Vite, Create React App, etc.), configure SVG processing according to your framework's documentation. The package uses standard `package.json` exports, so it should work with any modern bundler that supports the `exports` field.

### Importing Icons

```typescript
import IconSun from '@clipto/icons/outline/sun.svg';
import IconSunMono from '@clipto/icons/mono/sun.svg';
import IconClipto from '@clipto/icons/clipto/clipto-0.svg';
import IconAdobe from '@clipto/icons/social/colored/adobe-illustrator.svg';
```

### React Components (No SVGR Required)

Generate pre-compiled React components from the SVG source files in both ES module and CommonJS formats:

```bash
cd packages/icons
pnpm run build:react
```

This command outputs React components under `es/` (ES modules) and `cjs/` (CommonJS) directories while keeping the generated files out of version control. Components follow the original folder structure, so you can import them without any bundler SVG configuration:

**ES Module Format (with JSX):**
The ES module format uses JSX syntax and requires JSX transformation (handled automatically by modern bundlers like webpack, Vite, etc.):

```tsx
import OutlineSun from '@clipto/icons/es/outline/sun';
import SocialColoredAdobeIllustrator from '@clipto/icons/es/social/colored/adobe-illustrator';

export function Example() {
  return (
    <>
      <OutlineSun className="text-primary" />
      <SocialColoredAdobeIllustrator width={32} height={32} />
    </>
  );
}
```

**CommonJS Format (no JSX, no Babel required):**
The CommonJS format uses `React.createElement` calls instead of JSX, so it works without any JSX/Babel transformation. Perfect for environments where you can't configure JSX transformation:

```js
const React = require('react');
const OutlineSun = require('@clipto/icons/cjs/outline/sun');
const SocialColoredAdobeIllustrator = require('@clipto/icons/cjs/social/colored/adobe-illustrator');

function Example() {
  return React.createElement(React.Fragment, null,
    React.createElement(OutlineSun, { className: "text-primary" }),
    React.createElement(SocialColoredAdobeIllustrator, { width: 32, height: 32 })
  );
}
```

Or with JSX (if your environment supports it):
```jsx
const OutlineSun = require('@clipto/icons/cjs/outline/sun');
const SocialColoredAdobeIllustrator = require('@clipto/icons/cjs/social/colored/adobe-illustrator');

function Example() {
  return (
    <>
      <OutlineSun className="text-primary" />
      <SocialColoredAdobeIllustrator width={32} height={32} />
    </>
  );
}
```

### Styling with Tailwind CSS

Icons exported as outline, mono, and solid variants use `currentColor` for stroke and fill, allowing you to style them with Tailwind CSS:

```tsx
<IconSun className="text-primary" />
<IconSunMono className="text-gray-500" />
```

## Exporting Icons from Layered SVGs

Icons are exported from manually exported layered SVG files in the `layers/` directory.

### Workflow

1. **Export from Figma**: Manually export icon layers from Figma to `packages/icons/layers/` directory. Most files contain outline/mono/solid variants, with two exceptions:
   - `Clipto.svg` - Custom Clipto icons (saved to `clipto/` directory)
   - `icon_social.svg` - Brand icons with colored/black/white variants

2. **Split layers**: Run the split script to process the layered SVGs:
   ```bash
   cd packages/icons
   pnpm run split-layers
   ```

The script:
- Parses each SVG file in the `layers/` directory
- Identifies individual icons and their variants
- Extracts each icon into a standalone SVG file
- Saves raw (unprocessed) SVGs to `raw/{variant}/` directories
- Social icons are saved to `raw/social/{variant}/` directories (colored/black/white)
- Processes SVGs to replace colors with `currentColor` (for outline/mono/solid/clipto variants)
- Saves processed SVGs to `{variant}/` directories in the package root

**Note**: Brand icons (colored/black/white) preserve their original colors and are not processed with `currentColor`. They are organized under the `social/` folder.

### Legacy Figma API Export (Deprecated)

The `export-icons` script is available but deprecated due to rate limiting. Use the `split-layers` workflow instead.

## Icon Patterns

The export script handles three icon patterns:

1. **Standard pattern**: Frames with 3 style variants (`Style=Line`, `Style=Mono`, `Style=Filled`)
2. **Standalone symbols**: Individual icons without frame grouping
3. **Brand icons**: Icons with color variants in the symbol name (`color=colored/black/white`)