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

Navigation Icons

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

Icons for navigation, menus, arrows, directional indicators, and app navigation patterns.

Capabilities

Directional Arrows

Basic directional arrows for navigation and movement indication.

// Basic arrow directions
import ArrowBack from "@material-ui/icons/ArrowBack";
import ArrowForward from "@material-ui/icons/ArrowForward";
import ArrowUpward from "@material-ui/icons/ArrowUpward";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
import ArrowLeft from "@material-ui/icons/ArrowLeft";
import ArrowRight from "@material-ui/icons/ArrowRight";

// Outlined variants
import ArrowBackOutlined from "@material-ui/icons/ArrowBackOutlined";
import ArrowForwardOutlined from "@material-ui/icons/ArrowForwardOutlined";

Chevron Arrows

Subtle chevron-style arrows typically used for expandable content and subtle navigation.

// Chevron navigation arrows
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import KeyboardArrowUp from "@material-ui/icons/KeyboardArrowUp";
import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown";
import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";

Menu Icons

Icons for menu toggles, hamburger menus, and menu-related actions.

// Menu and hamburger icons
import Menu from "@material-ui/icons/Menu";
import MenuOutlined from "@material-ui/icons/MenuOutlined";
import MenuOpen from "@material-ui/icons/MenuOpen";
import Close from "@material-ui/icons/Close";
import CloseOutlined from "@material-ui/icons/CloseOutlined";
import Cancel from "@material-ui/icons/Cancel";
import ClearOutlined from "@material-ui/icons/ClearOutlined";

App Navigation

Icons commonly used in app navigation bars, tabs, and drawer navigation.

// Home and main navigation
import Home from "@material-ui/icons/Home";
import HomeOutlined from "@material-ui/icons/HomeOutlined";
import Dashboard from "@material-ui/icons/Dashboard";
import DashboardOutlined from "@material-ui/icons/DashboardOutlined";
import Apps from "@material-ui/icons/Apps";
import AppsOutlined from "@material-ui/icons/AppsOutlined";

// Tab and page navigation
import Tab from "@material-ui/icons/Tab";
import TabUnselected from "@material-ui/icons/TabUnselected";
import Pages from "@material-ui/icons/Pages";
import ViewModule from "@material-ui/icons/ViewModule";
import ViewList from "@material-ui/icons/ViewList";
import ViewComfy from "@material-ui/icons/ViewComfy";

First/Last Navigation

Icons for pagination and navigating to first/last items.

// First/Last navigation
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import SkipPrevious from "@material-ui/icons/SkipPrevious";
import SkipNext from "@material-ui/icons/SkipNext";
import FastRewind from "@material-ui/icons/FastRewind";
import FastForward from "@material-ui/icons/FastForward";

Fullscreen and View Controls

Icons for fullscreen toggles and view mode controls.

// Fullscreen and view controls
import Fullscreen from "@material-ui/icons/Fullscreen";
import FullscreenExit from "@material-ui/icons/FullscreenExit";
import ZoomIn from "@material-ui/icons/ZoomIn";
import ZoomOut from "@material-ui/icons/ZoomOut";
import ZoomOutMap from "@material-ui/icons/ZoomOutMap";
import CenterFocusStrong from "@material-ui/icons/CenterFocusStrong";
import CenterFocusWeak from "@material-ui/icons/CenterFocusWeak";

Usage Examples:

import React, { useState } from 'react';
import { Menu, Close, ArrowBack, ExpandMore, ExpandLess } from '@material-ui/icons';
import { IconButton, Drawer, AppBar, Toolbar, Collapse } from '@material-ui/core';

// App Bar with navigation
function NavigationAppBar() {
  const [drawerOpen, setDrawerOpen] = useState(false);

  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton onClick={() => setDrawerOpen(true)}>
          <Menu />
        </IconButton>
        <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)}>
          <IconButton onClick={() => setDrawerOpen(false)}>
            <Close />
          </IconButton>
          {/* Drawer content */}
        </Drawer>
      </Toolbar>
    </AppBar>
  );
}

// Back navigation
function BackButton({ onBack }) {
  return (
    <IconButton onClick={onBack}>
      <ArrowBack />
    </IconButton>
  );
}

// Expandable section
function ExpandableSection({ title, children }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div>
      <div onClick={() => setExpanded(!expanded)}>
        {title}
        {expanded ? <ExpandLess /> : <ExpandMore />}
      </div>
      <Collapse in={expanded}>
        {children}
      </Collapse>
    </div>
  );
}

// Pagination controls
function PaginationControls({ onFirst, onPrev, onNext, onLast }) {
  return (
    <div>
      <IconButton onClick={onFirst}>
        <FirstPage />
      </IconButton>
      <IconButton onClick={onPrev}>
        <ChevronLeft />
      </IconButton>
      <IconButton onClick={onNext}>
        <ChevronRight />
      </IconButton>
      <IconButton onClick={onLast}>
        <LastPage />
      </IconButton>
    </div>
  );
}