react-car-logo 0.2.2 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (135) hide show
  1. package/README.md +46 -46
  2. package/dist/ReactCarLogo.d.ts +4 -0
  3. package/dist/allLogos.d.ts +1 -40
  4. package/dist/brands.d.ts +2 -0
  5. package/dist/index.d.ts +3 -41
  6. package/dist/index.esm.js +61 -641
  7. package/dist/index.js +60 -718
  8. package/dist/types.d.ts +15 -10
  9. package/package.json +1 -6
  10. package/src/ReactCarLogo.tsx +32 -0
  11. package/src/allLogos.ts +3 -43
  12. package/src/brands.ts +51 -0
  13. package/src/index.ts +3 -46
  14. package/src/types.ts +59 -10
  15. package/dist/logos/Abarth.d.ts +0 -5
  16. package/dist/logos/Abarth.js +0 -20
  17. package/dist/logos/AlfaRomeo.d.ts +0 -5
  18. package/dist/logos/AlfaRomeo.js +0 -20
  19. package/dist/logos/Alpine.d.ts +0 -5
  20. package/dist/logos/Alpine.js +0 -20
  21. package/dist/logos/Arash.d.ts +0 -5
  22. package/dist/logos/Arash.js +0 -20
  23. package/dist/logos/AstonMartin.d.ts +0 -5
  24. package/dist/logos/AstonMartin.js +0 -20
  25. package/dist/logos/Audi.d.ts +0 -5
  26. package/dist/logos/Audi.js +0 -20
  27. package/dist/logos/BMW.d.ts +0 -5
  28. package/dist/logos/BMW.js +0 -20
  29. package/dist/logos/Bentley.d.ts +0 -5
  30. package/dist/logos/Bentley.js +0 -20
  31. package/dist/logos/Brabus.d.ts +0 -5
  32. package/dist/logos/Brabus.js +0 -20
  33. package/dist/logos/Bugatti.d.ts +0 -5
  34. package/dist/logos/Bugatti.js +0 -20
  35. package/dist/logos/Chevrolet.d.ts +0 -5
  36. package/dist/logos/Chevrolet.js +0 -20
  37. package/dist/logos/DeTomaso.d.ts +0 -5
  38. package/dist/logos/DeTomaso.js +0 -20
  39. package/dist/logos/Dodge.d.ts +0 -5
  40. package/dist/logos/Dodge.js +0 -20
  41. package/dist/logos/Ferrari.d.ts +0 -5
  42. package/dist/logos/Ferrari.js +0 -20
  43. package/dist/logos/Ford.d.ts +0 -5
  44. package/dist/logos/Ford.js +0 -20
  45. package/dist/logos/Gumpert.d.ts +0 -5
  46. package/dist/logos/Gumpert.js +0 -20
  47. package/dist/logos/Hennessey.d.ts +0 -5
  48. package/dist/logos/Hennessey.js +0 -20
  49. package/dist/logos/Jaguar.d.ts +0 -5
  50. package/dist/logos/Jaguar.js +0 -20
  51. package/dist/logos/Koenigsegg.d.ts +0 -5
  52. package/dist/logos/Koenigsegg.js +0 -20
  53. package/dist/logos/Lamborghini.d.ts +0 -5
  54. package/dist/logos/Lamborghini.js +0 -20
  55. package/dist/logos/Lotus.d.ts +0 -5
  56. package/dist/logos/Lotus.js +0 -20
  57. package/dist/logos/Maserati.d.ts +0 -5
  58. package/dist/logos/Maserati.js +0 -20
  59. package/dist/logos/Maybach.d.ts +0 -5
  60. package/dist/logos/Maybach.js +0 -20
  61. package/dist/logos/McLaren.d.ts +0 -5
  62. package/dist/logos/McLaren.js +0 -20
  63. package/dist/logos/MercedesAMG.d.ts +0 -5
  64. package/dist/logos/MercedesAMG.js +0 -20
  65. package/dist/logos/Mosler.d.ts +0 -5
  66. package/dist/logos/Mosler.js +0 -20
  67. package/dist/logos/Pagani.d.ts +0 -5
  68. package/dist/logos/Pagani.js +0 -20
  69. package/dist/logos/Pininfarina.d.ts +0 -5
  70. package/dist/logos/Pininfarina.js +0 -20
  71. package/dist/logos/Polestar.d.ts +0 -5
  72. package/dist/logos/Polestar.js +0 -20
  73. package/dist/logos/Porsche.d.ts +0 -5
  74. package/dist/logos/Porsche.js +0 -20
  75. package/dist/logos/Radical.d.ts +0 -5
  76. package/dist/logos/Radical.js +0 -20
  77. package/dist/logos/Rimac.d.ts +0 -5
  78. package/dist/logos/Rimac.js +0 -20
  79. package/dist/logos/RollsRoyce.d.ts +0 -5
  80. package/dist/logos/RollsRoyce.js +0 -20
  81. package/dist/logos/SSC.d.ts +0 -5
  82. package/dist/logos/SSC.js +0 -20
  83. package/dist/logos/Saleen.d.ts +0 -5
  84. package/dist/logos/Saleen.js +0 -20
  85. package/dist/logos/Shelby.d.ts +0 -5
  86. package/dist/logos/Shelby.js +0 -20
  87. package/dist/logos/Spyker.d.ts +0 -5
  88. package/dist/logos/Spyker.js +0 -20
  89. package/dist/logos/TVR.d.ts +0 -5
  90. package/dist/logos/TVR.js +0 -20
  91. package/dist/logos/WMotors.d.ts +0 -5
  92. package/dist/logos/WMotors.js +0 -20
  93. package/dist/logos/Zenvo.d.ts +0 -5
  94. package/dist/logos/Zenvo.js +0 -20
  95. package/dist/types-B2mOhqdm.js +0 -44
  96. package/src/logos/Abarth.tsx +0 -39
  97. package/src/logos/AlfaRomeo.tsx +0 -39
  98. package/src/logos/Alpine.tsx +0 -39
  99. package/src/logos/Arash.tsx +0 -39
  100. package/src/logos/AstonMartin.tsx +0 -39
  101. package/src/logos/Audi.tsx +0 -39
  102. package/src/logos/BMW.tsx +0 -39
  103. package/src/logos/Bentley.tsx +0 -39
  104. package/src/logos/Brabus.tsx +0 -39
  105. package/src/logos/Bugatti.tsx +0 -39
  106. package/src/logos/Chevrolet.tsx +0 -39
  107. package/src/logos/DeTomaso.tsx +0 -39
  108. package/src/logos/Dodge.tsx +0 -39
  109. package/src/logos/Ferrari.tsx +0 -39
  110. package/src/logos/Ford.tsx +0 -39
  111. package/src/logos/Gumpert.tsx +0 -39
  112. package/src/logos/Hennessey.tsx +0 -39
  113. package/src/logos/Jaguar.tsx +0 -39
  114. package/src/logos/Koenigsegg.tsx +0 -39
  115. package/src/logos/Lamborghini.tsx +0 -39
  116. package/src/logos/Lotus.tsx +0 -39
  117. package/src/logos/Maserati.tsx +0 -39
  118. package/src/logos/Maybach.tsx +0 -39
  119. package/src/logos/McLaren.tsx +0 -39
  120. package/src/logos/MercedesAMG.tsx +0 -39
  121. package/src/logos/Mosler.tsx +0 -39
  122. package/src/logos/Pagani.tsx +0 -39
  123. package/src/logos/Pininfarina.tsx +0 -39
  124. package/src/logos/Polestar.tsx +0 -39
  125. package/src/logos/Porsche.tsx +0 -39
  126. package/src/logos/Radical.tsx +0 -39
  127. package/src/logos/Rimac.tsx +0 -39
  128. package/src/logos/RollsRoyce.tsx +0 -39
  129. package/src/logos/SSC.tsx +0 -39
  130. package/src/logos/Saleen.tsx +0 -39
  131. package/src/logos/Shelby.tsx +0 -39
  132. package/src/logos/Spyker.tsx +0 -39
  133. package/src/logos/TVR.tsx +0 -39
  134. package/src/logos/WMotors.tsx +0 -39
  135. package/src/logos/Zenvo.tsx +0 -39
