Documentation

Everything you need to get started with MeloSpot Icons in your project.

Quick Start

Installation

Install MeloSpot Icons using your preferred package manager:

npm install @melospot/icons

yarn add @melospot/icons

pnpm add @melospot/icons

Basic Usage

Import and use icons as React components:

import { ArrowRight, Plus, List } from '@melospot/icons'

export function MyComponent() {
  return (
    <div>
      <ArrowRight size={24} />
      <Plus size={24} />
      <List size={24} />
    </div>
  )
}

Icon Props

All icons accept the following props:

Prop	Type	Default	Description
size	number \| string	24	Icon size in pixels
color	string	currentColor	Icon color
className	string	-	Additional CSS classes
strokeWidth	number	2	Stroke width

Customization

Customize icons with props or CSS:

// Using props
<ArrowRight size={32} color="#ff6b6b" strokeWidth={3} />

// Using CSS classes
<ArrowRight className="w-8 h-8 text-blue-500" />

// Using inline styles
<ArrowRight style={{ width: 32, height: 32, color: 'red' }} />

Tree Shaking

MeloSpot Icons supports tree shaking out of the box. Only the icons you import will be included in your bundle.

💡 Tip: Always use named imports to ensure optimal bundle size.

TypeScript Support

MeloSpot Icons is written in TypeScript and includes type definitions out of the box.

import { ArrowRight } from '@melospot/icons'
import type { IconProps } from '@melospot/icons'

const MyIcon: React.FC<IconProps> = (props) => {
  return <ArrowRight {...props} />
}