or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

blog-components.mdcontent-components.mdcore-plugin.mddocumentation-components.mdicon-components.mdindex.mdlayout-components.mdnavigation-components.mdtheme-configuration.mdutility-components.md
tile.json

icon-components.mddocs/

Icon Components

Icon components provide standardized SVG icons used throughout the theme interface including navigation, social media, and UI interactions.

Capabilities

Icon Components

Core icon components for common UI elements.

import type { ComponentProps, ReactNode } from 'react';

// Arrow icon for navigation and dropdowns
function IconArrow(props: ComponentProps<'svg'>): ReactNode;

// Dark mode icon for theme toggle
function IconDarkMode(props: ComponentProps<'svg'>): ReactNode;

// Light mode icon for theme toggle  
function IconLightMode(props: ComponentProps<'svg'>): ReactNode;

// System color mode icon for theme toggle
function IconSystemColorMode(props: ComponentProps<'svg'>): JSX.Element;

// Edit icon for edit this page links
function IconEdit(props: ComponentProps<'svg'>): ReactNode;

// Home icon for navigation
function IconHome(props: ComponentProps<'svg'>): ReactNode;

// Menu icon for mobile navigation toggle
function IconMenu(props: ComponentProps<'svg'>): ReactNode;

// Close icon for closing modals and sidebars
function IconClose(props: ComponentProps<'svg'>): ReactNode;

// Copy icon for code block copy buttons
function IconCopy(props: ComponentProps<'svg'>): ReactNode;

// Language icon for locale dropdown
function IconLanguage(props: ComponentProps<'svg'>): ReactNode;

// Success icon for confirmation states
function IconSuccess(props: ComponentProps<'svg'>): ReactNode;

// External link icon for links to external sites
function IconExternalLink(props: ComponentProps<'svg'>): ReactNode;

// Word wrap icon for code block controls
function IconWordWrap(props: ComponentProps<'svg'>): ReactNode;

Social Media Icons

Social media platform icons for author profiles and footer links.

import type { ComponentProps, ReactNode } from 'react';

// Twitter/X icon
function IconTwitter(props: ComponentProps<'svg'>): ReactNode;
function IconX(props: ComponentProps<'svg'>): ReactNode;

// GitHub icon
function IconGitHub(props: ComponentProps<'svg'>): ReactNode;

// LinkedIn icon
function IconLinkedIn(props: ComponentProps<'svg'>): ReactNode;

// Stack Overflow icon
function IconStackOverflow(props: ComponentProps<'svg'>): ReactNode;

// Bluesky social icon
function IconBluesky(props: ComponentProps<'svg'>): ReactNode;

// Instagram icon
function IconInstagram(props: ComponentProps<'svg'>): ReactNode;

// Threads icon
function IconThreads(props: ComponentProps<'svg'>): ReactNode;

// YouTube icon
function IconYouTube(props: ComponentProps<'svg'>): ReactNode;

// Twitch icon
function IconTwitch(props: ComponentProps<'svg'>): ReactNode;

// Mastodon icon
function IconMastodon(props: ComponentProps<'svg'>): ReactNode;

// Default social icon for unknown platforms
function IconDefaultSocial(props: ComponentProps<'svg'>): ReactNode;

Usage Examples

import IconArrow from '@theme/Icon/Arrow';
import IconDarkMode from '@theme/Icon/DarkMode';
import IconGitHub from '@theme/Icon/Socials/GitHub';

// Basic icon usage
function MyComponent() {
  return (
    <div>
      <button>
        <IconArrow className="rotate-icon" />
        Dropdown
      </button>
      
      <IconDarkMode className="theme-toggle-icon" />
      
      <a href="https://github.com/example">
        <IconGitHub />
        GitHub
      </a>
    </div>
  );
}

Types

import type { ComponentProps } from 'react';

// All icon components extend SVG props
interface IconProps extends ComponentProps<'svg'> {
  className?: string;
  width?: string | number;
  height?: string | number;
  fill?: string;
  stroke?: string;
}