react-car-logo 0.2.2 → 1.0.0

package/README.md

@@ -1,6 +1,6 @@
 # react-car-logo
 
-PNG logo components for the top 50 exotic & luxury car brands. React & React Native compatible. Tree-shakeable. TypeScript.
+PNG logo components for 40 exotic & luxury car brands. One component, pass the make as a slug. React & React Native compatible. TypeScript.
 
 ## Installation
 
@@ -11,63 +11,63 @@ npm install react-car-logo
 ## Quick Start
 
 ```tsx
-import { Ferrari, McLaren } from 'react-car-logo';
-
-// Or tree-shaken single import:
-import Ferrari from 'react-car-logo/logos/Ferrari';
-
-<Ferrari size="md" />           // 160px (default)
-<Ferrari size="sm" />           // 80px
-<Ferrari size="lg" />           // 320px
-<Ferrari width={240} />         // custom override
-<Ferrari alt="Ferrari Logo" />  // accessible alt
+import { ReactCarLogo } from 'react-car-logo';
+
+<ReactCarLogo name="ferrari" />              // 160px (default)
+<ReactCarLogo name="ferrari" size="icon" />   // 32px
+<ReactCarLogo name="ferrari" size="sm" />     // 80px
+<ReactCarLogo name="ferrari" size="lg" />     // 320px
+<ReactCarLogo name="ferrari" width={240} />   // custom override
+<ReactCarLogo name="ferrari" alt="Logo" />    // accessible alt
 ```
 
 ## Size Presets
 
-| Prop value  | Renders at | Fetches PNG | Best for                |
-| ----------- | ---------- | ----------- | ----------------------- |
-| `size="sm"` | 80px       | 160px (2x)  | Nav, tables, thumbnails |
-| `size="md"` | 160px      | 320px (2x)  | Cards, lists (default)  |
-| `size="lg"` | 320px      | 640px (2x)  | Hero, detail views      |
-| `width={N}` | Npx        | 640px       | Any custom size         |
+| Prop value    | Renders at | Best for                     |
+| ------------- | ---------- | ---------------------------- |
+| `size="icon"` | 32px       | Inline icons, small UI       |
+| `size="sm"`   | 80px       | Nav, tables, thumbnails      |
+| `size="md"`   | 160px      | Cards, lists (default)       |
+| `size="lg"`   | 320px      | Hero, detail views           |
+| `width={N}`   | Npx        | Any custom size              |
 
 ## Props
 
-| Prop        | Type                    | Default    | Description                                      |
-| ----------- | ----------------------- | ---------- | ------------------------------------------------ |
-| `size`      | `'sm' \| 'md' \| 'lg'` | `'md'`     | Size preset                                      |
-| `width`     | `number`                | --         | Custom width in px (overrides size)              |
-| `height`    | `number`                | --         | Custom height in px (overrides size)             |
-| `alt`       | `string`                | brand name | Accessible alt text                              |
-| `loading`   | `'lazy' \| 'eager'`    | `'lazy'`   | Native loading strategy                          |
-| `className` | `string`                | --         | CSS class(es)                                    |
-| `style`     | `CSSProperties`         | --         | Inline styles (merged with `objectFit: contain`) |
-| `...rest`   | `ImgHTMLAttributes`     | --         | Any standard `<img>` attribute                   |
+| Prop        | Type                                | Default    | Description                                      |
+| ----------- | ----------------------------------- | ---------- | ------------------------------------------------ |
+| `name`      | `BrandName`                         | (required) | Brand slug, e.g. `"ferrari"`, `"rolls-royce"`    |
+| `size`      | `'icon' \| 'sm' \| 'md' \| 'lg'`   | `'md'`     | Size preset                                      |
+| `width`     | `number`                            | --         | Custom width in px (overrides size)              |
+| `height`    | `number`                            | --         | Custom height in px (overrides size)             |
+| `alt`       | `string`                            | brand name | Accessible alt text                              |
+| `loading`   | `'lazy' \| 'eager'`                | `'lazy'`   | Native loading strategy                          |
+| `className` | `string`                            | --         | CSS class(es)                                    |
+| `style`     | `CSSProperties`                     | --         | Inline styles (merged with `objectFit: contain`) |
+| `...rest`   | `ImgHTMLAttributes`                 | --         | Any standard `<img>` attribute                   |
 
 ## Brand Metadata
 
