react-car-logo 0.2.0

package/src/logos/Shelby.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { CarLogoProps, CarLogoMeta } from "../types";
+import { SIZE_MAP } from "../types";
+
+export const meta: CarLogoMeta = {
+  title: "Shelby",
+  slug: "shelby",
+  pngUrl: "https://www.carlogos.org/logo/Shelby-logo.png",
+  country: "USA",
+  region: "American",
+  founded: 1962,
+  hex: "8B0000",
+};
+
+export const Shelby: React.FC<CarLogoProps> = ({
+  size = "md",
+  width,
+  height,
+  alt = "Shelby",
+  loading = "lazy",
+  style,
+  ...props
+}) => {
+  const renderPx = width ?? height ?? SIZE_MAP[size];
+
+  return (
+    <img
+      src="https://www.carlogos.org/logo/Shelby-logo.png"
+      alt={alt}
+      width={renderPx}
+      height={renderPx}
+      loading={loading}
+      style={{ objectFit: "contain", ...style }}
+      {...props}
+    />
+  );
+};
+
+export default Shelby;

package/src/logos/Spyker.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { CarLogoProps, CarLogoMeta } from "../types";
+import { SIZE_MAP } from "../types";
+
+export const meta: CarLogoMeta = {
+  title: "Spyker",
+  slug: "spyker",
+  pngUrl: "https://www.carlogos.org/logo/Spyker-logo.png",
+  country: "Netherlands",
+  region: "Other",
+  founded: 1999,
+  hex: "003087",
+};
+
+export const Spyker: React.FC<CarLogoProps> = ({
+  size = "md",
+  width,
+  height,
+  alt = "Spyker",
+  loading = "lazy",
+  style,
+  ...props
+}) => {
+  const renderPx = width ?? height ?? SIZE_MAP[size];
+
+  return (
+    <img
+      src="https://www.carlogos.org/logo/Spyker-logo.png"
+      alt={alt}
+      width={renderPx}
+      height={renderPx}
+      loading={loading}
+      style={{ objectFit: "contain", ...style }}
+      {...props}
+    />
+  );
+};
+
+export default Spyker;

package/src/logos/TVR.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { CarLogoProps, CarLogoMeta } from "../types";
+import { SIZE_MAP } from "../types";
+
+export const meta: CarLogoMeta = {
+  title: "TVR",
+  slug: "tvr",
+  pngUrl: "https://www.carlogos.org/logo/TVR-logo.png",
+  country: "UK",
+  region: "British",
+  founded: 1947,
+  hex: "8B0000",
+};
+
+export const TVR: React.FC<CarLogoProps> = ({
+  size = "md",
+  width,
+  height,
+  alt = "TVR",
+  loading = "lazy",
+  style,
+  ...props
+}) => {
+  const renderPx = width ?? height ?? SIZE_MAP[size];
+
+  return (
+    <img
+      src="https://www.carlogos.org/logo/TVR-logo.png"
+      alt={alt}
+      width={renderPx}
+      height={renderPx}
+      loading={loading}
+      style={{ objectFit: "contain", ...style }}
+      {...props}
+    />
+  );
+};
+
+export default TVR;

package/src/logos/WMotors.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { CarLogoProps, CarLogoMeta } from "../types";
+import { SIZE_MAP } from "../types";
+
+export const meta: CarLogoMeta = {
+  title: "W Motors",
+  slug: "w-motors",
+  pngUrl: "https://www.carlogos.org/logo/W-Motors-logo.png",
+  country: "UAE",
+  region: "Other",
+  founded: 2012,
+  hex: "1A1A1A",
+};
+
+export const WMotors: React.FC<CarLogoProps> = ({
+  size = "md",
+  width,
+  height,
+  alt = "W Motors",
+  loading = "lazy",
+  style,
+  ...props
+}) => {
+  const renderPx = width ?? height ?? SIZE_MAP[size];
+
+  return (
+    <img
+      src="https://www.carlogos.org/logo/W-Motors-logo.png"
+      alt={alt}
+      width={renderPx}
+      height={renderPx}
+      loading={loading}
+      style={{ objectFit: "contain", ...style }}
+      {...props}
+    />
+  );
+};
+
+export default WMotors;

