tessl/npm-chakra-ui--icon

A base React component for icons

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Chakra UI Icon

Name: tessl/npm-chakra-ui--icon
Author: tessl

Chakra UI Icon provides a foundational React component system for creating and rendering icons in React applications. It offers a base Icon component for displaying SVG icons with consistent styling and behavior, along with a createIcon utility function for programmatically generating custom icon components.

Package Information

Package Name: @chakra-ui/icon
Package Type: npm
Language: TypeScript
Installation: npm install @chakra-ui/icon
Peer Dependencies: @chakra-ui/system >= 2.0.0, react >= 18

Core Imports

import { Icon, createIcon, type IconProps } from "@chakra-ui/icon";

For CommonJS:

const { Icon, createIcon } = require("@chakra-ui/icon");

Basic Usage

import { Icon, createIcon } from "@chakra-ui/icon";
import { Md3DRotation } from "react-icons/md";

// Basic icon with fallback
function BasicIcon() {
  return <Icon />;
}

// Using third-party icon
function ExternalIcon() {
  return <Icon as={Md3DRotation} />;
}

// Creating a custom icon component
const ChakraIcon = createIcon({
  displayName: "ChakraIcon",
  viewBox: "0 0 257 257",
  path: [
    <rect
      width="257"
      height="257"
      fill="url(#paint0_linear)"
      rx="128.5"
      key="1"
    />,
    <path
      fill="#fff"
      d="M69.56 133.99l87.59-87c1.64-1.62 4.27.36 3.17 2.38l-32.6 59.76a2 2 0 001.75 2.95h56.34a2 2 0 011.36 3.47l-98.72 92.14c-1.78 1.65-4.41-.68-2.99-2.64l46.74-64.47a2 2 0 00-1.62-3.18H70.97a2 2 0 01-1.41-3.41z"
      key="2"
    />,
  ],
});

// Using custom icon
function CustomIcon() {
  return <ChakraIcon color="teal.500" boxSize="6" />;
}

Architecture

Chakra UI Icon is built around two main components:

Icon Component: Base SVG component for rendering icons with Chakra UI styling integration
createIcon Factory: Utility function for creating reusable custom icon components
Type System: Full TypeScript support with comprehensive prop interfaces
Styling Integration: Seamless integration with Chakra UI's styling system and responsive design patterns

Capabilities

Icon Component

Base React SVG component for rendering icons with consistent styling and accessibility features.

/**
 * The Icon component renders as an svg element to help define your own custom components.
 */
declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

interface IconProps extends Omit<React.SVGAttributes<SVGElement>, keyof ChakraProps>, ChakraProps {
  /** Icon orientation for directional styling */
  orientation?: "vertical" | "horizontal";
}

interface ChakraProps {
  /** Theme-aware style props for custom styling */
  sx?: SystemStyleObject;
  /** Custom CSS styles object - used internally by Chakra UI */
  __css?: SystemStyleObject;
  /** The emotion's css style object */
  css?: Interpolation<{}>;
  /** Used to truncate text at a specific number of lines */
  noOfLines?: ResponsiveValue<number>;
  
  // Layout Properties
  /** Width */
  w?: ResponsiveValue<string | number>;
  /** Height */
  h?: ResponsiveValue<string | number>;
  /** Combined width and height shorthand */
  boxSize?: ResponsiveValue<string | number>;
  /** Display property */
  display?: ResponsiveValue<string>;
  /** Minimum width */
  minW?: ResponsiveValue<string | number>;
  /** Maximum width */
  maxW?: ResponsiveValue<string | number>;
  /** Minimum height */
  minH?: ResponsiveValue<string | number>;
  /** Maximum height */
  maxH?: ResponsiveValue<string | number>;
  
