Open MCP

import { Tag } from "lucide-react"; import type { SVGProps } from "react" import React from "react"; import { SvgSprite } from "@/components/svg-sprite"; export function OpenMCPLogo(props: SVGProps<SVGSVGElement>) { return ( <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props} > <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" /> <circle cx="12" cy="12" r="4" /> <line x1="3" y1="8" x2="8" y2="10.5" /> <line x1="21" y1="8" x2="16" y2="10.5" /> <line x1="3" y1="16" x2="8" y2="13.5" /> <line x1="21" y1="16" x2="16" y2="13.5" /> </svg> ) } export function OpenMCPStudioLogo(props: SVGProps<SVGSVGElement>) { return ( <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props} > <path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z" /> </svg> ) } export function ClientIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect> <line x1="8" y1="21" x2="16" y2="21"></line> <line x1="12" y1="17" x2="12" y2="21"></line> </svg> ) } export function ServerIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect> <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect> <line x1="6" y1="6" x2="6.01" y2="6"></line> <line x1="6" y1="18" x2="6.01" y2="18"></line> </svg> ) } export function ApplicationIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <polyline points="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> <line x1="12" y1="2" x2="12" y2="22"></line> </svg> ) } export function HomeIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg> ) } export function StarIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> ) } export function GitForkIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <circle cx="12" cy="18" r="3"></circle> <circle cx="6" cy="6" r="3"></circle> <circle cx="18" cy="6" r="3"></circle> <path d="M18 9v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9"></path> <path d="M12 12v6"></path> </svg> ) } export function CodeIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <polyline points="16 18 22 12 16 6"></polyline> <polyline points="8 6 2 12 8 18"></polyline> </svg> ) } export function CalendarIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect> <line x1="16" y1="2" x2="16" y2="6"></line> <line x1="8" y1="2" x2="8" y2="6"></line> <line x1="3" y1="10" x2="21" y2="10"></line> </svg> ) } export function VerifiedIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path> <polyline points="22 4 12 14.01 9 11.01"></polyline> </svg> ) } export function FeaturedIcon({ className = "w-6 h-6" }) { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" > <circle cx="12" cy="12" r="10"></circle> <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path> <line x1="12" y1="17" x2="12.01" y2="17"></line> </svg> ) } type IconProps = React.SVGProps<SVGSVGElement> & { size?: number; }; // For a maximum flexibility, we export each available icon as a separate component. // The default size (16px) is sometimes overridden by the `size` prop, // it's useful for Sun and Moon icons that have a viewVBox of 24px. export const ChevronDownIcon = (props: IconProps) => ( <SvgSprite id="chevron-down-icon" {...props} /> ); export const ChevronLeftIcon = (props: IconProps) => ( <SvgSprite id="chevron-left-icon" {...props} /> ); export const ChevronRightIcon = (props: IconProps) => ( <SvgSprite id="chevron-right-icon" {...props} /> ); export const DiscordIcon = (props: IconProps) => ( <SvgSprite id="discord-icon" {...props} /> ); export const ExternalLinkIcon = (props: IconProps) => ( <SvgSprite id="external-link-icon" {...props} /> ); export const GitHubIcon = (props: IconProps) => ( <SvgSprite id="github-icon" {...props} /> ); export const HamburgerMenuIcon = (props: IconProps) => ( <SvgSprite id="hamburger-menu-icon" {...props} /> ); export const MoonIcon = (props: IconProps) => ( <SvgSprite id="moon-icon" size={24} {...props} /> ); export const PlusIcon = (props: IconProps) => ( <SvgSprite id="plus-icon" {...props} /> ); export const SearchIcon = (props: IconProps) => ( <SvgSprite id="search-icon" {...props} /> ); export const StarsIcon = (props: IconProps) => ( <SvgSprite id="star-icon" {...props} /> ); export const SunIcon = (props: IconProps) => ( <SvgSprite id="sun-icon" size={24} {...props} /> ); export const TagIcon = (props: IconProps) => ( // <SvgSprite id="tag-icon" {...props} /> <Tag {...props} /> ); export const TagsIcons = (props: IconProps) => ( <SvgSprite id="tags-icon" {...props} /> ); export const XMarkIcon = (props: IconProps) => ( <SvgSprite id="x-mark-icon" {...props} /> ); export function NpmIcon({ className }: { className?: string }) { return ( <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className={className} fill="currentColor" > <title>npm</title> <path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" color="currentColor" /> </svg> ); }