@runmorph/iconify v0.1.1

@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

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

API Reference

Icon Component Props

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