  // Spacing Properties  
  /** Margin */
  m?: ResponsiveValue<string | number>;
  /** Margin top */
  mt?: ResponsiveValue<string | number>;
  /** Margin right */
  mr?: ResponsiveValue<string | number>;
  /** Margin bottom */
  mb?: ResponsiveValue<string | number>;
  /** Margin left */
  ml?: ResponsiveValue<string | number>;
  /** Margin horizontal (left and right) */
  mx?: ResponsiveValue<string | number>;
  /** Margin vertical (top and bottom) */
  my?: ResponsiveValue<string | number>;
  /** Padding */
  p?: ResponsiveValue<string | number>;
  /** Padding top */
  pt?: ResponsiveValue<string | number>;
  /** Padding right */
  pr?: ResponsiveValue<string | number>;
  /** Padding bottom */
  pb?: ResponsiveValue<string | number>;
  /** Padding left */
  pl?: ResponsiveValue<string | number>;
  /** Padding horizontal (left and right) */
  px?: ResponsiveValue<string | number>;
  /** Padding vertical (top and bottom) */
  py?: ResponsiveValue<string | number>;
  
  // Color Properties
  /** Color value (supports Chakra color tokens) */
  color?: ResponsiveValue<string>;
  /** Background color */
  bg?: ResponsiveValue<string>;
  /** Background color (alias for bg) */
  backgroundColor?: ResponsiveValue<string>;
  
  // Border Properties
  /** Border */
  border?: ResponsiveValue<string>;
  /** Border width */
  borderWidth?: ResponsiveValue<string | number>;
  /** Border color */
  borderColor?: ResponsiveValue<string>;
  /** Border radius */
  borderRadius?: ResponsiveValue<string | number>;
  
  // Typography Properties
  /** Font size */
  fontSize?: ResponsiveValue<string | number>;
  /** Font weight */
  fontWeight?: ResponsiveValue<string | number>;
  /** Line height */
  lineHeight?: ResponsiveValue<string | number>;
  /** Text alignment */
  textAlign?: ResponsiveValue<string>;
  
  // Flexbox Properties
  /** Align items */
  alignItems?: ResponsiveValue<string>;
  /** Justify content */
  justifyContent?: ResponsiveValue<string>;
  /** Flex direction */
  flexDirection?: ResponsiveValue<string>;
  /** Flex wrap */
  flexWrap?: ResponsiveValue<string>;
  /** Flex */
  flex?: ResponsiveValue<string | number>;
  
  // Position Properties
  /** Position */
  position?: ResponsiveValue<string>;
  /** Top */
  top?: ResponsiveValue<string | number>;
  /** Right */
  right?: ResponsiveValue<string | number>;
  /** Bottom */
  bottom?: ResponsiveValue<string | number>;
  /** Left */
  left?: ResponsiveValue<string | number>;
  /** Z-index */
  zIndex?: ResponsiveValue<string | number>;
  
  // Pseudo-selectors (partial list - ChakraProps includes all CSS pseudo-selectors)
  /** Hover state styles */
  _hover?: SystemStyleObject;
  /** Focus state styles */
  _focus?: SystemStyleObject;
  /** Active state styles */
  _active?: SystemStyleObject;
  /** Disabled state styles */
  _disabled?: SystemStyleObject;
  
  // React Props
  /** CSS class name */
  className?: string;
  /** Element to render instead of default element */
  as?: React.ElementType;
  /** SVG viewBox attribute */
  viewBox?: string;
  /** Whether the element is focusable */
  focusable?: boolean;
  /** Child elements */
  children?: React.ReactNode;
  
  // Note: ChakraProps extends SystemProps which includes 200+ styling properties
  // This is a representative subset. See Chakra UI docs for complete property list
}

type SystemStyleObject = Record<string, any>;
type ResponsiveValue<T> = T | Array<T | null> | Record<string, T | null>;
type Interpolation<Theme> = any; // Emotion CSS type

Usage Examples:

import { Icon } from "@chakra-ui/icon";
import { Md3DRotation } from "react-icons/md";

// Basic icon with fallback (question mark)
<Icon />

// Icon with custom color and size
<Icon color="blue.500" boxSize="6" />

