react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
153 lines (148 loc) • 26.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Icon } from '../../components/atoms/Icon';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Card } from '../../components/atoms/Card';
import { Alert } from '../../components/atoms/Alert';
import { Button } from '../../components/atoms/Button';
import './ComponentDocumentation.scss';
const IconDocumentation = () => {
const sizes = [
{ name: 'xs', description: 'Extra small icons (12px)' },
{ name: 'sm', description: 'Small icons (16px)' },
{ name: 'md', description: 'Medium icons (20px, default)' },
{ name: 'lg', description: 'Large icons (24px)' },
{ name: 'xl', description: 'Extra large icons (32px)' },
{ name: 'xxl', description: '2X large icons (48px)' }
];
const commonIcons = [
'search', 'close', 'check', 'plus', 'minus', 'arrow-left', 'arrow-right',
'chevron-down', 'chevron-up', 'chevron-left', 'chevron-right',
'hamburger', 'login', 'play', 'pause', 'settings', 'user', 'mail',
'phone', 'calendar', 'clock', 'star', 'heart', 'eye', 'eye-off'
];
const alertIcons = ['success', 'warning', 'error', 'info'];
const navigationIcons = ['hamburger', 'close', 'arrow-left', 'arrow-right', 'chevron-down', 'chevron-up'];
const actionIcons = ['search', 'check', 'plus', 'minus', 'play', 'pause', 'settings'];
const mediaIcons = ['play', 'pause', 'play-circle', 'volume', 'volume-off', 'volume-1', 'volume-2'];
return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsxs(Link, { to: "/documentation", className: "back-link", children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), "Back to Documentation"] }), _jsx("h1", { children: "Icon Component" }), _jsx("p", { className: "component-description", children: "A flexible icon component for displaying scalable vector icons. Supports multiple sizes, colors, and a comprehensive icon library." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { Icon } } from '../../components/atoms/Icon';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Icon, { name: "search", size: "md" }), _jsx(Icon, { name: "check", size: "md" }), _jsx(Icon, { name: "close", size: "md" }), _jsx(Icon, { name: "plus", size: "md" })] }), _jsx(CodeBlock, { code: `<Icon name="search" size="md" />
<Icon name="check" size="md" />
<Icon name="close" size="md" />
<Icon name="plus" size="md" />`, language: "tsx" })] })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the icon size using the size prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: sizes.map((size) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }, children: [_jsx(Icon, { name: "star", size: size.name }), _jsxs("span", { style: { fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: [size.name.toUpperCase(), " - ", size.description] })] }, size.name))) }), _jsx(CodeBlock, { code: `<Icon name="star" size="xs" />
<Icon name="star" size="sm" />
<Icon name="star" size="md" />
<Icon name="star" size="lg" />
<Icon name="star" size="xl" />
<Icon name="star" size="xxl" />`, language: "tsx" })] })] }), _jsxs("section", { className: "colors-section", children: [_jsx("h2", { children: "Colors" }), _jsx("p", { children: "Use the color prop to customize icon colors." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Icon, { name: "check", size: "md", color: "var(--color-success)" }), _jsx(Icon, { name: "warning", size: "md", color: "var(--color-warning)" }), _jsx(Icon, { name: "error", size: "md", color: "var(--color-error)" }), _jsx(Icon, { name: "info", size: "md", color: "var(--color-info)" }), _jsx(Icon, { name: "star", size: "md", color: "var(--color-primary)" })] }), _jsx(CodeBlock, { code: `<Icon name="check" size="md" color="var(--color-success)" />
<Icon name="warning" size="md" color="var(--color-warning)" />
<Icon name="error" size="md" color="var(--color-error)" />
<Icon name="info" size="md" color="var(--color-info)" />
<Icon name="star" size="md" color="var(--color-primary)" />`, language: "tsx" })] })] }), _jsxs("section", { className: "common-icons-section", children: [_jsx("h2", { children: "Common Icons" }), _jsx("p", { children: "Frequently used icons in the icon library." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: '1rem' }, children: commonIcons.map((iconName) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem', padding: '1rem', border: '1px solid var(--color-border)', borderRadius: '0.5rem' }, children: [_jsx(Icon, { name: iconName, size: "md" }), _jsx("span", { style: { fontSize: '0.75rem', textAlign: 'center' }, children: iconName })] }, iconName))) }), _jsx(CodeBlock, { code: `// Common icons available:
// search, close, check, plus, minus, arrow-left, arrow-right
// chevron-down, chevron-up, chevron-left, chevron-right
// hamburger, login, play, pause, settings, user, mail
// phone, calendar, clock, star, heart, eye, eye-off`, language: "tsx" })] })] }), _jsxs("section", { className: "alert-icons-section", children: [_jsx("h2", { children: "Alert Icons" }), _jsx("p", { children: "Icons specifically designed for alert and notification states." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '1rem' }, children: alertIcons.map((iconName) => (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem', padding: '1rem', border: '1px solid var(--color-border)', borderRadius: '0.5rem' }, children: [_jsx(Icon, { name: iconName, size: "lg", color: `var(--color-${iconName})` }), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: '500' }, children: iconName.charAt(0).toUpperCase() + iconName.slice(1) }), _jsxs("div", { style: { fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: [iconName === 'success' && 'Success/positive states', iconName === 'warning' && 'Warning/caution states', iconName === 'error' && 'Error/danger states', iconName === 'info' && 'Informational states'] })] })] }, iconName))) }), _jsx(CodeBlock, { code: `<Icon name="success" color="var(--color-success)" />
<Icon name="warning" color="var(--color-warning)" />
<Icon name="error" color="var(--color-error)" />
<Icon name="info" color="var(--color-info)" />`, language: "tsx" })] })] }), _jsxs("section", { className: "navigation-icons-section", children: [_jsx("h2", { children: "Navigation Icons" }), _jsx("p", { children: "Icons commonly used for navigation and menu interactions." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: '1rem' }, children: navigationIcons.map((iconName) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem', padding: '1rem', border: '1px solid var(--color-border)', borderRadius: '0.5rem' }, children: [_jsx(Icon, { name: iconName, size: "md" }), _jsx("span", { style: { fontSize: '0.75rem', textAlign: 'center' }, children: iconName })] }, iconName))) }), _jsx(CodeBlock, { code: `<Icon name="hamburger" /> // Mobile menu
<Icon name="close" /> // Close button
<Icon name="arrow-left" /> // Back navigation
<Icon name="arrow-right" /> // Forward navigation
<Icon name="chevron-down" /> // Dropdown indicator
<Icon name="chevron-up" /> // Collapse indicator`, language: "tsx" })] })] }), _jsxs("section", { className: "action-icons-section", children: [_jsx("h2", { children: "Action Icons" }), _jsx("p", { children: "Icons for common user actions and interactions." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: '1rem' }, children: actionIcons.map((iconName) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem', padding: '1rem', border: '1px solid var(--color-border)', borderRadius: '0.5rem' }, children: [_jsx(Icon, { name: iconName, size: "md" }), _jsx("span", { style: { fontSize: '0.75rem', textAlign: 'center' }, children: iconName })] }, iconName))) }), _jsx(CodeBlock, { code: `<Icon name="search" /> // Search functionality
<Icon name="check" /> // Confirm/complete
<Icon name="plus" /> // Add/create
<Icon name="minus" /> // Remove/delete
<Icon name="play" /> // Start/play
<Icon name="pause" /> // Pause/stop
<Icon name="settings" /> // Settings/configuration`, language: "tsx" })] })] }), _jsxs("section", { className: "media-icons-section", children: [_jsx("h2", { children: "Media Icons" }), _jsx("p", { children: "Icons for media playback and audio controls." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: '1rem' }, children: mediaIcons.map((iconName) => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem', padding: '1rem', border: '1px solid var(--color-border)', borderRadius: '0.5rem' }, children: [_jsx(Icon, { name: iconName, size: "md" }), _jsx("span", { style: { fontSize: '0.75rem', textAlign: 'center' }, children: iconName })] }, iconName))) }), _jsx(CodeBlock, { code: `<Icon name="play" /> // Play media
<Icon name="pause" /> // Pause media
<Icon name="play-circle" /> // Play button
<Icon name="volume" /> // Volume control
<Icon name="volume-off" /> // Mute
<Icon name="volume-1" /> // Low volume
<Icon name="volume-2" /> // High volume`, language: "tsx" })] })] }), _jsxs("section", { className: "icon-buttons-section", children: [_jsx("h2", { children: "Icons in Buttons" }), _jsx("p", { children: "Use icons within buttons for better visual context." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Button, { variant: "primary", leftIcon: "search", size: "sm", children: "Search" }), _jsx(Button, { variant: "success", leftIcon: "check", size: "sm", children: "Save" }), _jsx(Button, { variant: "error", leftIcon: "close", size: "sm", children: "Delete" }), _jsx(Button, { variant: "secondary", rightIcon: "arrow-right", size: "sm", children: "Next" })] }), _jsx(CodeBlock, { code: `<Button variant="primary" leftIcon="search">
Search
</Button>
<Button variant="success" leftIcon="check">
Save
</Button>
<Button variant="error" leftIcon="close">
Delete
</Button>
<Button variant="secondary" rightIcon="arrow-right">
Next
</Button>`, language: "tsx" })] })] }), _jsxs("section", { className: "icon-cards-section", children: [_jsx("h2", { children: "Icons in Cards" }), _jsx("p", { children: "Use icons to enhance card content and visual hierarchy." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }, children: [_jsx(Card, { variant: "primary", style: "elevated", className: "icon-card", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem' }, children: [_jsx(Icon, { name: "user", size: "lg" }), _jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 0.5rem 0' }, children: "User Profile" }), _jsx("p", { style: { margin: 0, color: 'var(--color-text-secondary)' }, children: "Manage your account settings and preferences" })] })] }) }), _jsx(Card, { variant: "success", style: "elevated", className: "icon-card", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '1rem' }, children: [_jsx(Icon, { name: "check", size: "lg" }), _jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 0.5rem 0' }, children: "Task Complete" }), _jsx("p", { style: { margin: 0, color: 'var(--color-text-secondary)' }, children: "Your task has been successfully completed" })] })] }) })] }), _jsx(CodeBlock, { code: `<Card variant="primary">
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
<Icon name="user" size="lg" />
<div>
<h3>User Profile</h3>
<p>Manage your account settings</p>
</div>
</div>
</Card>`, language: "tsx" })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world examples of icon usage patterns." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Status Dashboard" }), _jsx("p", { children: "Icons for system status and monitoring." }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "System Status" }), _jsx(Icon, { name: "success", color: "var(--color-success)" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Database" }), _jsx(Icon, { name: "warning", color: "var(--color-warning)" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Network" }), _jsx(Icon, { name: "error", color: "var(--color-error)" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "File Browser" }), _jsx("p", { children: "Icons for file types and actions." }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "document.pdf" }), _jsx(Icon, { name: "file", size: "sm" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "image.jpg" }), _jsx(Icon, { name: "image", size: "sm" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "video.mp4" }), _jsx(Icon, { name: "video", size: "sm" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Settings Panel" }), _jsx("p", { children: "Icons for settings and configuration." }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Account Settings" }), _jsx(Icon, { name: "user", size: "sm" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Notifications" }), _jsx(Icon, { name: "bell", size: "sm" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Security" }), _jsx(Icon, { name: "lock", size: "sm" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Media Player" }), _jsx("p", { children: "Icons for media playback controls." }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', gap: '1rem', alignItems: 'center' }, children: [_jsx(Icon, { name: "skip-back", size: "md" }), _jsx(Icon, { name: "play", size: "lg" }), _jsx(Icon, { name: "skip-forward", size: "md" }), _jsx(Icon, { name: "volume", size: "sm" })] })] })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "name" }), _jsx("td", { children: "IconName" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Icon name from the icon library (required)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Icon size (xs, sm, md, lg, xl, xxl)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "color" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Custom color for the icon" })] }), _jsxs("tr", { children: [_jsx("td", { children: "className" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes" })] })] })] }) }) })] }), _jsxs("section", { className: "best-practices-section", children: [_jsx("h2", { children: "Best Practices" }), _jsxs("div", { className: "practices-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u2705 Do" }), _jsxs("ul", { children: [_jsx("li", { children: "Use consistent icon sizes within the same context" }), _jsx("li", { children: "Use semantic colors for different states" }), _jsx("li", { children: "Use icons to enhance, not replace, text" }), _jsx("li", { children: "Use appropriate sizes for the context" }), _jsx("li", { children: "Use icons consistently across your application" }), _jsx("li", { children: "Provide text alternatives for accessibility" }), _jsx("li", { children: "Use icons to improve visual hierarchy" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u274C Don't" }), _jsxs("ul", { children: [_jsx("li", { children: "Don't use icons without proper context" }), _jsx("li", { children: "Don't use too many different icon sizes" }), _jsx("li", { children: "Don't use icons as the only form of communication" }), _jsx("li", { children: "Don't use icons that are unclear or ambiguous" }), _jsx("li", { children: "Don't use icons inconsistently" }), _jsx("li", { children: "Don't use icons for decorative purposes only" }), _jsx("li", { children: "Don't use icons without proper contrast" })] })] })] })] }), _jsxs("section", { className: "complete-icon-list-section", children: [_jsx("h2", { children: "Complete Icon Library" }), _jsx("p", { children: "All available icons in alphabetical order. Click on any icon to copy its name." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "icon-library-card", children: [_jsx("div", { className: "icon-grid", style: {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
gap: '1rem',
maxHeight: '600px',
overflowY: 'auto',
padding: '1rem'
}, children: [
'activity', 'arrow-left', 'arrow-right', 'award', 'bell', 'book', 'briefcase',
'calendar', 'chat', 'check', 'check-circle', 'chevron-down', 'chevron-left',
'chevron-right', 'chevron-up', 'circle', 'close', 'components', 'copy', 'cpu',
'credit-card', 'dollar-sign', 'download', 'edit', 'error', 'external-link',
'eye', 'eye-off', 'euro', 'euro-sign', 'file', 'filter', 'flag', 'gift', 'globe', 'grid', 'hamburger',
'hard-drive', 'heart', 'home', 'image', 'info', 'lessons', 'link', 'list',
'lock', 'login', 'mail', 'map-pin', 'menu', 'message', 'minus', 'palette',
'pause', 'phone', 'play', 'play-circle', 'plus', 'refresh', 'responsive',
'search', 'settings', 'shield', 'shopping-cart', 'skip-back', 'skip-forward',
'spinner', 'star', 'status', 'success', 'tag', 'target', 'trending-down',
'trending-up', 'trash', 'truck', 'upload', 'user', 'users', 'video', 'volume',
'volume-off', 'volume-1', 'volume-2', 'warning', 'zap'
].sort().map((iconName) => (_jsxs("div", { style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '0.5rem',
padding: '1rem',
border: '1px solid var(--color-border)',
borderRadius: '0.5rem',
cursor: 'pointer',
transition: 'all 0.2s ease',
backgroundColor: 'var(--color-background)'
}, onClick: () => {
navigator.clipboard.writeText(iconName);
// You could add a toast notification here
}, onMouseEnter: (e) => {
e.currentTarget.style.backgroundColor = 'var(--color-background-hover)';
e.currentTarget.style.transform = 'translateY(-2px)';
}, onMouseLeave: (e) => {
e.currentTarget.style.backgroundColor = 'var(--color-background)';
e.currentTarget.style.transform = 'translateY(0)';
}, children: [_jsx(Icon, { name: iconName, size: "md" }), _jsx("span", { style: {
fontSize: '0.75rem',
textAlign: 'center',
color: 'var(--color-text-secondary)',
fontWeight: '500'
}, children: iconName })] }, iconName))) }), _jsx("div", { className: "code-block", style: { marginTop: '1rem' }, children: _jsx("code", { children: `// Total Icons Available: ${[
'activity', 'arrow-left', 'arrow-right', 'award', 'bell', 'book', 'briefcase',
'calendar', 'chat', 'check', 'check-circle', 'chevron-down', 'chevron-left',
'chevron-right', 'chevron-up', 'circle', 'close', 'components', 'copy', 'cpu',
'credit-card', 'dollar-sign', 'download', 'edit', 'error', 'external-link',
'eye', 'eye-off', 'euro', 'euro-sign', 'file', 'filter', 'flag', 'gift', 'globe', 'grid', 'hamburger',
'hard-drive', 'heart', 'home', 'image', 'info', 'lessons', 'link', 'list',
'lock', 'login', 'mail', 'map-pin', 'menu', 'message', 'minus', 'palette',
'pause', 'phone', 'play', 'play-circle', 'plus', 'refresh', 'responsive',
'search', 'settings', 'shield', 'shopping-cart', 'skip-back', 'skip-forward',
'spinner', 'star', 'status', 'success', 'tag', 'target', 'trending-down',
'trending-up', 'trash', 'truck', 'upload', 'user', 'users', 'video', 'volume',
'volume-off', 'volume-1', 'volume-2', 'warning', 'zap'
].length} icons
// Usage example:
<Icon name="search" size="md" />
<Icon name="check" size="lg" color="var(--color-success)" />
<Icon name="arrow-left" size="sm" />` }) })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Icon component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA attributes for icon roles" }), _jsx("li", { children: "Screen reader support with aria-label" }), _jsx("li", { children: "High contrast support for all colors" }), _jsx("li", { children: "Scalable vector graphics (SVG)" }), _jsx("li", { children: "Consistent sizing for touch targets" }), _jsx("li", { children: "Semantic color usage for different states" })] })] })] })] }) }));
};
export default IconDocumentation;