API Referencev1.0

API Reference

Complete reference for iconest-react props, types, and interfaces. Everything you need to build with our icon components.

Component Props

All icon components accept the following props in addition to standard SVG attributes.

Prop	Type	Default	Description
`size`	`number \| string`	`24`	The size of the icon. Can be a number (pixels) or string with units.
`strokeWidth`	`number \| string`	`2`	The stroke width of the icon lines. Typically between 1-3.
`color`	`string`	`currentColor`	The color of the icon. Accepts any valid CSS color value.
`className`	`string`	`undefined`	CSS class names to apply to the SVG element.
`style`	`React.CSSProperties`	`undefined`	Inline styles to apply to the SVG element.
`fill`	`string`	`none`	Fill color for the icon. Use "currentColor" to match text color.
`stroke`	`string`	`currentColor`	Stroke color for the icon outlines.
`onClick`	`(event: React.MouseEvent) => void`	`undefined`	Click event handler for the icon.
`onMouseEnter`	`(event: React.MouseEvent) => void`	`undefined`	Mouse enter event handler.
`onMouseLeave`	`(event: React.MouseEvent) => void`	`undefined`	Mouse leave event handler.

TypeScript Definitions

Complete TypeScript definitions for type-safe development.

Type Definitions

// Base icon component props
interface IconProps extends React.SVGAttributes<SVGElement> {
  size?: number | string;
  strokeWidth?: number | string;
  color?: string;
}

// Individual icon component type
type IconComponent = React.FC<IconProps>;

// Example usage with specific icon
import { Heart } from 'iconest-react';

const heartProps: React.ComponentProps<typeof Heart> = {
  size: 32,
  strokeWidth: 2,
  className: "text-red-500",
  onClick: (e) => console.log('Heart clicked', e)
};

Advanced Examples

Real-world patterns and advanced usage examples.

Custom Hook for Icon State

Managing icon state with React hooks

import { useState } from 'react'
import { Heart } from 'iconest-react'

function useToggleIcon(initialState = false) {
  const [isActive, setIsActive] = useState(initialState)
  
  const toggle = () => setIsActive(prev => !prev)
  
  return { isActive, toggle }
}

function LikeButton() {
  const { isActive, toggle } = useToggleIcon()
  
  return (
    <Heart
      size={24}
      strokeWidth={isActive ? 0 : 2}
      fill={isActive ? "red" : "none"}
      stroke={isActive ? "red" : "currentColor"}
      onClick={toggle}
      className={isActive ? "text-red-500" : "text-gray-500"}
    />
  )
}

Animated Icon Component

Creating smooth animations with CSS transitions

import { Settings } from 'iconest-react'

function AnimatedSettings() {
  return (
    <Settings
      size={32}
      className="
        transition-all duration-300 ease-in-out
        hover:rotate-90 hover:text-blue-500
        cursor-pointer
      "
      strokeWidth={1.5}
    />
  )
}

// With Framer Motion
import { motion } from 'framer-motion'
import { Star } from 'iconest-react'

function MotionStar() {
  return (
    <motion.div
      whileHover={{ scale: 1.2, rotate: 180 }}
      whileTap={{ scale: 0.9 }}
    >
      <Star size={24} className="text-yellow-500" />
    </motion.div>
  )
}

Icon with Tooltip

Combining icons with accessibility features

import { Info } from 'iconest-react'
import { Tooltip } from '@/components/ui/tooltip'

function IconWithTooltip() {
  return (
    <Tooltip content="This provides additional information">
      <Info
        size={20}
        className="text-blue-500 cursor-help"
        aria-label="Information"
        role="img"
      />
    </Tooltip>
  )
}

// With custom aria attributes
function AccessibleIcon() {
  return (
    <User
      size={24}
      aria-label="User profile"
      role="button"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          // Handle action
        }
      }}
    />
  )
}

Best Practices

Guidelines for optimal performance and accessibility.

✓ Do

Import only what you need

import { Heart, Star } from 'iconest-react'

Use semantic sizing

size={24} // Good: Clear and predictable

Add accessibility attributes

aria-label="Close dialog" role="button"

✗ Don't

Import the entire library

import * as Icons from 'iconest-react' // Bad

Use arbitrary sizes

size={"23.5px"} // Bad: Hard to maintain

Ignore accessibility

<Icon onClick={handleClick} /> // Bad: No keyboard support