-Each brand exports a `meta` object alongside the component:
+Access metadata for any brand via the `brands` registry:
 
 ```tsx
-import { FerrariMeta } from 'react-car-logo';
+import { brands } from 'react-car-logo';
 
-console.log(FerrariMeta.title);   // "Ferrari"
-console.log(FerrariMeta.country); // "Italy"
-console.log(FerrariMeta.hex);     // "CD212A"
-console.log(FerrariMeta.founded); // 1939
+console.log(brands.ferrari.title);   // "Ferrari"
+console.log(brands.ferrari.country); // "Italy"
+console.log(brands.ferrari.hex);     // "CD212A"
+console.log(brands.ferrari.founded); // 1939
 ```
 
 ## Dynamic Rendering
 
-For rendering logos from string keys:
+Pass any slug string to render logos dynamically -- perfect for data-driven UIs:
 
 ```tsx
-import * as CarLogos from 'react-car-logo/allLogos';
+import { ReactCarLogo } from 'react-car-logo';
+import type { BrandName } from 'react-car-logo';
 
-const brandName = 'Ferrari';
-const Logo = CarLogos[brandName as keyof typeof CarLogos];
-<Logo size="md" />;
+const make = 'ferrari' as BrandName;
+<ReactCarLogo name={make} size="md" />;
 ```
 
 ## React Native
@@ -76,26 +76,26 @@ Use the metadata `pngUrl` with React Native's `Image`:
 
 ```tsx
 import { Image } from 'react-native';
-import { FerrariMeta } from 'react-car-logo';
+import { brands } from 'react-car-logo';
 
-<Image source={{ uri: FerrariMeta.pngUrl }} style={{ width: 160, height: 160 }} />;
+<Image source={{ uri: brands.ferrari.pngUrl }} style={{ width: 160, height: 160 }} />;
 ```
 
-## All 50 Brands
+## All 40 Brands
 
-**Italian:** Ferrari, Lamborghini, Maserati, Alfa Romeo, Pagani, De Tomaso, Pininfarina, Dallara, Abarth, Italdesign
+**Italian:** Ferrari, Lamborghini, Maserati, Alfa Romeo, Pagani, De Tomaso, Pininfarina, Abarth
 
-**German:** Porsche, BMW, Mercedes-AMG, Brabus, Audi, Maybach, RUF, Gumpert, Apollo
+**German:** Porsche, BMW, Mercedes-AMG, Brabus, Audi, Maybach, Gumpert
 
-**British:** McLaren, Bentley, Rolls-Royce, Aston Martin, Lotus, Jaguar, Noble, TVR, Radical, Arash, Lister
+**British:** McLaren, Bentley, Rolls-Royce, Aston Martin, Lotus, Jaguar, TVR, Radical, Arash
 
 **French:** Bugatti, Alpine
 
-**American:** Shelby, Dodge, Chevrolet, Ford, Saleen, Hennessey, SSC, Mosler, Czinger, Glickenhaus
+**American:** Shelby, Dodge, Chevrolet, Ford, Saleen, Hennessey, SSC, Mosler
 
 **Swedish:** Koenigsegg, Polestar
 
-**Other:** Rimac (Croatia), Zenvo (Denmark), Spyker (Netherlands), W Motors (UAE), Lykan (UAE), Icona (Italy)
+**Other:** Rimac (Croatia), Zenvo (Denmark), Spyker (Netherlands), W Motors (UAE)
 
 ## Legal
 

package/dist/ReactCarLogo.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ReactCarLogoProps } from "./types";
+export declare const ReactCarLogo: React.FC<ReactCarLogoProps>;
+export default ReactCarLogo;

package/dist/allLogos.d.ts

@@ -1,40 +1 @@
-export { Abarth } from "./logos/Abarth";
-export { AlfaRomeo } from "./logos/AlfaRomeo";
-export { Alpine } from "./logos/Alpine";
-export { Arash } from "./logos/Arash";
-export { AstonMartin } from "./logos/AstonMartin";
-export { Audi } from "./logos/Audi";
-export { Bentley } from "./logos/Bentley";
-export { BMW } from "./logos/BMW";
-export { Brabus } from "./logos/Brabus";
-export { Bugatti } from "./logos/Bugatti";
-export { Chevrolet } from "./logos/Chevrolet";
-export { DeTomaso } from "./logos/DeTomaso";
-export { Dodge } from "./logos/Dodge";
-export { Ferrari } from "./logos/Ferrari";
-export { Ford } from "./logos/Ford";
-export { Gumpert } from "./logos/Gumpert";
-export { Hennessey } from "./logos/Hennessey";
-export { Jaguar } from "./logos/Jaguar";
-export { Koenigsegg } from "./logos/Koenigsegg";
-export { Lamborghini } from "./logos/Lamborghini";
-export { Lotus } from "./logos/Lotus";
-export { Maserati } from "./logos/Maserati";
-export { Maybach } from "./logos/Maybach";
-export { McLaren } from "./logos/McLaren";
-export { MercedesAMG } from "./logos/MercedesAMG";
-export { Mosler } from "./logos/Mosler";
-export { Pagani } from "./logos/Pagani";
-export { Pininfarina } from "./logos/Pininfarina";
-export { Polestar } from "./logos/Polestar";
-export { Porsche } from "./logos/Porsche";
-export { Radical } from "./logos/Radical";
-export { Rimac } from "./logos/Rimac";
-export { RollsRoyce } from "./logos/RollsRoyce";
-export { Saleen } from "./logos/Saleen";
-export { Shelby } from "./logos/Shelby";
-export { Spyker } from "./logos/Spyker";
-export { SSC } from "./logos/SSC";
-export { TVR } from "./logos/TVR";
-export { WMotors } from "./logos/WMotors";
-export { Zenvo } from "./logos/Zenvo";
+export { ReactCarLogo, brands } from "./index";