package/dist/types.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import { ImgHTMLAttributes } from "react";
2
2
  /** Available logo size presets */
3
- export type LogoSize = "sm" | "md" | "lg";
3
+ export type LogoSize = "icon" | "sm" | "md" | "lg";
4
+ /** All supported brand name slugs */
5
+ export type BrandName = "abarth" | "alfa-romeo" | "alpine" | "arash" | "aston-martin" | "audi" | "bentley" | "bmw" | "brabus" | "bugatti" | "chevrolet" | "de-tomaso" | "dodge" | "ferrari" | "ford" | "gumpert" | "hennessey" | "jaguar" | "koenigsegg" | "lamborghini" | "lotus" | "maserati" | "maybach" | "mclaren" | "mercedes-amg" | "mosler" | "pagani" | "pininfarina" | "polestar" | "porsche" | "radical" | "rimac" | "rolls-royce" | "saleen" | "shelby" | "spyker" | "ssc" | "tvr" | "w-motors" | "zenvo";
4
6
  /**
5
7
  * Pixel dimensions for each size tier.
6
8
  */
@@ -10,25 +12,28 @@ export declare const SIZE_MAP: Record<LogoSize, number>;
10
12
  */
11
13
  export declare const CDN_WIDTH_MAP: Record<LogoSize, number>;
12
14
  /**
13
- * Props accepted by every car logo component.
15
+ * Props accepted by the ReactCarLogo component.
14
16
  * Extends standard <img> HTML attributes (minus src/width/height which are controlled).
15
17
  */
16
- export interface CarLogoProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height"> {
18
+ export interface ReactCarLogoProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height"> {
17
19
  /**
18
- * Size preset. Controls both the rendered dimension and the PNG resolution fetched.
19
- * - `'sm'` -> renders at 80px, fetches 160px PNG (2x retina)
20
- * - `'md'` -> renders at 160px, fetches 320px PNG (2x retina) -- DEFAULT
21
- * - `'lg'` -> renders at 320px, fetches 640px PNG (2x retina)
20
+ * Brand name slug. e.g. "ferrari", "alfa-romeo", "rolls-royce"
21
+ */
22
+ name: BrandName;
23
+ /**
24
+ * Size preset. Controls the rendered dimension.
25
+ * - `'icon'` -> renders at 32px
26
+ * - `'sm'` -> renders at 80px
27
+ * - `'md'` -> renders at 160px -- DEFAULT
28
+ * - `'lg'` -> renders at 320px
22
29
  */
23
30
  size?: LogoSize;
24
31
  /**
25
32
  * Custom pixel width. Overrides `size` if provided.
26
- * The highest available PNG resolution (640px) will be fetched.
27
33
  */
28
34
  width?: number;
29
35
  /**
30
36
  * Custom pixel height. Overrides `size` if provided.
31
- * The highest available PNG resolution (640px) will be fetched.
32
37
  */
33
38
  height?: number;
34
39
  /**
@@ -43,7 +48,7 @@ export interface CarLogoProps extends Omit<ImgHTMLAttributes<HTMLImageElement>,
43
48
  loading?: "lazy" | "eager";
44
49
  }
45
50
  /**
46
- * Metadata object exported alongside each logo component.
51
+ * Metadata object for each brand.
47
52
  * Useful for building dynamic UIs, lists, and filters.
48
53
  */
