CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-primer--octicons-react

React components for GitHub's Octicons icon library providing scalable SVG icons with tree-shaking support and TypeScript definitions.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

styling.mddocs/

Styling and Sizing

Overview

@primer/octicons-react icons support comprehensive styling options through props and standard React/CSS approaches. All icons inherit styling capabilities from standard SVG elements while providing convenient abstractions for common use cases.

Size Control

Predefined Sizes

type Size = 'small' | 'medium' | 'large'

interface SizeProps {
  /** Size as predefined string or custom pixel value */
  size?: number | Size
}

Size Mappings:

  • small: 16px height by computed width
  • medium: 32px height by computed width
  • large: 64px height by computed width

Custom Numeric Sizes

import { BeakerIcon } from '@primer/octicons-react'

function CustomSizes() {
  return (
    <div>
      <BeakerIcon size={12} />  {/* 12px height */}
      <BeakerIcon size={24} />  {/* 24px height */}
      <BeakerIcon size={48} />  {/* 48px height */}
      <BeakerIcon size={96} />  {/* 96px height */}
    </div>
  )
}

Automatic Width Scaling

Icons automatically maintain their aspect ratio when height is specified. Width is computed based on the original icon proportions using the formula: width = height * (naturalWidth / naturalHeight) where natural dimensions come from the closest available SVG variant.

Color Control

Fill Property

interface ColorProps {
  /** Fill color (defaults to 'currentColor') */
  fill?: string
}

Default Behavior: Icons use currentColor by default, inheriting the text color from their parent element.

import { AlertIcon, CheckIcon } from '@primer/octicons-react'

function ColorExamples() {
  return (
    <div style={{ color: 'blue' }}>
      {/* Uses parent's blue color */}
      <AlertIcon />
      
      {/* Explicit red color */}
      <CheckIcon fill="#ff0000" />
      
      {/* CSS color names */}
      <AlertIcon fill="green" />
      
      {/* CSS variables */}
      <CheckIcon fill="var(--primary-color)" />
    </div>
  )
}

Vertical Alignment

Alignment Options

interface AlignmentProps {
  /** @deprecated use v-align utilities instead - Vertical alignment relative to text baseline */
  verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'
}

Alignment Values:

  • text-bottom (default): Aligns with text baseline
  • middle: Centers with text middle
  • text-top: Aligns with text top
  • top: Aligns with element top
  • unset: Removes alignment styling
import { RepoIcon } from '@primer/octicons-react'

function AlignmentExamples() {
  return (
    <div>
      <h1>
        <RepoIcon verticalAlign="middle" /> Repository Name
      </h1>
      
      <p>
        <RepoIcon verticalAlign="text-bottom" /> Default alignment
      </p>
      
      <span>
        <RepoIcon verticalAlign="text-top" /> Top aligned
      </span>
    </div>
  )
}

CSS Styling

Class Names

interface CSSProps {
  /** CSS class names */
  className?: string
  /** Inline styles */
  style?: React.CSSProperties
}
import { GearIcon } from '@primer/octicons-react'

function StyledIcons() {
  return (
    <div>
      {/* CSS classes */}
      <GearIcon className="icon-primary rotating" />
      
      {/* Inline styles */}
      <GearIcon 
        style={{
          color: '#0969da',
          cursor: 'pointer',
          transition: 'transform 0.2s'
        }}
      />
    </div>
  )
}

CSS-in-JS Integration

Icons work seamlessly with styled-components, emotion, and other CSS-in-JS libraries:

import styled from 'styled-components'
import { SearchIcon } from '@primer/octicons-react'

const StyledIcon = styled(SearchIcon)`
  color: ${props => props.theme.primaryColor};
  cursor: pointer;
  transition: all 0.2s ease;
  
  &:hover {
    transform: scale(1.1);
    color: ${props => props.theme.hoverColor};
  }
`

function SearchButton() {
  return <StyledIcon size="medium" />
}

Advanced Styling

Responsive Sizing

import { MenuIcon } from '@primer/octicons-react'

function ResponsiveIcon() {
  return (
    <MenuIcon 
      className="responsive-icon"
      style={{
        width: 'clamp(16px, 4vw, 32px)',
        height: 'auto'
      }}
    />
  )
}

Animation Integration

import { SyncIcon } from '@primer/octicons-react'

function SpinningIcon() {
  return (
    <SyncIcon 
      className="spinning"
      size="medium"
      style={{
        animation: 'spin 1s linear infinite'
      }}
    />
  )
}

// CSS
/*
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
*/

Theme Integration

Icons inherit CSS custom properties and work with design system tokens:

import { StarIcon } from '@primer/octicons-react'

function ThemedIcon() {
  return (
    <StarIcon 
      fill="var(--color-icon-primary)"
      size="var(--size-icon-medium)"
      style={{
        marginRight: 'var(--spacing-xs)'
      }}
    />
  )
}

Best Practices

Performance Considerations

  • Use predefined sizes when possible for consistent rendering
  • Prefer currentColor for icons that should match text color
  • Use CSS classes over inline styles for repeated styling patterns

Accessibility

  • Icons inherit accessibility props from their SVG implementation
  • Color alone should not convey meaning - provide text alternatives
  • Use appropriate contrast ratios for icon colors

Responsive Design

  • Test icon readability at different sizes
  • Consider using different icon variants for mobile vs desktop
  • Ensure touch targets meet minimum size requirements (44px+)

Bundle Optimization

  • Always import individual icons for tree-shaking benefits
  • Consider icon sprite sheets for frequently used icons
  • Use build-time optimizations for critical rendering paths

Install with Tessl CLI

npx tessl i tessl/npm-primer--octicons-react

docs

accessibility.md

customization.md

icon-components.md

index.md

styling.md

tile.json