package/dist/brands.d.ts

@@ -0,0 +1,2 @@
+import type { CarLogoMeta, BrandName } from "./types";
+export declare const brands: Record<BrandName, CarLogoMeta>;

package/dist/index.d.ts

@@ -1,42 +1,4 @@
-export { Abarth, meta as AbarthMeta } from "./logos/Abarth";
-export { AlfaRomeo, meta as AlfaRomeoMeta } from "./logos/AlfaRomeo";
-export { Alpine, meta as AlpineMeta } from "./logos/Alpine";
-export { Arash, meta as ArashMeta } from "./logos/Arash";
-export { AstonMartin, meta as AstonMartinMeta } from "./logos/AstonMartin";
-export { Audi, meta as AudiMeta } from "./logos/Audi";
-export { Bentley, meta as BentleyMeta } from "./logos/Bentley";
-export { BMW, meta as BMWMeta } from "./logos/BMW";
-export { Brabus, meta as BrabusMeta } from "./logos/Brabus";
-export { Bugatti, meta as BugattiMeta } from "./logos/Bugatti";
-export { Chevrolet, meta as ChevroletMeta } from "./logos/Chevrolet";
-export { DeTomaso, meta as DeTomasoMeta } from "./logos/DeTomaso";
-export { Dodge, meta as DodgeMeta } from "./logos/Dodge";
-export { Ferrari, meta as FerrariMeta } from "./logos/Ferrari";
-export { Ford, meta as FordMeta } from "./logos/Ford";
-export { Gumpert, meta as GumpertMeta } from "./logos/Gumpert";
-export { Hennessey, meta as HennesseyMeta } from "./logos/Hennessey";
-export { Jaguar, meta as JaguarMeta } from "./logos/Jaguar";
-export { Koenigsegg, meta as KoenigseggMeta } from "./logos/Koenigsegg";
-export { Lamborghini, meta as LamborghiniMeta } from "./logos/Lamborghini";
-export { Lotus, meta as LotusMeta } from "./logos/Lotus";
-export { Maserati, meta as MaseratiMeta } from "./logos/Maserati";
-export { Maybach, meta as MaybachMeta } from "./logos/Maybach";
-export { McLaren, meta as McLarenMeta } from "./logos/McLaren";
-export { MercedesAMG, meta as MercedesAMGMeta } from "./logos/MercedesAMG";
-export { Mosler, meta as MoslerMeta } from "./logos/Mosler";
-export { Pagani, meta as PaganiMeta } from "./logos/Pagani";
-export { Pininfarina, meta as PininfarinaMeta } from "./logos/Pininfarina";
-export { Polestar, meta as PolestarMeta } from "./logos/Polestar";
-export { Porsche, meta as PorscheMeta } from "./logos/Porsche";
-export { Radical, meta as RadicalMeta } from "./logos/Radical";
-export { Rimac, meta as RimacMeta } from "./logos/Rimac";
-export { RollsRoyce, meta as RollsRoyceMeta } from "./logos/RollsRoyce";
-export { Saleen, meta as SaleenMeta } from "./logos/Saleen";
-export { Shelby, meta as ShelbyMeta } from "./logos/Shelby";
-export { Spyker, meta as SpykerMeta } from "./logos/Spyker";
-export { SSC, meta as SSCMeta } from "./logos/SSC";
-export { TVR, meta as TVRMeta } from "./logos/TVR";
-export { WMotors, meta as WMotorsMeta } from "./logos/WMotors";
-export { Zenvo, meta as ZenvoMeta } from "./logos/Zenvo";
-export type { CarLogoProps, CarLogoMeta, LogoSize } from "./types";
+export { ReactCarLogo } from "./ReactCarLogo";
+export { brands } from "./brands";
+export type { ReactCarLogoProps, CarLogoMeta, LogoSize, BrandName } from "./types";
 export { SIZE_MAP, CDN_WIDTH_MAP } from "./types";