// Using third-party icon library
<Icon as={Md3DRotation} />

// Icon with custom SVG content
<Icon viewBox="0 0 24 24">
  <path fill="currentColor" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</Icon>

// Icon with orientation (prop is defined but not implemented in current version)
<Icon orientation="horizontal" />

Create Icon Factory

Factory function for creating reusable custom icon components with predefined SVG content.

/**
 * Creates a custom icon component with predefined SVG content
 * @param options - Configuration options for the icon
 * @returns Custom icon component
 */
function createIcon(options: CreateIconOptions): React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

// Note: CreateIconOptions is an internal type used by createIcon()
// It is not exported from @chakra-ui/icon
interface CreateIconOptions {
  /**
   * The icon svg viewBox
   * @default "0 0 24 24"
   */
  viewBox?: string;
  /**
   * The svg path or group element
   */
  path?: React.ReactElement | React.ReactElement[];
  /**
   * If the svg has a single path, simply copy the path's d attribute
   */
  d?: string;
  /**
   * The display name useful in the dev tools
   */
  displayName?: string;
  /**
   * Default props automatically passed to the component; overwritable
   */
  defaultProps?: IconProps;
}

Usage Examples:

import { createIcon } from "@chakra-ui/icon";

// Create icon with path elements
const ChakraIcon = createIcon({
  displayName: "ChakraIcon",
  viewBox: "0 0 257 257",
  path: [
    <rect width="257" height="257" fill="teal" rx="128.5" key="1" />,
    <path fill="#fff" d="M69.56 133.99l87.59-87..." key="2" />,
  ],
});

// Create icon with d attribute (single path)
const StarIcon = createIcon({
  displayName: "StarIcon",
  d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
});

// Create icon with custom viewBox
const CustomIcon = createIcon({
  displayName: "CustomIcon",
  viewBox: "0 0 100 100",
  d: "M50 10 L90 90 L10 90 Z",
});

// Create icon with default props
const BrandIcon = createIcon({
  displayName: "BrandIcon", 
  d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
  defaultProps: {
    color: "brand.500",
    boxSize: "6",
  },
});

// Use created icons
<ChakraIcon color="blue.500" />
<StarIcon boxSize="8" />
<CustomIcon />
<BrandIcon /> {/* Uses default props */}

Types

type Orientation = "vertical" | "horizontal";

interface IconProps extends Omit<React.SVGAttributes<SVGElement>, keyof ChakraProps>, ChakraProps {
  orientation?: Orientation;
}

interface CreateIconOptions {
  viewBox?: string;
  path?: React.ReactElement | React.ReactElement[];
  d?: string;
  displayName?: string;
  defaultProps?: IconProps;
}

interface ChakraProps {
  /** Theme-aware style props for custom styling */
  sx?: SystemStyleObject;
  /** Custom CSS styles object - used internally by Chakra UI */
  __css?: SystemStyleObject;
  /** The emotion's css style object */
  css?: Interpolation<{}>;
  /** Used to truncate text at a specific number of lines */
  noOfLines?: ResponsiveValue<number>;
  
  // Layout Properties
  /** Width */
  w?: ResponsiveValue<string | number>;
  /** Height */
  h?: ResponsiveValue<string | number>;
  /** Combined width and height shorthand */
  boxSize?: ResponsiveValue<string | number>;
  /** Display property */
  display?: ResponsiveValue<string>;
  /** Minimum width */
  minW?: ResponsiveValue<string | number>;
  /** Maximum width */
  maxW?: ResponsiveValue<string | number>;
  /** Minimum height */
  minH?: ResponsiveValue<string | number>;
  /** Maximum height */
  maxH?: ResponsiveValue<string | number>;
  
