tessl/npm-material-ui--icons

Material Design SVG icons converted to Material-UI React components.

—

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

Content Icons

Name: tessl/npm-material-ui--icons
Author: tessl

Icons for content management, file operations, document handling, and media content.

Capabilities

File Operations

Icons for basic file operations like copying, saving, and sharing.

// File actions
import FileCopy from "@material-ui/icons/FileCopy";
import FileCopyOutlined from "@material-ui/icons/FileCopyOutlined";
import Save from "@material-ui/icons/Save";
import SaveOutlined from "@material-ui/icons/SaveOutlined";
import SaveAlt from "@material-ui/icons/SaveAlt";
import Share from "@material-ui/icons/Share";
import ShareOutlined from "@material-ui/icons/ShareOutlined";

// Upload and Download
import GetApp from "@material-ui/icons/GetApp"; // Download alternative
import Publish from "@material-ui/icons/Publish"; // Upload alternative
import CloudDownload from "@material-ui/icons/CloudDownload";
import CloudUpload from "@material-ui/icons/CloudUpload";

Folders and Organization

Icons for folder management and content organization.

// Folder management
import Folder from "@material-ui/icons/Folder";
import FolderOutlined from "@material-ui/icons/FolderOutlined";
import FolderOpen from "@material-ui/icons/FolderOpen";
import FolderOpenOutlined from "@material-ui/icons/FolderOpenOutlined";
import CreateNewFolder from "@material-ui/icons/CreateNewFolder";
import CreateNewFolderOutlined from "@material-ui/icons/CreateNewFolderOutlined";
import FolderShared from "@material-ui/icons/FolderShared";
import FolderSpecial from "@material-ui/icons/FolderSpecial";

// Organization
import Archive from "@material-ui/icons/Archive";
import ArchiveOutlined from "@material-ui/icons/ArchiveOutlined";
import Unarchive from "@material-ui/icons/Unarchive";
import UnarchiveOutlined from "@material-ui/icons/UnarchiveOutlined";

Document Types

Icons representing different document and file types.

// Document icons
import Description from "@material-ui/icons/Description";
import DescriptionOutlined from "@material-ui/icons/DescriptionOutlined";
import Assignment from "@material-ui/icons/Assignment";
import AssignmentOutlined from "@material-ui/icons/AssignmentOutlined";
import InsertDriveFile from "@material-ui/icons/InsertDriveFile";
import InsertDriveFileOutlined from "@material-ui/icons/InsertDriveFileOutlined";

// Specific file types
import PictureAsPdf from "@material-ui/icons/PictureAsPdf";
import PictureAsPdfOutlined from "@material-ui/icons/PictureAsPdfOutlined";

Text Editing

Icons for text formatting and editing operations.

// Text formatting
import FormatBold from "@material-ui/icons/FormatBold";
import FormatItalic from "@material-ui/icons/FormatItalic";
import FormatUnderlined from "@material-ui/icons/FormatUnderlined";
import FormatSize from "@material-ui/icons/FormatSize";
import FormatColorText from "@material-ui/icons/FormatColorText";
import FormatColorFill from "@material-ui/icons/FormatColorFill";
import FormatColorReset from "@material-ui/icons/FormatColorReset";

// Alignment and lists
import FormatAlignLeft from "@material-ui/icons/FormatAlignLeft";
import FormatAlignCenter from "@material-ui/icons/FormatAlignCenter";
import FormatAlignRight from "@material-ui/icons/FormatAlignRight";
import FormatAlignJustify from "@material-ui/icons/FormatAlignJustify";
import FormatListBulleted from "@material-ui/icons/FormatListBulleted";
import FormatListNumbered from "@material-ui/icons/FormatListNumbered";
import FormatIndentDecrease from "@material-ui/icons/FormatIndentDecrease";
import FormatIndentIncrease from "@material-ui/icons/FormatIndentIncrease";

Clipboard Operations

Icons for copy operations and document handling.

// File copy and clipboard operations
import FileCopy from "@material-ui/icons/FileCopy";
import FileCopyOutlined from "@material-ui/icons/FileCopyOutlined";
import Assignment from "@material-ui/icons/Assignment";
import AssignmentOutlined from "@material-ui/icons/AssignmentOutlined";

Media Content

Icons for images, audio, video, and multimedia content.

// Image and photo icons
import Image from "@material-ui/icons/Image";
import ImageOutlined from "@material-ui/icons/ImageOutlined";
import Photo from "@material-ui/icons/Photo";
import PhotoOutlined from "@material-ui/icons/PhotoOutlined";
import PhotoLibrary from "@material-ui/icons/PhotoLibrary";
import PhotoLibraryOutlined from "@material-ui/icons/PhotoLibraryOutlined";
import Collections from "@material-ui/icons/Collections";
import CollectionsOutlined from "@material-ui/icons/CollectionsOutlined";

// Audio and video
import AudioFile from "@material-ui/icons/AudioFile";
import AudioFileOutlined from "@material-ui/icons/AudioFileOutlined";
import VideoFile from "@material-ui/icons/VideoFile";
import VideoFileOutlined from "@material-ui/icons/VideoFileOutlined";
import Movie from "@material-ui/icons/Movie";
import MovieOutlined from "@material-ui/icons/MovieOutlined";

Usage Examples:

import React from 'react';
import { 
  Save, 
  Share, 
  Download, 
  Upload,
  Folder,
  FileCopy,
  FormatBold,
  FormatItalic,
  Image,
  Description
} from '@material-ui/icons';
import { IconButton, Toolbar } from '@material-ui/core';

// File operations toolbar
function FileToolbar({ onSave, onShare, onDownload }) {
  return (
    <Toolbar>
      <IconButton onClick={onSave} title="Save">
        <Save />
      </IconButton>
      <IconButton onClick={onShare} title="Share">
        <Share />
      </IconButton>
      <IconButton onClick={onDownload} title="Download">
        <Download />
      </IconButton>
    </Toolbar>
  );
}

// Text formatting toolbar
function TextFormatToolbar({ onBold, onItalic, onCopy }) {
  return (
    <Toolbar>
      <IconButton onClick={onBold} title="Bold">
        <FormatBold />
      </IconButton>
      <IconButton onClick={onItalic} title="Italic">
        <FormatItalic />
      </IconButton>
      <IconButton onClick={onCopy} title="Copy">
        <FileCopy />
      </IconButton>
    </Toolbar>
  );
}

// File browser item
function FileItem({ file }) {
  const getFileIcon = (type) => {
    switch (type) {
      case 'folder':
        return <Folder />;
      case 'image':
        return <Image />;
      case 'document':
        return <Description />;
      default:
        return <InsertDriveFile />;
    }
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {getFileIcon(file.type)}
      <span style={{ marginLeft: 8 }}>{file.name}</span>
    </div>
  );
}

// Upload zone
function UploadZone({ onUpload }) {
  return (
    <div 
      style={{ 
        border: '2px dashed #ccc', 
        padding: 20, 
        textAlign: 'center',
        cursor: 'pointer'
      }}
      onClick={onUpload}
    >
      <Upload fontSize="large" />
      <p>Click to upload files</p>
    </div>
  );
}

// Document actions
function DocumentActions({ onSave, onDownload, onShare, onCopy }) {
  return (
    <div>
      <IconButton onClick={onSave}>
        <Save color="primary" />
      </IconButton>
      <IconButton onClick={onDownload}>
        <Download />
      </IconButton>
      <IconButton onClick={onShare}>
        <Share />
      </IconButton>
      <IconButton onClick={onCopy}>
        <FileCopy />
      </IconButton>
    </div>
  );
}