Claude
0cff3902b2
Pricing shows no plans, prices or free trial until decided. Docs search and articles without pages are shown but not linked. Disables the agent file that next dev generates. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014SdXCbrN5PtGExkpvMaMHx
19 lines
1.1 KiB
TypeScript
19 lines
1.1 KiB
TypeScript
import type { CSSProperties } from 'react';
|
|
|
|
export type IconName =
|
|
| 'activity' | 'arrow-right' | 'bell' | 'board' | 'check' | 'camera' | 'check-circle' | 'chevron-down' | 'chevron-right' | 'chevron-up' | 'clock' | 'close' | 'credit-card' | 'dots'
|
|
| 'eye' | 'globe' | 'help' | 'home' | 'key' | 'list' | 'loader' | 'lock' | 'menu' | 'mic' | 'monitor' | 'paperclip'
|
|
| 'pencil' | 'plug' | 'plus' | 'pointer' | 'refresh' | 'rocket' | 'search' | 'shield-check' | 'sidebar' | 'sliders'
|
|
| 'shield' | 'smartphone' | 'sparkles' | 'split' | 'stop' | 'undo' | 'user' | 'x';
|
|
|
|
type Props = { name: IconName; size?: number; className?: string };
|
|
|
|
/**
|
|
* Draws a single-colour Figma icon (public/icons) with a CSS mask, so its colour is the
|
|
* text colour of the surrounding element and follows the theme. The SVG is the exact Figma export.
|
|
*/
|
|
export function Icon({ name, size = 16, className }: Props) {
|
|
const style = { '--icon-src': `url(/icons/${name}.svg)`, width: size, height: size } as CSSProperties;
|
|
return <span aria-hidden="true" className={['icon', className].filter(Boolean).join(' ')} style={style} />;
|
|
}
|