  // Spacing Properties  
  /** Margin */
  m?: ResponsiveValue<string | number>;
  /** Margin top */
  mt?: ResponsiveValue<string | number>;
  /** Margin right */
  mr?: ResponsiveValue<string | number>;
  /** Margin bottom */
  mb?: ResponsiveValue<string | number>;
  /** Margin left */
  ml?: ResponsiveValue<string | number>;
  /** Margin horizontal (left and right) */
  mx?: ResponsiveValue<string | number>;
  /** Margin vertical (top and bottom) */
  my?: ResponsiveValue<string | number>;
  /** Padding */
  p?: ResponsiveValue<string | number>;
  /** Padding top */
  pt?: ResponsiveValue<string | number>;
  /** Padding right */
  pr?: ResponsiveValue<string | number>;
  /** Padding bottom */
  pb?: ResponsiveValue<string | number>;
  /** Padding left */
  pl?: ResponsiveValue<string | number>;
  /** Padding horizontal (left and right) */
  px?: ResponsiveValue<string | number>;
  /** Padding vertical (top and bottom) */
  py?: ResponsiveValue<string | number>;
  
  // Color Properties
  /** Color value (supports Chakra color tokens) */
  color?: ResponsiveValue<string>;
  /** Background color */
  bg?: ResponsiveValue<string>;
  /** Background color (alias for bg) */
  backgroundColor?: ResponsiveValue<string>;
  
  // Border Properties
  /** Border */
  border?: ResponsiveValue<string>;
  /** Border width */
  borderWidth?: ResponsiveValue<string | number>;
  /** Border color */
  borderColor?: ResponsiveValue<string>;
  /** Border radius */
  borderRadius?: ResponsiveValue<string | number>;
  
  // Typography Properties
  /** Font size */
  fontSize?: ResponsiveValue<string | number>;
  /** Font weight */
  fontWeight?: ResponsiveValue<string | number>;
  /** Line height */
  lineHeight?: ResponsiveValue<string | number>;
  /** Text alignment */
  textAlign?: ResponsiveValue<string>;
  
  // Flexbox Properties
  /** Align items */
  alignItems?: ResponsiveValue<string>;
  /** Justify content */
  justifyContent?: ResponsiveValue<string>;
  /** Flex direction */
  flexDirection?: ResponsiveValue<string>;
  /** Flex wrap */
  flexWrap?: ResponsiveValue<string>;
  /** Flex */
  flex?: ResponsiveValue<string | number>;
  
  // Position Properties
  /** Position */
  position?: ResponsiveValue<string>;
  /** Top */
  top?: ResponsiveValue<string | number>;
  /** Right */
  right?: ResponsiveValue<string | number>;
  /** Bottom */
  bottom?: ResponsiveValue<string | number>;
  /** Left */
  left?: ResponsiveValue<string | number>;
  /** Z-index */
  zIndex?: ResponsiveValue<string | number>;
  
  // Pseudo-selectors (partial list - ChakraProps includes all CSS pseudo-selectors)
  /** Hover state styles */
  _hover?: SystemStyleObject;
  /** Focus state styles */
  _focus?: SystemStyleObject;
  /** Active state styles */
  _active?: SystemStyleObject;
  /** Disabled state styles */
  _disabled?: SystemStyleObject;
  
  // React Props
  /** CSS class name */
  className?: string;
  /** Element to render instead of default element */
  as?: React.ElementType;
  /** SVG viewBox attribute */
  viewBox?: string;
  /** Whether the element is focusable */
  focusable?: boolean;
  /** Child elements */
  children?: React.ReactNode;
  
  // Note: ChakraProps extends SystemProps which includes 200+ styling properties
  // This is a representative subset. See Chakra UI docs for complete property list
}

type SystemStyleObject = Record<string, any>;
type ResponsiveValue<T> = T | Array<T | null> | Record<string, T | null>;
type Interpolation<Theme> = any; // Emotion CSS type

Install with Tessl CLI

npx tessl i tessl/npm-chakra-ui--icon

Workspace: tessl
Visibility: Public
Created: 6 months ago
Last updated: about 1 month ago
Describes: pkg:npm/@chakra-ui/icon@3.2.x
Publish Source: CLI
Badge