package/src/logos/Zenvo.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { CarLogoProps, CarLogoMeta } from "../types";
+import { SIZE_MAP } from "../types";
+
+export const meta: CarLogoMeta = {
+  title: "Zenvo",
+  slug: "zenvo",
+  pngUrl: "https://www.carlogos.org/logo/Zenvo-logo.png",
+  country: "Denmark",
+  region: "Other",
+  founded: 2004,
+  hex: "1A1A1A",
+};
+
+export const Zenvo: React.FC<CarLogoProps> = ({
+  size = "md",
+  width,
+  height,
+  alt = "Zenvo",
+  loading = "lazy",
+  style,
+  ...props
+}) => {
+  const renderPx = width ?? height ?? SIZE_MAP[size];
+
+  return (
+    <img
+      src="https://www.carlogos.org/logo/Zenvo-logo.png"
+      alt={alt}
+      width={renderPx}
+      height={renderPx}
+      loading={loading}
+      style={{ objectFit: "contain", ...style }}
+      {...props}
+    />
+  );
+};
+
+export default Zenvo;

package/src/types.ts

@@ -0,0 +1,91 @@
+import { ImgHTMLAttributes } from "react";
+
+/** Available logo size presets */
+export type LogoSize = "sm" | "md" | "lg";
+
+/**
+ * Pixel dimensions for each size tier.
+ */
+export const SIZE_MAP: Record<LogoSize, number> = {
+  sm: 80, // Thumbnails, nav icons, table cells
+  md: 160, // Cards, lists, sidebars (default)
+  lg: 320, // Hero sections, detail views
+};
+
+/**
+ * Width in pixels used when fetching logo images.
+ */
+export const CDN_WIDTH_MAP: Record<LogoSize, number> = {
+  sm: 640,
+  md: 640,
+  lg: 640,
+};
+
+/**
+ * Props accepted by every car logo component.
+ * Extends standard <img> HTML attributes (minus src/width/height which are controlled).
+ */
+export interface CarLogoProps
+  extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height"> {
+  /**
+   * Size preset. Controls both the rendered dimension and the PNG resolution fetched.
+   * - `'sm'`  -> renders at 80px,  fetches 160px PNG (2x retina)
+   * - `'md'`  -> renders at 160px, fetches 320px PNG (2x retina) -- DEFAULT
+   * - `'lg'`  -> renders at 320px, fetches 640px PNG (2x retina)
+   */
+  size?: LogoSize;
+
+  /**
+   * Custom pixel width. Overrides `size` if provided.
+   * The highest available PNG resolution (640px) will be fetched.
+   */
+  width?: number;
+
+  /**
+   * Custom pixel height. Overrides `size` if provided.
+   * The highest available PNG resolution (640px) will be fetched.
+   */
+  height?: number;
+
+  /**
+   * Accessible alt text for screen readers.
+   * Defaults to the brand's display name (e.g., "Ferrari").
+   */
+  alt?: string;
+
+  /**
+   * Native browser image loading strategy.
+   * Defaults to 'lazy' for performance.
+   */
+  loading?: "lazy" | "eager";
+}
+
+/**
+ * Metadata object exported alongside each logo component.
+ * Useful for building dynamic UIs, lists, and filters.
+ */
+export interface CarLogoMeta {
+  /** Brand display name, e.g. "Rolls-Royce" */
+  title: string;
+
+  /** URL-safe slug, e.g. "rolls-royce" */
+  slug: string;
+
+  /** PNG logo URL */
+  pngUrl: string;
+
+  /** Country of origin, e.g. "Italy" */
+  country: string;
+
+  /** Regional grouping: "Italian" | "German" | "British" | "French" | "American" | "Swedish" | "Other" */
+  region: string;
+
+  /** Year the brand was founded */
+  founded: number;
+
+  /** Primary brand hex color (without #), e.g. "CD212A" */
+  hex: string;
+
+  /** Link to the brand's official guidelines page (if known) */
+  guidelines?: string;
+}