Moment Icons

A customizable React icon library with support for size, color, and style variants.

Installation

npm install moment-icons
# or
yarn add moment-icons

Usage

Basic Usage

import { HomeIcon, SettingsIcon, UserIcon, HeartIcon } from 'moment-icons';

function App() {
  return (
    <div>
      <HomeIcon />
      <SettingsIcon size={32} />
      <UserIcon color="#FF5733" />
      <HeartIcon style="bold" />
    </div>
  );
}

Customization Options

All icons accept the following props:

• size (number | string): Icon size in pixels. Default: 24
• color (string): Icon stroke color. Default: currentColor
• style ('light' | 'normal' | 'bold'): Icon stroke width variant. Default: 'normal'
  • light: stroke-width = 1
  • normal: stroke-width = 2
  • bold: stroke-width = 3

Examples

import { HomeIcon, SettingsIcon, UserIcon, HeartIcon } from 'moment-icons';

function Examples() {
  return (
    <>
      {/* Different sizes */}
      <HomeIcon size={16} />
      <HomeIcon size={24} />
      <HomeIcon size={48} />
      
      {/* Different colors */}
      <SettingsIcon color="red" />
      <SettingsIcon color="#00FF00" />
      <SettingsIcon color="rgb(0, 0, 255)" />
      
      {/* Different styles */}
      <UserIcon style="light" />
      <UserIcon style="normal" />
      <UserIcon style="bold" />
      
      {/* Combined customization */}
      <HeartIcon size={32} color="#FF1493" style="bold" />
    </>
  );
}

Available Icons

• CalendarIcon
• HeartIcon
• HomeIcon
• PlusIcon
• SettingsIcon
• UserIcon

Development Guide

Adding New Icons

The library uses a automated workflow to convert SVG files into React components. Here's how to add new icons:

1. Add SVG Files

Place your SVG files in the src/assets/icons/ directory:

src/assets/icons/
├── calendar.svg
├── heart.svg
├── home.svg
├── plus.svg
├── settings.svg
└── user.svg

SVG Requirements:

• Use currentColor for stroke/fill to enable color customization
• Remove fixed width/height attributes (use viewBox instead)
• Use stroke-based icons for better scaling

2. Generate Icon Components

Run the update script to automatically:

• Convert SVGs to React components
• Create wrapper components with size/color props
• Update exports

npm run update-icons

This script will:

1. Generate React components in src/components/icons/
2. Create wrapper components in src/icons/
3. Update src/index.ts with all exports
4. Build the library

3. Manual Icon Creation (Alternative)

If you prefer to create icons manually:

// src/icons/StarIcon.tsx
import React from 'react';
import { IconProps } from '../types';
import StarSVG from '../components/icons/Star';

export const StarIcon: React.FC<IconProps> = (props) => {
  const { size = 24, color = 'currentColor', className = '' } = props;
  
  return (
    <StarSVG 
      className={className}
      width={size}
      height={size}
      style={{ color }}
    />
  );
};

Then export it from src/index.ts:

export { StarIcon } from './icons/StarIcon';

Publishing to npm

Prerequisites

1. npm Account: Create an account at https://www.npmjs.com/signup
2. Authentication: Login to npm from terminal:

   npm login

Quick Publish (Automated)

Use the automated publish script that handles everything:

npm run publish:library

The script will:

• Check npm authentication
• Update all icons from SVG files
• Run tests (if available)
• Prompt for version bump (patch/minor/major)
• Build the library
• Publish to npm
• Provide git tag commands

Manual Publishing Process

If you prefer manual control:

1. Update Icons (if you added new SVGs):

   npm run update-icons

2. Update Version:

   npm version patch  # for bug fixes (1.0.0 → 1.0.1)
   npm version minor  # for new features (1.0.0 → 1.1.0)
   npm version major  # for breaking changes (1.0.0 → 2.0.0)

3. Build the Library:

   npm run build

4. Publish to npm:

   npm publish

5. Create Git Tag (optional but recommended):

   git tag v1.0.3
   git push origin v1.0.3

Version Guidelines

• Patch (1.0.x): Bug fixes, documentation updates
• Minor (1.x.0): New icons, new features (backwards compatible)
• Major (x.0.0): Breaking changes (API changes, removed icons)

Post-Publishing

After publishing, your package will be available at:

• npm: https://www.npmjs.com/package/moment-icons
• Install: npm install moment-icons

Development

Complete Workflow Example

Here's a complete example of adding a new icon and publishing:

# 1. Add your SVG file
cp ~/Downloads/star.svg src/assets/icons/star.svg

# 2. Update the library with new icon
npm run update-icons

# 3. Test locally (optional)
npm run build

# 4. Publish new version
npm run publish:library
# Select "minor" for new icon addition
# Confirm publishing

# 5. Your new icon is now available!
# Users can: npm install moment-icons@latest
# And use: import { StarIcon } from 'moment-icons';

Project Structure

moment-icons/
├── src/
│   ├── assets/
│   │   └── icons/          # Original SVG files
│   │       ├── heart.svg
│   │       ├── home.svg
│   │       └── ...
│   ├── components/
│   │   ├── Icon.tsx        # Base icon wrapper (legacy)
│   │   └── icons/          # Generated React components
│   │       ├── Heart.tsx
│   │       ├── Home.tsx
│   │       └── ...
│   ├── icons/              # Icon wrapper components
│   │   ├── HeartIcon.tsx
│   │   ├── HomeIcon.tsx
│   │   └── ...
│   ├── types/
│   │   └── index.ts        # TypeScript types
│   └── index.ts            # Main exports
├── scripts/
│   ├── update-icons.sh     # Icon generation script
│   └── publish.sh          # Publishing automation
├── dist/                   # Built files (generated)
├── package.json
├── tsconfig.json
└── README.md

Available Scripts

• npm run build - Build the library for distribution
• npm run build:svg - Convert SVGs to React components
• npm run build:ts - Compile TypeScript
• npm run clean - Clean build artifacts
• npm run update-icons - Full icon update workflow
• npm run publish:library - Automated publishing workflow

License

MIT