tessl/npm-mantine--ds

Internal Mantine components used on *.mantine.dev websites including Demo, MantineLogo, SearchControl, HeaderControl, and SocialButton 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

Icon Library

Name: tessl/npm-mantine--ds
Author: tessl

Brand-specific icons for platforms, technologies, and social media with consistent styling and sizing options.

Capabilities

DiscordIcon

Discord brand icon with customizable size and styling.

/**
 * Discord brand icon component
 * @param size - Icon size in pixels or CSS units
 * @param style - Additional CSS styles
 */
interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {
  size?: number | string;
  style?: React.CSSProperties;
}

function DiscordIcon(props: IconProps): JSX.Element;

TwitterIcon

Twitter/X brand icon with customizable size and styling.

/**
 * Twitter/X brand icon component
 * @param size - Icon size in pixels or CSS units
 * @param style - Additional CSS styles
 */
function TwitterIcon(props: IconProps): JSX.Element;

GithubIcon

GitHub brand icon with customizable size and styling.

/**
 * GitHub brand icon component
 * @param size - Icon size in pixels or CSS units
 * @param style - Additional CSS styles
 */
function GithubIcon(props: IconProps): JSX.Element;

NpmIcon

NPM package manager icon with customizable size and styling.

/**
 * NPM package manager icon component
 * @param size - Icon size in pixels or CSS units
 * @param style - Additional CSS styles
 */
function NpmIcon(props: IconProps): JSX.Element;

YarnIcon

Yarn package manager icon with customizable size and styling.

/**
 * Yarn package manager icon component
 * @param size - Icon size in pixels or CSS units
 * @param style - Additional CSS styles
 */
function YarnIcon(props: IconProps): JSX.Element;

TypeScriptIcon

TypeScript technology icon with customizable size and styling.

/**
 * TypeScript technology icon component
 * @param size - Icon size in pixels or CSS units
 * @param style - Additional CSS styles
 */
function TypeScriptIcon(props: IconProps): JSX.Element;

TypeScriptCircleIcon

TypeScript technology icon with circular background.

/**
 * TypeScript icon with circular background
 * @param size - Icon size in pixels or CSS units
 * @param style - Additional CSS styles
 */
function TypeScriptCircleIcon(props: IconProps): JSX.Element;

CssIcon

CSS technology icon with customizable size and styling.

/**
 * CSS technology icon component
 * @param size - Icon size in pixels or CSS units
 * @param style - Additional CSS styles
 */
function CssIcon(props: IconProps): JSX.Element;

Usage Examples:

import { 
  DiscordIcon, 
  TwitterIcon, 
  GithubIcon, 
  TypeScriptIcon,
  TypeScriptCircleIcon,
  NpmIcon,
  YarnIcon,
  CssIcon
} from "@mantine/ds";

// Social media icons
function SocialLinks() {
  return (
    <div>
      <DiscordIcon size={24} />
      <TwitterIcon size={24} />
      <GithubIcon size={24} />
    </div>
  );
}

// Technology stack display
function TechStack() {
  return (
    <div className="tech-icons">
      <TypeScriptIcon size={32} />
      <CssIcon size={32} />
    </div>
  );
}

// Package manager options
function InstallInstructions() {
  return (
    <div>
      <div>
        <NpmIcon size={20} />
        <code>npm install @mantine/core</code>
      </div>
      <div>
        <YarnIcon size={20} />
        <code>yarn add @mantine/core</code>
      </div>
    </div>
  );
}

// Custom styling
function CustomIcon() {
  return (
    <GithubIcon 
      size={40}
      style={{ 
        color: '#333',
        cursor: 'pointer'
      }}
      onClick={() => window.open('https://github.com/mantinedev/mantine')}
    />
  );
}

Types

interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {
  /** Icon size in pixels or CSS units (defaults to 16) */
  size?: number | string;
  /** Additional CSS styles */
  style?: React.CSSProperties;
  /** Click handler */
  onClick?: (event: React.MouseEvent<SVGElement>) => void;
  /** CSS class name */
  className?: string;
}