react-material-vscode-icons

React Material VSCode Icons

A comprehensive React component library that brings the beautiful VSCode Material Icon Theme to your React applications. Get file and folder icons that match the popular VSCode extension.

Features

• 🎨 1000+ Icons - Complete icon set from VSCode Material Icon Theme
• ⚛️ React Components - TypeScript-first React components
• 🎯 Smart Detection - Automatic icon selection based on file names and extensions
• 📁 Folder Icons - Special folder icons for common directory names
• 🔧 Customizable - Easy styling with className and size props
• 📦 Tree Shakable - Import only what you need
• 🎨 CSS Framework Agnostic - Works with Tailwind, styled-components, CSS modules, etc.

Installation

npm install react-material-vscode-icons
# or
yarn add react-material-vscode-icons
# or
pnpm add react-material-vscode-icons

Quick Start

Basic Usage

import { FileIcon } from 'react-material-vscode-icons'

function FileExplorer() {
  return (
    <div>
      <FileIcon fileName="package.json" size={24} />
      <FileIcon fileName="src" isFolder size={24} />
      <FileIcon fileName="components" isFolder isExpanded size={24} />
      <FileIcon fileName="App.tsx" size={24} />
      <FileIcon fileName="styles.css" size={24} />
    </div>
  )
}

Using Helper Functions

import { getFileIcon, getFolderIcon } from 'react-material-vscode-icons'
import { Javascript } from 'react-material-vscode-icons/icons'

function CustomComponent() {
  const iconName = getFileIcon('script.js') // Returns 'Javascript'
  const folderIconName = getFolderIcon('src', false) // Returns 'FolderSrc'
  
  return (
    <div>
      <Javascript size={20} className="text-blue-500" />
      Icon for script.js: {iconName}
    </div>
  )
}

Direct Icon Import

import { 
  Javascript, 
  Typescript, 
  ReactIcon, 
  FolderSrc, 
  FolderComponents 
} from 'react-material-vscode-icons/icons'

function IconShowcase() {
  return (
    <div className="flex gap-4">
      <Javascript size={32} className="text-yellow-400" />
      <Typescript size={32} className="text-blue-500" />
      <ReactIcon size={32} className="text-cyan-400" />
      <FolderSrc size={32} className="text-blue-600" />
      <FolderComponents size={32} className="text-purple-600" />
    </div>
  )
}

API Reference

FileIcon Component

The main component for displaying file and folder icons.

interface FileIconProps {
  fileName: string      // File or folder name
  isFolder?: boolean    // Whether this is a folder
  isExpanded?: boolean  // Whether folder is expanded (for folder icons)
  className?: string    // Additional CSS classes
  size?: number        // Icon size in pixels (default: 16)
}

Helper Functions

getFileIcon(fileName: string): string

Returns the appropriate icon name for a given file name.

getFileIcon('package.json')     // 'Npm'
getFileIcon('App.tsx')          // 'ReactIcon'
getFileIcon('styles.css')       // 'Css'
getFileIcon('README.md')        // 'Readme'

getFolderIcon(folderName: string, isExpanded?: boolean): string

Returns the appropriate icon name for a given folder name.

getFolderIcon('src')            // 'FolderSrc'
getFolderIcon('components')     // 'FolderComponents'
getFolderIcon('node_modules')   // 'FolderNode'
getFolderIcon('src', true)      // 'FolderSrcOpen' (if available)

Supported File Types

The library automatically detects icons for hundreds of file types and names:

Programming Languages

• JavaScript (.js, .jsx, .mjs, .cjs)
• TypeScript (.ts, .tsx)
• Python (.py, .pyw, .pyx)
• Java (.java)
• C/C++ (.c, .cpp, .h, .hpp)
• Go (.go)
• Rust (.rs)
• PHP (.php)
• Ruby (.rb)
• And many more...

Frameworks & Libraries

• React (.jsx, .tsx)
• Vue (.vue)
• Angular (.component.ts, .service.ts)
• Svelte (.svelte)
• Astro (.astro)

Configuration Files

• package.json, yarn.lock, pnpm-lock.yaml
• tsconfig.json, webpack.config.js, vite.config.ts
• .eslintrc.js, .prettierrc, babel.config.js
• Dockerfile, docker-compose.yml
• .gitignore, .env files

Special Folders

• src, lib → Source folder icon
• test, tests, __tests__ → Test folder icon
• docs, documentation → Documentation folder icon
• components → Components folder icon
• assets, static, public → Assets folder icon
• node_modules → Node modules folder icon

Styling

With Tailwind CSS

<FileIcon 
  fileName="App.tsx" 
  className="text-blue-500 hover:text-blue-700 transition-colors" 
  size={24} 
/>

With CSS Modules

import styles from './FileTree.module.css'

<FileIcon 
  fileName="package.json" 
  className={styles.fileIcon} 
  size={20} 
/>

With styled-components

import styled from 'styled-components'
import { FileIcon } from 'react-material-vscode-icons'

const StyledFileIcon = styled(FileIcon)`
  color: #3b82f6;
  transition: color 0.2s;
  
  &:hover {
    color: #1d4ed8;
  }
`

Advanced Usage

Building a File Tree

import { FileIcon } from 'react-material-vscode-icons'

interface FileNode {
  name: string
  isFolder: boolean
  isExpanded?: boolean
  children?: FileNode[]
}

function FileTree({ nodes }: { nodes: FileNode[] }) {
  return (
    <ul className="space-y-1">
      {nodes.map((node, index) => (
        <li key={index} className="flex items-center gap-2">
          <FileIcon
            fileName={node.name}
            isFolder={node.isFolder}
            isExpanded={node.isExpanded}
            size={16}
          />
          <span>{node.name}</span>
          {node.children && node.isExpanded && (
            <FileTree nodes={node.children} />
          )}
        </li>
      ))}
    </ul>
  )
}

Custom Icon Mapping

import { fileIconMapping } from 'react-material-vscode-icons'

// Extend or modify the default mapping
const customMapping = {
  ...fileIconMapping,
  fileExtensions: {
    ...fileIconMapping.fileExtensions,
    'myext': 'custom-icon-name'
  }
}

Generating Icons

This library includes a generator script to update icons from the VSCode Material Icon Theme repository:

npm run generate

This will:

• Clone the latest VSCode Material Icon Theme
• Generate React components for all SVG icons
• Update the file mapping configuration
• Clean up temporary files

Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

MIT License - see the LICENSE file for details.

Credits

• Icons from VSCode Material Icon Theme
• Built with tsup for fast TypeScript compilation

Changelog

0.1.0

• Initial release
• 1000+ Material Design icons
• FileIcon component
• Smart file/folder detection
• TypeScript support
• Tree-shakable exports