@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

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:

/** @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:

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

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:

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.):

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:

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):

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:

<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:

   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)