{"id":30503084,"url":"https://github.com/shokks/logocn","last_synced_at":"2025-08-28T15:07:58.955Z","repository":{"id":311157740,"uuid":"1042626104","full_name":"shokks/logocn","owner":"shokks","description":"Add SVG logos to your project with a single command. Like shadcn/ui, but for logos.","archived":false,"fork":false,"pushed_at":"2025-08-26T09:34:51.000Z","size":4449,"stargazers_count":5,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-26T14:04:40.667Z","etag":null,"topics":["cli","developer-tools","icons","logos","shadcn","shadcn-ui","svg","teact","type"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shokks.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-22T10:07:31.000Z","updated_at":"2025-08-26T10:47:11.000Z","dependencies_parsed_at":"2025-08-26T13:02:24.216Z","dependency_job_id":null,"html_url":"https://github.com/shokks/logocn","commit_stats":null,"previous_names":["shokks/logocn"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/shokks/logocn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shokks%2Flogocn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shokks%2Flogocn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shokks%2Flogocn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shokks%2Flogocn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shokks","download_url":"https://codeload.github.com/shokks/logocn/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shokks%2Flogocn/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272338415,"owners_count":24916969,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-27T02:00:09.397Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","developer-tools","icons","logos","shadcn","shadcn-ui","svg","teact","type"],"created_at":"2025-08-25T12:29:33.835Z","updated_at":"2025-08-28T15:07:58.942Z","avatar_url":"https://github.com/shokks.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# logoCN\n\n![logoCN - Add logo components to your project with a single command](https://raw.githubusercontent.com/shokks/logocn/main/public/og.png)\n\nAdd production-ready logo components to your project. Just like shadcn/ui, but for logos.\n\n```bash\nnpx logocn@latest init        # One-time setup\nnpx logocn@latest add tesla   # Add components\n```\n\n[![npm version](https://img.shields.io/npm/v/logocn.svg)](https://www.npmjs.com/package/logocn)\n[![Follow on X](https://img.shields.io/twitter/follow/5aikat?style=social)](https://x.com/5aikat)\n\n## What is this?\n\n**logoCN** lets you add any of 3,300+ logo components to your project with a single command. No packages to install. No dependencies. Just copy and paste.\n\n- ✓ **React components** with TypeScript support and brand colors\n- ✓ **Zero dependencies** - components are added directly to your project\n- ✓ **Brand colors** included as default props\n- ✓ **SVG files** also included for use in any framework\n- ✓ **Works everywhere** - optimized for React/Next.js, compatible with all frameworks\n\n## Quick Start\n\n### For React/Next.js Projects\n\n```bash\n# Initialize LogoCN (one-time setup)\nnpx logocn@latest init\n\n# Add logo components\nnpx logocn@latest add apple google microsoft\n```\n\nNow import and use:\n\n```jsx\nimport { AppleLogo, GoogleLogo, MicrosoftLogo } from '@/components/logos'\n\n\u003cAppleLogo size={48} /\u003e        // Uses Apple's brand color\n\u003cGoogleLogo className=\"w-8\" /\u003e  // With Tailwind\n\u003cMicrosoftLogo color=\"#fff\" /\u003e // Custom color\n```\n\n**Note:** If you've already added logos before running `init`, the init command will automatically generate components for all existing logos.\n\n### For Other Frameworks\n\n```bash\n# Add logos as SVG files (no init needed)\nnpx logocn@latest add apple google microsoft\n```\n\nSVG files will be saved to `components/logos/` for use in Vue, Angular, Svelte, or vanilla HTML.\n\n## Usage\n\n### React Components\n\n```jsx\nimport { GithubLogo, AppleLogo } from '@/components/logos'\n\n// Default size and brand color\n\u003cGithubLogo /\u003e\n\n// Custom size\n\u003cAppleLogo size={48} /\u003e\n\n// Custom color\n\u003cGithubLogo color=\"#fff\" /\u003e\n\n// Tailwind classes\n\u003cAppleLogo className=\"w-8 h-8 text-slate-900\" /\u003e\n```\n\n### SVG Files\n\n```jsx\n// React/Next.js\nimport logo from './components/logos/github.svg'\n\u003cimg src={logo} alt=\"GitHub\" /\u003e\n\n// Vue\n\u003ctemplate\u003e\n  \u003cimg src=\"@/components/logos/github.svg\" alt=\"GitHub\" /\u003e\n\u003c/template\u003e\n\n// HTML\n\u003cimg src=\"components/logos/github.svg\" alt=\"GitHub\" /\u003e\n```\n\n### All Props\n\n- `size` - Width and height (number or string)\n- `color` - Fill color (defaults to brand color)\n- `width` / `height` - Individual dimensions\n- `className` - CSS classes\n- All standard SVG props\n\n## Examples\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eNext.js App\u003c/strong\u003e\u003c/summary\u003e\n\n```bash\n# Initialize and add logos\nnpx logocn@latest init\nnpx logocn@latest add github twitter linkedin\n```\n\n```jsx\n// app/page.tsx\nimport { GithubLogo, TwitterLogo, LinkedinLogo } from '@/components/logos'\n\nexport default function Home() {\n  return (\n    \u003cfooter className=\"flex gap-4\"\u003e\n      \u003cGithubLogo size={20} /\u003e      {/* GitHub's brand color */}\n      \u003cTwitterLogo size={20} /\u003e      {/* Twitter's brand color */}\n      \u003cLinkedinLogo size={20} /\u003e     {/* LinkedIn's brand color */}\n    \u003c/footer\u003e\n  )\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCompany Logos Section\u003c/strong\u003e\u003c/summary\u003e\n\n```jsx\nimport { AppleLogo, GoogleLogo, MicrosoftLogo } from '@/components/logos'\n\nconst companies = [\n  { name: 'Apple', Logo: AppleLogo },\n  { name: 'Google', Logo: GoogleLogo },\n  { name: 'Microsoft', Logo: MicrosoftLogo },\n]\n\nexport function TrustedBy() {\n  return (\n    \u003cdiv className=\"flex gap-12 items-center opacity-60\"\u003e\n      {companies.map(({ name, Logo }) =\u003e (\n        \u003cLogo key={name} size={48} /\u003e\n      ))}\n    \u003c/div\u003e\n  )\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003ePayment Methods\u003c/strong\u003e\u003c/summary\u003e\n\n```jsx\nimport { VisaLogo, MastercardLogo, PaypalLogo } from '@/components/logos'\n\nexport function PaymentMethods() {\n  return (\n    \u003c\u003e\n      \u003cVisaLogo size={40} /\u003e\n      \u003cMastercardLogo size={40} /\u003e\n      \u003cPaypalLogo size={40} /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eWith TypeScript\u003c/strong\u003e\u003c/summary\u003e\n\n```tsx\nimport { type FC } from 'react'\nimport { GithubLogo, LinkedinLogo } from '@/components/logos'\n\nconst logoMap = {\n  github: GithubLogo,\n  linkedin: LinkedinLogo,\n} as const\n\ninterface SocialLinkProps {\n  platform: keyof typeof logoMap\n  size?: number\n}\n\nexport const SocialLink: FC\u003cSocialLinkProps\u003e = ({ platform, size = 24 }) =\u003e {\n  const Logo = logoMap[platform]\n  return \u003cLogo size={size} /\u003e\n}\n```\n\u003c/details\u003e\n\n## Available Logos\n\n3,300+ logos from [Simple Icons](https://simpleicons.org) including:\n\n**Tech:** Apple, Google, Microsoft, Amazon, Tesla, OpenAI, Meta  \n**Dev Tools:** GitHub, GitLab, VS Code, Figma, Vercel, Netlify  \n**Languages:** JavaScript, TypeScript, Python, Go, Rust, Swift  \n**Frameworks:** React, Vue, Angular, Next.js, Nuxt, Svelte  \n**Databases:** PostgreSQL, MongoDB, MySQL, Redis, Supabase  \n**Payment:** Stripe, PayPal, Square, Visa, Mastercard  \n**Social:** Twitter/X, LinkedIn, Discord, Slack, Reddit  \n\n```bash\n# See all available logos\nnpx logocn@latest list\n\n# Search for specific logos\nnpx logocn@latest search database\n```\n\n## Commands\n\n### Essential Commands\n\n```bash\nnpx logocn@latest add [logos...]    # Add logos to your project\nnpx logocn@latest remove [logos...]  # Remove logos\nnpx logocn@latest search \u003cquery\u003e     # Find logos\nnpx logocn@latest list               # Browse all logos\n```\n\n### Setup \u0026 Config\n\n```bash\nnpx logocn@latest init               # Set up React components\nnpx logocn@latest config             # View/change settings\nnpx logocn@latest uninstall          # Clean up LogoCN\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eAll Command Options\u003c/strong\u003e\u003c/summary\u003e\n\n#### `init`\n```bash\nlogocn init --force           # Reinitialize\nlogocn init --skip-install    # Skip dependency installation\nlogocn init --yes            # Accept all defaults\n```\n\n#### `add`\n```bash\nlogocn add tesla              # Add single logo\nlogocn add apple google       # Add multiple\nlogocn add                    # Interactive mode\nlogocn add tesla --keep-svgs  # Keep SVG files after generating components\n```\n\n#### `config`\n```bash\nlogocn config --list                    # Show all settings\nlogocn config --get logoDirectory       # Get specific value\nlogocn config --set dir=./public/logos  # Change directory\nlogocn config --set keepSvgs=false      # Remove SVGs after component generation\nlogocn config --reset                   # Reset to defaults\n```\n\n#### `list`\n```bash\nlogocn list --page 2          # View specific page\nlogocn list --search meta     # Filter results\n```\n\n#### `uninstall`\n```bash\nlogocn uninstall --yes        # Skip confirmation\nlogocn uninstall --keep-logos # Keep SVG files\n```\n\u003c/details\u003e\n\n## FAQ\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eWhere are logos saved?\u003c/strong\u003e\u003c/summary\u003e\n\nBy default in `components/logos/`. Run `logocn init` to auto-detect the best location for your framework, or use `logocn config --set dir=./your/path` to customize.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eDo I need to install LogoCN?\u003c/strong\u003e\u003c/summary\u003e\n\nNo! Just use `npx logocn@latest`. If you prefer, you can install globally with `npm i -g logocn`.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eHow do React components work?\u003c/strong\u003e\u003c/summary\u003e\n\nRun `logocn init` once to enable component generation. After that, every logo you add creates a ready-to-use React component with TypeScript types and brand colors built in.\n\nIf you've already added logos before initialization, `init` will generate components for all existing logos automatically.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eWhat about logos starting with numbers?\u003c/strong\u003e\u003c/summary\u003e\n\nLogos like \"1password\" become `Lcn1passwordLogo` components (prefixed with \"Lcn\") to be valid JavaScript identifiers.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCan I remove SVG files after generating components?\u003c/strong\u003e\u003c/summary\u003e\n\nYes! By default, LogoCN removes the original SVG files after generating React components to save space. The components contain all the SVG data inline. You can control this behavior:\n\n- During init: You'll be asked if you want to keep original SVG files\n- Via config: `logocn config --set keepSvgs=true` to keep SVGs\n- Per command: `logocn add tesla --keep-svgs` to keep SVGs for that operation\n\nThis helps reduce bundle size since the component already contains the full SVG.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eCan I use this with Vue/Angular/etc?\u003c/strong\u003e\u003c/summary\u003e\n\nYes! While LogoCN is optimized for React/Next.js component generation, it also saves standard SVG files that work in any framework. Simply skip the `init` step and use `add` to get SVG files directly.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eLogo not found?\u003c/strong\u003e\u003c/summary\u003e\n\nTry: `logocn search [partial-name]` to find the exact name, or `logocn update` to refresh the logo cache.\n\u003c/details\u003e\n\n## Installation\n\nWhile `npx logocn@latest` is recommended, you can also install globally:\n\n```bash\n# npm\nnpm install -g logocn\n\n# pnpm  \npnpm add -g logocn\n\n# yarn\nyarn global add logocn\n```\n\n## Privacy \u0026 Telemetry\n\nLogoCN collects anonymous usage telemetry to help improve the tool. This data helps us understand which logos are popular, what users are searching for, and how to make LogoCN better.\n\n### What we collect:\n- **Logo usage**: Which logos are installed successfully vs which are missing\n- **Search patterns**: What users search for and whether results were found\n- **Framework detection**: Which frameworks are using LogoCN\n- **Command metrics**: Success rates and performance of commands\n- **Version**: CLI version for compatibility tracking\n\n### What we DON'T collect:\n- No personal information\n- No project details or code\n- No file paths or directory structures\n- No authentication tokens or credentials\n- No IP addresses or location data\n\n### Opting out:\nTelemetry is completely optional and can be disabled in several ways:\n\n```bash\n# Environment variable (recommended for CI/CD)\nexport LOGOCN_TELEMETRY=0\n\n# Command line flag\nnpx logocn@latest add apple --no-telemetry\n\n# Respect DO_NOT_TRACK standard\nexport DO_NOT_TRACK=1\n```\n\nTelemetry is automatically disabled in CI environments (when `CI=true` is set).\n\nTo check telemetry status:\n```bash\nnpx logocn@latest config\n```\n\n## License\n\nMIT © [@5aikat](https://x.com/5aikat)\n\n\u003e **Note**: All logos are trademarks of their respective companies. Please ensure you have permission to use them in your project.\n\n---\n\n\u003csub\u003eLogo source: [Simple Icons](https://simpleicons.org) • Inspired by [shadcn/ui](https://ui.shadcn.com)\u003c/sub\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshokks%2Flogocn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshokks%2Flogocn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshokks%2Flogocn/lists"}