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

Communication Icons

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

Icons for communication features including messaging, calls, email, social interactions, and contact management.

Capabilities

Email and Messaging

Icons for email, messaging, and text-based communication.

// Email icons
import Email from "@material-ui/icons/Email";
import EmailOutlined from "@material-ui/icons/EmailOutlined";
import Mail from "@material-ui/icons/Mail";
import MailOutline from "@material-ui/icons/MailOutline";
import Inbox from "@material-ui/icons/Inbox";
import Drafts from "@material-ui/icons/Drafts";
import Send from "@material-ui/icons/Send";
import SendOutlined from "@material-ui/icons/SendOutlined";

// Messaging and chat
import Message from "@material-ui/icons/Message";
import MessageOutlined from "@material-ui/icons/MessageOutlined";
import Chat from "@material-ui/icons/Chat";
import ChatOutlined from "@material-ui/icons/ChatOutlined";
import ChatBubble from "@material-ui/icons/ChatBubble";
import ChatBubbleOutline from "@material-ui/icons/ChatBubbleOutline";
import Sms from "@material-ui/icons/Sms";
import SmsOutlined from "@material-ui/icons/SmsOutlined";

Phone and Video Calls

Icons for phone calls, video calls, and call management.

// Phone calls
import Phone from "@material-ui/icons/Phone";
import PhoneOutlined from "@material-ui/icons/PhoneOutlined";
import Call from "@material-ui/icons/Call";
import CallEnd from "@material-ui/icons/CallEnd";
import CallMade from "@material-ui/icons/CallMade";
import CallReceived from "@material-ui/icons/CallReceived";
import CallMissed from "@material-ui/icons/CallMissed";
import CallMissedOutgoing from "@material-ui/icons/CallMissedOutgoing";

// Video calls
import VideoCall from "@material-ui/icons/VideoCall";
import VideoCallOutlined from "@material-ui/icons/VideoCallOutlined";
import Videocam from "@material-ui/icons/Videocam";
import VideocamOff from "@material-ui/icons/VideocamOff";
import VideocamOutlined from "@material-ui/icons/VideocamOutlined";

Contact Management

Icons for contacts, people, and contact-related actions.

// Contact and people icons
import ContactPhone from "@material-ui/icons/ContactPhone";
import ContactPhoneOutlined from "@material-ui/icons/ContactPhoneOutlined";
import ContactMail from "@material-ui/icons/ContactMail";
import ContactMailOutlined from "@material-ui/icons/ContactMailOutlined";
import Contacts from "@material-ui/icons/Contacts";
import ContactsOutlined from "@material-ui/icons/ContactsOutlined";
import Person from "@material-ui/icons/Person";
import PersonOutlined from "@material-ui/icons/PersonOutlined";
import PersonAdd from "@material-ui/icons/PersonAdd";
import PersonAddOutlined from "@material-ui/icons/PersonAddOutlined";

Social and Sharing

Icons for social interactions, sharing, and social media features.

// Social features
import Share from "@material-ui/icons/Share";
import ShareOutlined from "@material-ui/icons/ShareOutlined";
import People from "@material-ui/icons/People";
import PeopleOutlined from "@material-ui/icons/PeopleOutlined";
import Group from "@material-ui/icons/Group";
import GroupOutlined from "@material-ui/icons/GroupOutlined";
import GroupAdd from "@material-ui/icons/GroupAdd";
import GroupAddOutlined from "@material-ui/icons/GroupAddOutlined";

// Social engagement
import ThumbUp from "@material-ui/icons/ThumbUp";
import ThumbUpOutlined from "@material-ui/icons/ThumbUpOutlined";
import ThumbDown from "@material-ui/icons/ThumbDown";
import ThumbDownOutlined from "@material-ui/icons/ThumbDownOutlined";
import Favorite from "@material-ui/icons/Favorite";
import FavoriteBorder from "@material-ui/icons/FavoriteBorder";
import FavoriteOutlined from "@material-ui/icons/FavoriteOutlined";

Notifications and Alerts

Icons for communication notifications and alert management.

// Notification icons
import Notifications from "@material-ui/icons/Notifications";
import NotificationsOutlined from "@material-ui/icons/NotificationsOutlined";
import NotificationsActive from "@material-ui/icons/NotificationsActive";
import NotificationsOff from "@material-ui/icons/NotificationsOff";
import NotificationsPaused from "@material-ui/icons/NotificationsPaused";
import NotificationsNone from "@material-ui/icons/NotificationsNone";

// Alert types
import Announcement from "@material-ui/icons/Announcement";
import AnnouncementOutlined from "@material-ui/icons/AnnouncementOutlined";
import Campaign from "@material-ui/icons/Campaign";
import RecordVoiceOver from "@material-ui/icons/RecordVoiceOver";

Usage Examples:

import React, { useState } from 'react';
import { 
  Email, 
  Phone, 
  VideoCall, 
  Message, 
  Send,
  Notifications,
  Share,
  Favorite
} from '@material-ui/icons';
import { IconButton, Badge } from '@material-ui/core';

// Communication action buttons
function CommunicationActions() {
  return (
    <div>
      <IconButton>
        <Phone color="primary" />
      </IconButton>
      <IconButton>
        <VideoCall color="primary" />
      </IconButton>
      <IconButton>
        <Email color="primary" />
      </IconButton>
      <IconButton>
        <Message color="primary" />
      </IconButton>
    </div>
  );
}

// Message composer
function MessageComposer({ onSend }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <input type="text" placeholder="Type a message..." />
      <IconButton onClick={onSend}>
        <Send color="primary" />
      </IconButton>
    </div>
  );
}

// Notification badge
function NotificationBadge({ count }) {
  return (
    <Badge badgeContent={count} color="error">
      <Notifications />
    </Badge>
  );
}

// Social engagement buttons
function SocialActions({ isLiked, onLike, onShare }) {
  return (
    <div>
      <IconButton onClick={onLike}>
        <Favorite color={isLiked ? "error" : "inherit"} />
      </IconButton>
      <IconButton onClick={onShare}>
        <Share />
      </IconButton>
    </div>
  );
}

// Contact card
function ContactCard({ contact }) {
  return (
    <div>
      <Person />
      <span>{contact.name}</span>
      <IconButton>
        <Phone />
      </IconButton>
      <IconButton>
        <Email />
      </IconButton>
      <IconButton>
        <Message />
      </IconButton>
    </div>
  );
}