49
54
  export interface CarLogoMeta {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-car-logo",
3
- "version": "0.2.2",
3
+ "version": "1.0.0",
4
4
  "description": "PNG logo components for exotic & luxury car brands. React & React Native compatible. Tree-shakeable.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
@@ -27,11 +27,6 @@
27
27
  "import": "./dist/index.esm.js",
28
28
  "require": "./dist/index.js",
29
29
  "types": "./dist/index.d.ts"
30
- },
31
- "./logos/*": {
32
- "import": "./dist/logos/*.js",
33
- "require": "./dist/logos/*.js",
34
- "types": "./dist/logos/*.d.ts"
35
30
  }
36
31
  },
37
32
  "peerDependencies": {
@@ -0,0 +1,32 @@
1
+ import React from "react";
2
+ import type { ReactCarLogoProps } from "./types";
3
+ import { SIZE_MAP } from "./types";
4
+ import { brands } from "./brands";
5
+
6
+ export const ReactCarLogo: React.FC<ReactCarLogoProps> = ({
7
+ name,
8
+ size = "md",
9
+ width,
10
+ height,
11
+ alt,
12
+ loading = "lazy",
13
+ style,
14
+ ...props
15
+ }) => {
16
+ const brand = brands[name];
17
+ const renderPx = width ?? height ?? SIZE_MAP[size];
18
+
19
+ return (
20
+ <img
21
+ src={brand.pngUrl}
22
+ alt={alt ?? brand.title}
23
+ width={renderPx}
24
+ height={renderPx}
25
+ loading={loading}
26
+ style={{ objectFit: "contain", ...style }}
27
+ {...props}
28
+ />
29
+ );
30
+ };
31
+
32
+ export default ReactCarLogo;
package/src/allLogos.ts CHANGED
@@ -1,43 +1,3 @@
1
- // Import this to get all logos in one object.
2
- // WARNING: This disables tree-shaking. Use named imports where possible.
3
-
4
- export { Abarth } from "./logos/Abarth";
5
- export { AlfaRomeo } from "./logos/AlfaRomeo";
6
- export { Alpine } from "./logos/Alpine";
7
- export { Arash } from "./logos/Arash";
8
- export { AstonMartin } from "./logos/AstonMartin";
9
- export { Audi } from "./logos/Audi";
10
- export { Bentley } from "./logos/Bentley";
11
- export { BMW } from "./logos/BMW";
12
- export { Brabus } from "./logos/Brabus";
13
- export { Bugatti } from "./logos/Bugatti";
14
- export { Chevrolet } from "./logos/Chevrolet";
15
- export { DeTomaso } from "./logos/DeTomaso";
16
- export { Dodge } from "./logos/Dodge";
17
- export { Ferrari } from "./logos/Ferrari";
18
- export { Ford } from "./logos/Ford";
19
- export { Gumpert } from "./logos/Gumpert";
20
- export { Hennessey } from "./logos/Hennessey";
21
- export { Jaguar } from "./logos/Jaguar";
22
- export { Koenigsegg } from "./logos/Koenigsegg";
23
- export { Lamborghini } from "./logos/Lamborghini";
24
- export { Lotus } from "./logos/Lotus";
25
- export { Maserati } from "./logos/Maserati";
26
- export { Maybach } from "./logos/Maybach";
27
- export { McLaren } from "./logos/McLaren";
28
- export { MercedesAMG } from "./logos/MercedesAMG";
29
- export { Mosler } from "./logos/Mosler";
30
- export { Pagani } from "./logos/Pagani";
31
- export { Pininfarina } from "./logos/Pininfarina";
32
- export { Polestar } from "./logos/Polestar";
33
- export { Porsche } from "./logos/Porsche";
34
- export { Radical } from "./logos/Radical";
35
- export { Rimac } from "./logos/Rimac";
36
- export { RollsRoyce } from "./logos/RollsRoyce";
37
- export { Saleen } from "./logos/Saleen";
38
- export { Shelby } from "./logos/Shelby";
39
- export { Spyker } from "./logos/Spyker";
40
- export { SSC } from "./logos/SSC";
41
- export { TVR } from "./logos/TVR";
42
- export { WMotors } from "./logos/WMotors";
43
- export { Zenvo } from "./logos/Zenvo";
1
+ // Re-export everything from the main entry point.
2
+ // In v1+, there is a single ReactCarLogo component — no individual brand components.
3
+ export { ReactCarLogo, brands } from "./index";
package/src/brands.ts ADDED
@@ -0,0 +1,51 @@
1
+ import type { CarLogoMeta, BrandName } from "./types";
2
+
3
+ export const brands: Record<BrandName, CarLogoMeta> = {
4
+ // Italian
5
+ "abarth": { title: "Abarth", slug: "abarth", pngUrl: "https://www.carlogos.org/logo/Abarth-logo.png", country: "Italy", region: "Italian", founded: 1949, hex: "CC0000" },
6
+ "alfa-romeo": { title: "Alfa Romeo", slug: "alfa-romeo", pngUrl: "https://www.carlogos.org/logo/Alfa-Romeo-logo.png", country: "Italy", region: "Italian", founded: 1910, hex: "CC0000" },
7
+ "de-tomaso": { title: "De Tomaso", slug: "de-tomaso", pngUrl: "https://www.carlogos.org/logo/De-Tomaso-logo.png", country: "Italy", region: "Italian", founded: 1959, hex: "003087" },
8
+ "ferrari": { title: "Ferrari", slug: "ferrari", pngUrl: "https://www.carlogos.org/logo/Ferrari-logo.png", country: "Italy", region: "Italian", founded: 1939, hex: "CD212A" },
9
+ "lamborghini": { title: "Lamborghini", slug: "lamborghini", pngUrl: "https://www.carlogos.org/logo/Lamborghini-logo.png", country: "Italy", region: "Italian", founded: 1963, hex: "D4AF37" },
10
+ "maserati": { title: "Maserati", slug: "maserati", pngUrl: "https://www.carlogos.org/logo/Maserati-logo.png", country: "Italy", region: "Italian", founded: 1914, hex: "003087" },
11
+ "pagani": { title: "Pagani", slug: "pagani", pngUrl: "https://www.carlogos.org/logo/Pagani-logo.png", country: "Italy", region: "Italian", founded: 1992, hex: "1A1A1A" },
12
+ "pininfarina": { title: "Pininfarina", slug: "pininfarina", pngUrl: "https://www.carlogos.org/logo/Pininfarina-logo.png", country: "Italy", region: "Italian", founded: 1930, hex: "1A1A1A" },
13
+ // German
14
+ "audi": { title: "Audi", slug: "audi", pngUrl: "https://www.carlogos.org/logo/Audi-logo.png", country: "Germany", region: "German", founded: 1909, hex: "1A1A1A" },
15
+ "bmw": { title: "BMW", slug: "bmw", pngUrl: "https://www.carlogos.org/logo/BMW-logo.png", country: "Germany", region: "German", founded: 1916, hex: "0066B2" },
16
+ "brabus": { title: "Brabus", slug: "brabus", pngUrl: "https://www.carlogos.org/logo/Brabus-logo.png", country: "Germany", region: "German", founded: 1977, hex: "1A1A1A" },
17
+ "gumpert": { title: "Gumpert", slug: "gumpert", pngUrl: "https://www.carlogos.org/logo/Gumpert-logo.png", country: "Germany", region: "German", founded: 2004, hex: "1A1A1A" },
18
+ "maybach": { title: "Maybach", slug: "maybach", pngUrl: "https://www.carlogos.org/logo/Maybach-logo.png", country: "Germany", region: "German", founded: 1909, hex: "1A1A1A" },
19
+ "mercedes-amg": { title: "Mercedes-AMG", slug: "mercedes-amg", pngUrl: "https://www.carlogos.org/car-logos/mercedes-benz-logo.png", country: "Germany", region: "German", founded: 1967, hex: "1A1A1A" },
20
+ "porsche": { title: "Porsche", slug: "porsche", pngUrl: "https://www.carlogos.org/logo/Porsche-logo.png", country: "Germany", region: "German", founded: 1931, hex: "1A1A1A" },
21
+ // British
22
+ "arash": { title: "Arash", slug: "arash", pngUrl: "https://www.carlogos.org/logo/Arash-logo.png", country: "UK", region: "British", founded: 1999, hex: "1A1A1A" },
23
+ "aston-martin": { title: "Aston Martin", slug: "aston-martin", pngUrl: "https://www.carlogos.org/logo/Aston-Martin-logo.png", country: "UK", region: "British", founded: 1913, hex: "004225" },
24
+ "bentley": { title: "Bentley", slug: "bentley", pngUrl: "https://www.carlogos.org/logo/Bentley-logo.png", country: "UK", region: "British", founded: 1919, hex: "1A5276" },
25
+ "jaguar": { title: "Jaguar", slug: "jaguar", pngUrl: "https://www.carlogos.org/logo/Jaguar-logo.png", country: "UK", region: "British", founded: 1935, hex: "003F7C" },
26
+ "lotus": { title: "Lotus", slug: "lotus", pngUrl: "https://www.carlogos.org/logo/Lotus-logo.png", country: "UK", region: "British", founded: 1948, hex: "005C3E" },
27
+ "mclaren": { title: "McLaren", slug: "mclaren", pngUrl: "https://www.carlogos.org/logo/McLaren-logo.png", country: "UK", region: "British", founded: 1963, hex: "FF8000" },
28
+ "radical": { title: "Radical", slug: "radical", pngUrl: "https://www.carlogos.org/logo/Radical-Sportscars-logo.png", country: "UK", region: "British", founded: 1997, hex: "CC0000" },
29
+ "rolls-royce": { title: "Rolls-Royce", slug: "rolls-royce", pngUrl: "https://www.carlogos.org/logo/Rolls-Royce-logo.png", country: "UK", region: "British", founded: 1904, hex: "1A1A1A" },
30
+ "tvr": { title: "TVR", slug: "tvr", pngUrl: "https://www.carlogos.org/logo/TVR-logo.png", country: "UK", region: "British", founded: 1947, hex: "8B0000" },
31
+ // French
32
+ "alpine": { title: "Alpine", slug: "alpine", pngUrl: "https://www.carlogos.org/logo/Alpine-logo.png", country: "France", region: "French", founded: 1955, hex: "003087" },
33
+ "bugatti": { title: "Bugatti", slug: "bugatti", pngUrl: "https://www.carlogos.org/logo/Bugatti-logo.png", country: "France", region: "French", founded: 1909, hex: "1B1F8A" },
34
+ // American
35
+ "chevrolet": { title: "Chevrolet", slug: "chevrolet", pngUrl: "https://www.carlogos.org/logo/Chevrolet-logo.png", country: "USA", region: "American", founded: 1911, hex: "CC0000" },
36
+ "dodge": { title: "Dodge", slug: "dodge", pngUrl: "https://www.carlogos.org/logo/Dodge-logo.png", country: "USA", region: "American", founded: 1900, hex: "CC0000" },
37
+ "ford": { title: "Ford", slug: "ford", pngUrl: "https://www.carlogos.org/logo/Ford-logo.png", country: "USA", region: "American", founded: 1903, hex: "003087" },
38
+ "hennessey": { title: "Hennessey", slug: "hennessey", pngUrl: "https://www.carlogos.org/logo/Hennessey-logo.png", country: "USA", region: "American", founded: 1991, hex: "1A1A1A" },
39
+ "mosler": { title: "Mosler", slug: "mosler", pngUrl: "https://www.carlogos.org/logo/Mosler-logo.png", country: "USA", region: "American", founded: 1985, hex: "003087" },
40
+ "saleen": { title: "Saleen", slug: "saleen", pngUrl: "https://www.carlogos.org/logo/Saleen-logo.png", country: "USA", region: "American", founded: 1983, hex: "1A1A1A" },
41
+ "shelby": { title: "Shelby", slug: "shelby", pngUrl: "https://www.carlogos.org/logo/Shelby-logo.png", country: "USA", region: "American", founded: 1962, hex: "8B0000" },
42
+ "ssc": { title: "SSC", slug: "ssc", pngUrl: "https://www.carlogos.org/logo/SSC-logo.png", country: "USA", region: "American", founded: 1998, hex: "1A1A1A" },
43
+ // Swedish
44
+ "koenigsegg": { title: "Koenigsegg", slug: "koenigsegg", pngUrl: "https://www.carlogos.org/logo/Koenigsegg-logo.png", country: "Sweden", region: "Swedish", founded: 1994, hex: "FFCC00" },
45
+ "polestar": { title: "Polestar", slug: "polestar", pngUrl: "https://www.carlogos.org/logo/Polestar-logo.png", country: "Sweden", region: "Swedish", founded: 2017, hex: "1A1A1A" },
46
+ // Other
47
+ "rimac": { title: "Rimac", slug: "rimac", pngUrl: "https://www.carlogos.org/logo/Rimac-logo.png", country: "Croatia", region: "Other", founded: 2009, hex: "0033A0" },
48
+ "spyker": { title: "Spyker", slug: "spyker", pngUrl: "https://www.carlogos.org/logo/Spyker-logo.png", country: "Netherlands", region: "Other", founded: 1999, hex: "003087" },
49
+ "w-motors": { title: "W Motors", slug: "w-motors", pngUrl: "https://www.carlogos.org/logo/W-Motors-logo.png", country: "UAE", region: "Other", founded: 2012, hex: "1A1A1A" },
50
+ "zenvo": { title: "Zenvo", slug: "zenvo", pngUrl: "https://www.carlogos.org/logo/Zenvo-logo.png", country: "Denmark", region: "Other", founded: 2004, hex: "1A1A1A" },
51
+ };
package/src/index.ts CHANGED
@@ -1,47 +1,4 @@
1
- // Auto-generated barrel export do not edit by hand
2
- // Run: npm run generate
3
-
4
- export { Abarth, meta as AbarthMeta } from "./logos/Abarth";
5
- export { AlfaRomeo, meta as AlfaRomeoMeta } from "./logos/AlfaRomeo";
6
- export { Alpine, meta as AlpineMeta } from "./logos/Alpine";
7
- export { Arash, meta as ArashMeta } from "./logos/Arash";
8
- export { AstonMartin, meta as AstonMartinMeta } from "./logos/AstonMartin";
9
- export { Audi, meta as AudiMeta } from "./logos/Audi";
10
- export { Bentley, meta as BentleyMeta } from "./logos/Bentley";
11
- export { BMW, meta as BMWMeta } from "./logos/BMW";
12
- export { Brabus, meta as BrabusMeta } from "./logos/Brabus";
13
- export { Bugatti, meta as BugattiMeta } from "./logos/Bugatti";
14
- export { Chevrolet, meta as ChevroletMeta } from "./logos/Chevrolet";
15
- export { DeTomaso, meta as DeTomasoMeta } from "./logos/DeTomaso";
16
- export { Dodge, meta as DodgeMeta } from "./logos/Dodge";
17
- export { Ferrari, meta as FerrariMeta } from "./logos/Ferrari";
18
- export { Ford, meta as FordMeta } from "./logos/Ford";
19
- export { Gumpert, meta as GumpertMeta } from "./logos/Gumpert";
20
- export { Hennessey, meta as HennesseyMeta } from "./logos/Hennessey";
21
- export { Jaguar, meta as JaguarMeta } from "./logos/Jaguar";
22
- export { Koenigsegg, meta as KoenigseggMeta } from "./logos/Koenigsegg";
23
- export { Lamborghini, meta as LamborghiniMeta } from "./logos/Lamborghini";
24
- export { Lotus, meta as LotusMeta } from "./logos/Lotus";
25
- export { Maserati, meta as MaseratiMeta } from "./logos/Maserati";
26
- export { Maybach, meta as MaybachMeta } from "./logos/Maybach";
27
- export { McLaren, meta as McLarenMeta } from "./logos/McLaren";
28
- export { MercedesAMG, meta as MercedesAMGMeta } from "./logos/MercedesAMG";
29
- export { Mosler, meta as MoslerMeta } from "./logos/Mosler";
30
- export { Pagani, meta as PaganiMeta } from "./logos/Pagani";
31
- export { Pininfarina, meta as PininfarinaMeta } from "./logos/Pininfarina";
32
- export { Polestar, meta as PolestarMeta } from "./logos/Polestar";
33
- export { Porsche, meta as PorscheMeta } from "./logos/Porsche";
34
- export { Radical, meta as RadicalMeta } from "./logos/Radical";
35
- export { Rimac, meta as RimacMeta } from "./logos/Rimac";
36
- export { RollsRoyce, meta as RollsRoyceMeta } from "./logos/RollsRoyce";
37
- export { Saleen, meta as SaleenMeta } from "./logos/Saleen";
38
- export { Shelby, meta as ShelbyMeta } from "./logos/Shelby";
39
- export { Spyker, meta as SpykerMeta } from "./logos/Spyker";
40
- export { SSC, meta as SSCMeta } from "./logos/SSC";
41
- export { TVR, meta as TVRMeta } from "./logos/TVR";
42
- export { WMotors, meta as WMotorsMeta } from "./logos/WMotors";
43
- export { Zenvo, meta as ZenvoMeta } from "./logos/Zenvo";
44
-
45
- // Type and constant exports
46
- export type { CarLogoProps, CarLogoMeta, LogoSize } from "./types";
1
+ export { ReactCarLogo } from "./ReactCarLogo";
2
+ export { brands } from "./brands";
3
+ export type { ReactCarLogoProps, CarLogoMeta, LogoSize, BrandName } from "./types";
47
4
  export { SIZE_MAP, CDN_WIDTH_MAP } from "./types";
package/src/types.ts CHANGED
@@ -1,12 +1,56 @@
1
1
  import { ImgHTMLAttributes } from "react";
2
2
 
3
3
  /** Available logo size presets */
4
- export type LogoSize = "sm" | "md" | "lg";
4
+ export type LogoSize = "icon" | "sm" | "md" | "lg";
5
+
6
+ /** All supported brand name slugs */
7
+ export type BrandName =
8
+ | "abarth"
9
+ | "alfa-romeo"
10
+ | "alpine"
11
+ | "arash"
12
+ | "aston-martin"
13
+ | "audi"
14
+ | "bentley"
15
+ | "bmw"
16
+ | "brabus"
17
+ | "bugatti"
18
+ | "chevrolet"
19
+ | "de-tomaso"
20
+ | "dodge"
21
+ | "ferrari"
22
+ | "ford"
23
+ | "gumpert"
24
+ | "hennessey"
25
+ | "jaguar"
26
+ | "koenigsegg"
27
+ | "lamborghini"
28
+ | "lotus"
29
+ | "maserati"
30
+ | "maybach"
31
+ | "mclaren"
32
+ | "mercedes-amg"
33
+ | "mosler"
34
+ | "pagani"
35
+ | "pininfarina"
36
+ | "polestar"
37
+ | "porsche"
38
+ | "radical"
39
+ | "rimac"
40
+ | "rolls-royce"
41
+ | "saleen"
42
+ | "shelby"
43
+ | "spyker"
44
+ | "ssc"
45
+ | "tvr"
46
+ | "w-motors"
47
+ | "zenvo";
5
48
 
6
49
  /**
7
50
  * Pixel dimensions for each size tier.
8
51
  */
9
52
  export const SIZE_MAP: Record<LogoSize, number> = {
53
+ icon: 32, // Inline icons, favicons, small UI elements
10
54
  sm: 80, // Thumbnails, nav icons, table cells
11
55
  md: 160, // Cards, lists, sidebars (default)
12
56
  lg: 320, // Hero sections, detail views
@@ -16,34 +60,39 @@ export const SIZE_MAP: Record<LogoSize, number> = {
16
60
  * Width in pixels used when fetching logo images.
17
61
  */
18
62
  export const CDN_WIDTH_MAP: Record<LogoSize, number> = {
63
+ icon: 640,
19
64
  sm: 640,
20
65
  md: 640,
21
66
  lg: 640,
22
67
  };
23
68
 
24
69
  /**
25
- * Props accepted by every car logo component.
70
+ * Props accepted by the ReactCarLogo component.
26
71
  * Extends standard <img> HTML attributes (minus src/width/height which are controlled).
27
72
  */
28
- export interface CarLogoProps
73
+ export interface ReactCarLogoProps
29
74
  extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height"> {
30
75
  /**
31
- * Size preset. Controls both the rendered dimension and the PNG resolution fetched.
32
- * - `'sm'` -> renders at 80px, fetches 160px PNG (2x retina)
33
- * - `'md'` -> renders at 160px, fetches 320px PNG (2x retina) -- DEFAULT
34
- * - `'lg'` -> renders at 320px, fetches 640px PNG (2x retina)
76
+ * Brand name slug. e.g. "ferrari", "alfa-romeo", "rolls-royce"
77
+ */
78
+ name: BrandName;
79
+
80
+ /**
81
+ * Size preset. Controls the rendered dimension.
82
+ * - `'icon'` -> renders at 32px
83
+ * - `'sm'` -> renders at 80px
84
+ * - `'md'` -> renders at 160px -- DEFAULT
85
+ * - `'lg'` -> renders at 320px
35
86
  */
36
87
  size?: LogoSize;
37
88
 
38
89
  /**
39
90
  * Custom pixel width. Overrides `size` if provided.
40
- * The highest available PNG resolution (640px) will be fetched.
41
91
  */
42
92
  width?: number;
43
93
 
44
94
  /**
45
95
  * Custom pixel height. Overrides `size` if provided.
46
- * The highest available PNG resolution (640px) will be fetched.
47
96
  */
48
97
  height?: number;
49
98
 
@@ -61,7 +110,7 @@ export interface CarLogoProps
61
110
  }
62
111
 
63
112
  /**
64
- * Metadata object exported alongside each logo component.
113
+ * Metadata object for each brand.
65
114
  * Useful for building dynamic UIs, lists, and filters.
66
115
  */
67
116
  export interface CarLogoMeta {
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import type { CarLogoProps, CarLogoMeta } from "../types";
3
- export declare const meta: CarLogoMeta;
4
- export declare const Abarth: React.FC<CarLogoProps>;
5
- export default Abarth;
@@ -1,20 +0,0 @@
1
- import { _ as __rest, S as SIZE_MAP } from '../types-B2mOhqdm.js';
2
- import React from 'react';
3
-
4
- const meta = {
5
- title: "Abarth",
6
- slug: "abarth",
7
- pngUrl: "https://www.carlogos.org/logo/Abarth-logo.png",
8
- country: "Italy",
9
- region: "Italian",
10
- founded: 1949,
11
- hex: "CC0000",
12
- };
13
- const Abarth = (_a) => {
14
- var _b;
15
- var { size = "md", width, height, alt = "Abarth", loading = "lazy", style } = _a, props = __rest(_a, ["size", "width", "height", "alt", "loading", "style"]);
16
- const renderPx = (_b = width !== null && width !== void 0 ? width : height) !== null && _b !== void 0 ? _b : SIZE_MAP[size];
17
- return (React.createElement("img", Object.assign({ src: "https://www.carlogos.org/logo/Abarth-logo.png", alt: alt, width: renderPx, height: renderPx, loading: loading, style: Object.assign({ objectFit: "contain" }, style) }, props)));
18
- };
19
-
20
- export { Abarth, Abarth as default, meta };
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import type { CarLogoProps, CarLogoMeta } from "../types";
3
- export declare const meta: CarLogoMeta;
4
- export declare const AlfaRomeo: React.FC<CarLogoProps>;
5
- export default AlfaRomeo;
@@ -1,20 +0,0 @@
1
- import { _ as __rest, S as SIZE_MAP } from '../types-B2mOhqdm.js';
2
- import React from 'react';
3
-
4
- const meta = {
5
- title: "Alfa Romeo",
6
- slug: "alfa-romeo",
7
- pngUrl: "https://www.carlogos.org/logo/Alfa-Romeo-logo.png",
8
- country: "Italy",
9
- region: "Italian",
10
- founded: 1910,
11
- hex: "CC0000",
12
- };
13
- const AlfaRomeo = (_a) => {
14
- var _b;
15
- var { size = "md", width, height, alt = "Alfa Romeo", loading = "lazy", style } = _a, props = __rest(_a, ["size", "width", "height", "alt", "loading", "style"]);
16
- const renderPx = (_b = width !== null && width !== void 0 ? width : height) !== null && _b !== void 0 ? _b : SIZE_MAP[size];
17
- return (React.createElement("img", Object.assign({ src: "https://www.carlogos.org/logo/Alfa-Romeo-logo.png", alt: alt, width: renderPx, height: renderPx, loading: loading, style: Object.assign({ objectFit: "contain" }, style) }, props)));
18
- };
19
-
20
- export { AlfaRomeo, AlfaRomeo as default, meta };
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import type { CarLogoProps, CarLogoMeta } from "../types";
3
- export declare const meta: CarLogoMeta;
4
- export declare const Alpine: React.FC<CarLogoProps>;
5
- export default Alpine;
@@ -1,20 +0,0 @@
1
- import { _ as __rest, S as SIZE_MAP } from '../types-B2mOhqdm.js';
2
- import React from 'react';
3
-
4
- const meta = {
5
- title: "Alpine",
6
- slug: "alpine",
7
- pngUrl: "https://www.carlogos.org/logo/Alpine-logo.png",
8
- country: "France",
9
- region: "French",
10
- founded: 1955,
11
- hex: "003087",
12
- };
13
- const Alpine = (_a) => {
14
- var _b;
15
- var { size = "md", width, height, alt = "Alpine", loading = "lazy", style } = _a, props = __rest(_a, ["size", "width", "height", "alt", "loading", "style"]);
16
- const renderPx = (_b = width !== null && width !== void 0 ? width : height) !== null && _b !== void 0 ? _b : SIZE_MAP[size];
17
- return (React.createElement("img", Object.assign({ src: "https://www.carlogos.org/logo/Alpine-logo.png", alt: alt, width: renderPx, height: renderPx, loading: loading, style: Object.assign({ objectFit: "contain" }, style) }, props)));
18
- };
19
-
20
- export { Alpine, Alpine as default, meta };
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import type { CarLogoProps, CarLogoMeta } from "../types";
3
- export declare const meta: CarLogoMeta;
4
- export declare const Arash: React.FC<CarLogoProps>;
5
- export default Arash;
@@ -1,20 +0,0 @@
1
- import { _ as __rest, S as SIZE_MAP } from '../types-B2mOhqdm.js';
2
- import React from 'react';
3
-
4
- const meta = {
5
- title: "Arash",
6
- slug: "arash",
7
- pngUrl: "https://www.carlogos.org/logo/Arash-logo.png",
8
- country: "UK",
9
- region: "British",
10
- founded: 1999,
11
- hex: "1A1A1A",
12
- };
13
- const Arash = (_a) => {
14
- var _b;
15
- var { size = "md", width, height, alt = "Arash", loading = "lazy", style } = _a, props = __rest(_a, ["size", "width", "height", "alt", "loading", "style"]);
16
- const renderPx = (_b = width !== null && width !== void 0 ? width : height) !== null && _b !== void 0 ? _b : SIZE_MAP[size];
17
- return (React.createElement("img", Object.assign({ src: "https://www.carlogos.org/logo/Arash-logo.png", alt: alt, width: renderPx, height: renderPx, loading: loading, style: Object.assign({ objectFit: "contain" }, style) }, props)));
18
- };
19
-
20
- export { Arash, Arash as default, meta };
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import type { CarLogoProps, CarLogoMeta } from "../types";
3
- export declare const meta: CarLogoMeta;
4
- export declare const AstonMartin: React.FC<CarLogoProps>;
5
- export default AstonMartin;
@@ -1,20 +0,0 @@
1
- import { _ as __rest, S as SIZE_MAP } from '../types-B2mOhqdm.js';
2
- import React from 'react';
3
-
4
- const meta = {
5
- title: "Aston Martin",
6
- slug: "aston-martin",
7
- pngUrl: "https://www.carlogos.org/logo/Aston-Martin-logo.png",
8
- country: "UK",
9
- region: "British",
10
- founded: 1913,
11
- hex: "004225",
12
- };
13
- const AstonMartin = (_a) => {
14
- var _b;
15
- var { size = "md", width, height, alt = "Aston Martin", loading = "lazy", style } = _a, props = __rest(_a, ["size", "width", "height", "alt", "loading", "style"]);
16
- const renderPx = (_b = width !== null && width !== void 0 ? width : height) !== null && _b !== void 0 ? _b : SIZE_MAP[size];
17
- return (React.createElement("img", Object.assign({ src: "https://www.carlogos.org/logo/Aston-Martin-logo.png", alt: alt, width: renderPx, height: renderPx, loading: loading, style: Object.assign({ objectFit: "contain" }, style) }, props)));
18
- };
19
-
20
- export { AstonMartin, AstonMartin as default, meta };
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import type { CarLogoProps, CarLogoMeta } from "../types";
3
- export declare const meta: CarLogoMeta;
4
- export declare const Audi: React.FC<CarLogoProps>;
5
- export default Audi;
@@ -1,20 +0,0 @@
1
- import { _ as __rest, S as SIZE_MAP } from '../types-B2mOhqdm.js';
2
- import React from 'react';
3
-
4
- const meta = {
5
- title: "Audi",
6
- slug: "audi",
7
- pngUrl: "https://www.carlogos.org/logo/Audi-logo.png",
8
- country: "Germany",
9
- region: "German",
10
- founded: 1909,
11
- hex: "1A1A1A",
12
- };
13
- const Audi = (_a) => {
14
- var _b;
15
- var { size = "md", width, height, alt = "Audi", loading = "lazy", style } = _a, props = __rest(_a, ["size", "width", "height", "alt", "loading", "style"]);
16
- const renderPx = (_b = width !== null && width !== void 0 ? width : height) !== null && _b !== void 0 ? _b : SIZE_MAP[size];
17
- return (React.createElement("img", Object.assign({ src: "https://www.carlogos.org/logo/Audi-logo.png", alt: alt, width: renderPx, height: renderPx, loading: loading, style: Object.assign({ objectFit: "contain" }, style) }, props)));
18
- };
19
-
20
- export { Audi, Audi as default, meta };
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import type { CarLogoProps, CarLogoMeta } from "../types";
3
- export declare const meta: CarLogoMeta;
4
- export declare const BMW: React.FC<CarLogoProps>;
5
- export default BMW;
package/dist/logos/BMW.js DELETED
@@ -1,20 +0,0 @@
1
- import { _ as __rest, S as SIZE_MAP } from '../types-B2mOhqdm.js';
2
- import React from 'react';
3
-
4
- const meta = {
5
- title: "BMW",
6
- slug: "bmw",
7
- pngUrl: "https://www.carlogos.org/logo/BMW-logo.png",
8
- country: "Germany",
9
- region: "German",
10
- founded: 1916,
11
- hex: "0066B2",
12
- };
13
- const BMW = (_a) => {
14
- var _b;
15
- var { size = "md", width, height, alt = "BMW", loading = "lazy", style } = _a, props = __rest(_a, ["size", "width", "height", "alt", "loading", "style"]);
16
- const renderPx = (_b = width !== null && width !== void 0 ? width : height) !== null && _b !== void 0 ? _b : SIZE_MAP[size];
17
- return (React.createElement("img", Object.assign({ src: "https://www.carlogos.org/logo/BMW-logo.png", alt: alt, width: renderPx, height: renderPx, loading: loading, style: Object.assign({ objectFit: "contain" }, style) }, props)));
18
- };
19
-
20
- export { BMW, BMW as default, meta };
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import type { CarLogoProps, CarLogoMeta } from "../types";
3
- export declare const meta: CarLogoMeta;
4
- export declare const Bentley: React.FC<CarLogoProps>;
5
- export default Bentley;
@@ -1,20 +0,0 @@
1
- import { _ as __rest, S as SIZE_MAP } from '../types-B2mOhqdm.js';
2
- import React from 'react';
3
-
4
- const meta = {
5
- title: "Bentley",
6
- slug: "bentley",
7
- pngUrl: "https://www.carlogos.org/logo/Bentley-logo.png",
8
- country: "UK",
9
- region: "British",
10
- founded: 1919,
11
- hex: "1A5276",
12
- };
13
- const Bentley = (_a) => {
14
- var _b;
15
- var { size = "md", width, height, alt = "Bentley", loading = "lazy", style } = _a, props = __rest(_a, ["size", "width", "height", "alt", "loading", "style"]);
16
- const renderPx = (_b = width !== null && width !== void 0 ? width : height) !== null && _b !== void 0 ? _b : SIZE_MAP[size];
17
- return (React.createElement("img", Object.assign({ src: "https://www.carlogos.org/logo/Bentley-logo.png", alt: alt, width: renderPx, height: renderPx, loading: loading, style: Object.assign({ objectFit: "contain" }, style) }, props)));
18
- };
19
-
20
- export { Bentley, Bentley as default, meta };
@@ -1,5 +0,0 @@
1
- import React from "react";
2
- import type { CarLogoProps, CarLogoMeta } from "../types";
3
- export declare const meta: CarLogoMeta;
4
- export declare const Brabus: React.FC<CarLogoProps>;
5
- export default Brabus;