@runmorph/iconify

A powerful CLI tool for converting SVG files into fully-typed React components with advanced color manipulation, preset system, and global styling capabilities.

Features

• 🛠️ CLI tool for batch SVG to React component conversion
• 🎨 Advanced color manipulation with tones (tinted, lightened, darkened, etc.)
• 🎭 Multiple color modes: duotone, tritone, blend, and more
• 🎯 Global preset system for consistent icon styling
• 💪 Full TypeScript support with type-safe presets
• 🔄 Automatic color scale generation
• 📦 Tree-shakeable exports
• 🎪 Support for complex SVG features (masks, clip paths, groups)
• 🌈 HSL/RGB color space transformations
• 🎛️ Extensive customization options

Table of Contents

• Installation
• CLI Usage
• Component Usage
• Color Manipulation
• Preset System
• API Reference
• Development

Installation

# Using yarn (recommended)
yarn add @runmorph/iconify

# Using npm
npm install @runmorph/iconify

# Using pnpm
pnpm add @runmorph/iconify

CLI Usage

Convert your SVG files into React components:

# Basic usage
iconify generate --source ./svgs --target ./src/components/icons

CLI Options

| Option | Description | Default | | -------- | ------------------------------- | -------------------------------- | | --source | Source directory with SVG files | "./src/components/icons/.source" | | --target | Output directory | "./src/components/icons" |

Component Usage

Basic Usage

import { HubSpotIcon } from "@/components/icons";

function App() {
  return <HubSpotIcon size={32} />;
}

Color Manipulation

The package provides several color manipulation modes (tones):

import { HubSpotIcon } from "@/components/icons";

function App() {
  return (
    <div>
      {/* Basic color customization */}
      <HubSpotIcon color="#FF0000" />

      {/* Using tones */}
      <HubSpotIcon tone="tinted" color="#FF0000" />
      <HubSpotIcon tone="lightened" color="#FF0000" />
      <HubSpotIcon tone="darkened" color="#FF0000" />
      <HubSpotIcon tone="balanced" color="#FF0000" />

      {/* Multi-color modes */}
      <HubSpotIcon tone="duotone" colors={["#FF0000", "#00FF00"]} />

      <HubSpotIcon tone="tritone" colors={["#FF0000", "#00FF00", "#0000FF"]} />

      <HubSpotIcon tone="blend" color="#FF0000" />
    </div>
  );
}

Global Presets

Create reusable icon styles with the preset system:

import { IconPresets } from "@runmorph/iconify";

// Define a global preset
IconPresets.add("black-bg", ({ props, children }) => {
  return {
    props: {
      // Modify the SVG color palette
      color: "#FFFFFF",
      tone: "blend",
      // Increase the size
      size: (props.size || 20) * 4,
    },
    // Wrap the SVg in a div with black bg
    children: (
      <div
        style={{
          background: "#000000",
          padding: "5px",
          borderRadius: "4px",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {children}
      </div>
    ),
  };
});

// Use the preset
function App() {
  return <HubSpotIcon preset="black-bg" />;
}

Custom Icon Component

Create your own icon component with the iconify utility:

import { iconify } from "@runmorph/iconify";

const MyCustomIcon = iconify({
  defaultPalette: ["#000000", "#FF0000"],
  renderSvg: ({ palette, size }) => (
    <svg width={size} height={size} viewBox="0 0 24 24">
      <path d="..." fill={palette[0]} />
      <path d="..." fill={palette[1]} />
    </svg>
  ),
});

Color Manipulation Features

Color Scale Generation

The package automatically generates color scales based on your base color:

• 11 scale levels (50-950)
• Intelligent saturation adjustment
• Maintains color harmony
• Supports HSL and RGB color spaces

Available Tones

| Tone | Description | | --------- | ----------------------------------------------------- | | tinted | Creates a tinted variation of the base color | | lightened | Generates lighter shades while maintaining hue | | darkened | Generates darker shades while maintaining hue | | balanced | Creates a balanced palette around the base color | | duotone | Two-color palette with intelligent color distribution | | tritone | Three-color palette with weighted distribution | | blend | Smooth color blending with transparency |

API Reference

Icon Component Props

| Prop | Type | Default | Description | | ------ | ---------------------------------------------------------------------------------------- | ------- | ------------------------------ | | size | number | 24 | Icon size in pixels | | color | string | - | Primary color | | colors | string[] | - | Multiple colors for multi-tone | | tone | "tinted" | "lightened" | "darkened" | "balanced" | "duotone" | "tritone" | "blend" | - | Color tone | | preset | string | - | Global preset name |

Utility Functions

The package exports several utility functions for color manipulation:

import {
  hexToRgb,
  hexToHsl,
  generateColorScale,
  getLuminance,
  adjustBrightness,
} from "@runmorph/iconify";

// Convert colors between formats
const rgb = hexToRgb("#FF0000"); // "rgb(255, 0, 0)"
const hsl = hexToHsl("#FF0000"); // "hsl(0, 100%, 50%)"

// Generate a color scale
const scale = generateColorScale("#FF0000");
// Returns an object with 11 color variations (50-950)

License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by Morph