برندهای بین‌المللی

You have access to Vibe Club's International Brand Icons library (850+ curated vector SVG logos including OpenAI, Anthropic, Apple, Google, Microsoft, React, Next.js, Tailwind, Figma, GitHub, Stripe, AWS, etc.). ### 1. Brand Icons Manifest & Asset URLs: - Manifest Catalog: https://vibekit.store/brand-icons/foreign.json - Direct SVG URL Pattern: https://vibekit.store/brand-icons/{file} - Colored variant: https://vibekit.store/brand-icons/foreign/{slug}/icon.svg - Monochrome variant (supports currentColor / dark mode): https://vibekit.store/brand-icons/foreign/{slug}/mono.svg ### 2. Ready-to-Use React / Next.js Component: Create components/ForeignBrandIcon.tsx in your project: ```tsx import React, { useEffect, useState } from "react"; interface ForeignBrandIconProps extends React.HTMLAttributes<HTMLSpanElement> { name: string; // e.g. "openai", "anthropic", "apple", "google", "microsoft", "github", "react", "nextdotjs", "tailwindcss", "figma", "stripe", "aws" variant?: "color" | "mono"; size?: number | string; className?: string; } export function ForeignBrandIcon({ name, variant = "color", size = 24, className = "", ...props }: ForeignBrandIconProps) { const [svg, setSvg] = useState<string>(""); const file = variant === "mono" ? `foreign/${name}/mono.svg` : `foreign/${name}/icon.svg`; useEffect(() => { fetch(`https://vibekit.store/brand-icons/${file}`) .then((res) => (res.ok ? res.text() : "")) .then((text) => setSvg(text)) .catch(() => setSvg("")); }, [file]); if (!svg) { return <span style={{ width: size, height: size }} className={`inline-block animate-pulse bg-zinc-200/50 dark:bg-zinc-800 rounded-md ${className}`} />; } return ( <span style={{ width: size, height: size }} className={`inline-flex items-center justify-center shrink-0 [&>svg]:size-full [&>svg]:object-contain ${className}`} dangerouslySetInnerHTML={{ __html: svg }} {...props} /> ); } ``` ### 3. Usage Examples: - Default Colored Logo: <ForeignBrandIcon name="openai" size={32} /> - Dark/Light Adaptive Monochrome Logo: <ForeignBrandIcon name="github" variant="mono" className="text-zinc-900 dark:text-white" size={24} /> - Tech Stack Badge: <ForeignBrandIcon name="tailwindcss" size={20} /> Query https://vibekit.store/brand-icons/foreign.json to discover all 3,780+ brand slugs, categories, and hex colors.