tessl/npm-grommet-icons

Comprehensive React icon library with 639+ SVG icons designed for Grommet applications and general React projects, featuring theming support, accessibility, and customizable sizing.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Grommet Icons

Name: tessl/npm-grommet-icons
Author: tessl

Grommet Icons is a comprehensive React icon library providing 639+ SVG-based icons designed for Grommet applications and general React.js projects. It features theming support, accessibility, customizable sizing, and seamless integration with styled-components.

Package Information

Package Name: grommet-icons
Package Type: npm
Language: JavaScript/TypeScript (with full type definitions)
Installation: npm install grommet-icons or yarn add grommet-icons

Core Imports

import { Facebook, Twitter, Add, Close } from "grommet-icons";

For theming:

import { base, deepMerge, defaultProps, extendDefaultTheme } from "grommet-icons";

For custom icons:

import { Blank } from "grommet-icons";

For utilities (via utils default export):

import utils from "grommet-icons/src/js/utils";
const { isObject, parseMetricToNum, useScaleProps, iconPad, generatePrefix } = utils;

CommonJS:

const { Facebook, Twitter, Add, Close } = require("grommet-icons");

Basic Usage

import React from 'react';
import { Add, Close, Facebook } from 'grommet-icons';

function MyComponent() {
  return (
    <div>
      {/* Basic icon usage */}
      <Add />
      <Close />
      
      {/* With color and size */}
      <Facebook color="plain" />
      <Add size="large" />
      <Close size="xlarge" />
    </div>
  );
}

Architecture

Grommet Icons is built around several key components:

Icon Components: 639+ individual React components, each representing a specific icon
StyledIcon: Internal base styled-components wrapper that provides theming, sizing, and color support (used by all icon components)
Theme System: Integrated theming with customizable colors, sizes, and styling extensions
Blank Component: Template for creating custom icons while maintaining consistency
TypeScript Support: Complete type definitions for all icons and utilities
Accessibility: Built-in ARIA support with customizable accessibility titles

Capabilities

Icon Components

639+ individual React icon components covering UI elements, social media, brands, status indicators, documents, and technical symbols.

interface IconProps {
  a11yTitle?: string;
  color?: string;
  size?: 'small' | 'medium' | 'large' | 'xlarge' | string;
}

type Icon = React.ComponentType<IconProps & JSX.IntrinsicElements['svg']>;

// Sample icons - all follow the same pattern
declare const Add: Icon;
declare const Close: Icon;
declare const Facebook: Icon;
declare const Twitter: Icon;
// ... 635+ more icons

Icon Components

Theming and Customization

Theme integration with styled-components for consistent color schemes and sizing across applications.

interface Theme {
  global: {
    colors: {
      icon: string;
      [key: string]: any;
    };
  };
  icon: {
    size: {
      small: string;
      medium: string;
      large: string;
      xlarge: string;
    };
    extend?: any;
  };
}

declare const base: Theme;
declare function deepMerge(target: any, ...sources: any[]): any;
declare const defaultProps: { theme: Theme };
declare function extendDefaultTheme(theme: any): void;

Theming

Custom Icon Creation

Create custom icons using the Blank component while maintaining consistency with the icon system.

declare const Blank: React.ComponentType<IconProps & JSX.IntrinsicElements['svg']>;

Custom Icons

Utility Functions

Internal utility functions available via the utils default export for advanced customization scenarios.

/**
 * Check if a value is a plain object
 */
declare function isObject(item: any): boolean;

/**
 * Extract numeric value from CSS string (e.g., "24px" -> 24)
 */
declare function parseMetricToNum(string?: string): number;

/**
 * React hook for handling icon stroke scaling at small sizes
 */
declare function useScaleProps(props: { size?: string }): { vectorEffect?: string };

/**
 * Calculate padding for icon alignment with text
 */
declare function iconPad(props: {
  height?: string;
  width?: string;
  size?: string;
}): string;

/**
 * Generate unique ID prefix for SVG elements to avoid collisions
 */
declare function generatePrefix(name: string): string;

These utilities are primarily used internally by the icon system but can be accessed for advanced customization:

import utils from "grommet-icons/src/js/utils";
const { parseMetricToNum, isObject } = utils;

// Use parseMetricToNum to extract numeric values
const numericSize = parseMetricToNum("24px"); // 24

Common Icon Categories

Navigation & UI: Add, Close, Menu, More, Search, Filter, Next, Previous, Up, Down, CaretUp, CaretDown, CaretLeftFill, CaretRightFill

Status & Indicators: StatusGood, StatusCritical, StatusWarning, StatusInfo, Checkmark, Alert, CircleInformation, CircleAlert

Social & Brands: Facebook, Twitter, Instagram, LinkedIn, Github, Google, Apple, Microsoft, Amazon, Netflix

Documents & Files: Document, DocumentPdf, DocumentExcel, DocumentWord, Folder, FolderOpen, Archive, Download, Upload

System & Technology: Server, Database, Cloud, Network, Docker, Kubernetes, Linux, Windows, Android, Apple

Types

interface IconProps {
  /** Accessibility title for screen readers */
  a11yTitle?: string;
  /** Icon color - theme color name or CSS color value */
  color?: string;
  /** Icon size - predefined size or custom CSS value */
  size?: 'small' | 'medium' | 'large' | 'xlarge' | string;
}

type Icon = React.ComponentType<IconProps & JSX.IntrinsicElements['svg']>;

interface Theme {
  global: {
    colors: {
      icon: string;
      [key: string]: any;
    };
  };
  icon: {
    size: {
      small: string;
      medium: string;
      large: string;
      xlarge: string;
    };
    extend?: any;
  };
}