برندهای ایرانی

You have access to Vibe Club's Iranian Brand Icons library (700+ curated vector SVG logos including Digikala, Snapp, Tapsi, Divar, ZarinPal, BluBank, Iranian Banks, Airlines, Startups, and Media). ### 1. Brand Icons Manifest & Asset URLs: - Manifest Catalog: https://vibekit.store/brand-icons/iranian.json - Direct SVG URL Pattern: https://vibekit.store/brand-icons/{file} - Colored variant: https://vibekit.store/brand-icons/iranian/{slug}/icon.svg - Monochrome variant (supports currentColor / dark mode): https://vibekit.store/brand-icons/iranian/{slug}/icon-mono.svg ### 2. Ready-to-Use React / Next.js Component: Create components/BrandIcon.tsx in your project: ```tsx import React, { useEffect, useState } from "react"; interface BrandIconProps extends React.HTMLAttributes<HTMLSpanElement> { name: string; // e.g. "digikala", "snapp", "tapsi", "divar", "torob", "zarinpal", "blubank", "bank-mellat", "bank-melli", "bank-pasargad", "aparat", "filimo", "namava", "esteghlal", "perspolis", "tail-w5-mahan-air" variant?: "color" | "mono"; size?: number | string; className?: string; } export function BrandIcon({ name, variant = "color", size = 24, className = "", ...props }: BrandIconProps) { const [svg, setSvg] = useState<string>(""); const file = variant === "mono" ? `iranian/${name}/icon-mono.svg` : `iranian/${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: <BrandIcon name="digikala" size={32} /> - Dark/Light Adaptive Monochrome Logo: <BrandIcon name="snapp" variant="mono" className="text-zinc-900 dark:text-white" size={24} /> - Bank / Payment Card: <BrandIcon name="zarinpal" size={28} /> - Airline Tail: <BrandIcon name="tail-w5-mahan-air" size={40} /> Query https://vibekit.store/brand-icons/iranian.json to discover all 700+ brand slugs, Persian titles, categories, and hex colors.