@ cardog-icons/ 反应

对应汽车品牌标志和图标的组件.

特征

• 380+ 优化 SVG 图标 汽车品牌
• 两个变体: 颜色( 默认) 和 Mono( 暗模式优化)
• 带有完整类型定义的脚本类型支持
• 树可摇动, 只导入所需
• 方便定制大小、颜色和其他 SVG 道具
• 轻而易举

安装

npm install @cardog-icons/react
# or
yarn add @cardog-icons/react
# or
pnpm add @cardog-icons/react

使用量

导入特定图标

import {
  BMWLogo,
  BMWLogoDark,
  AudiIcon,
  TeslaWordmark,
} from "@cardog-icons/react";

function App() {
  return (
    <div>
      {/* Color variants (default) */}
      <BMWLogo size={48} />
      <AudiIcon size={32} />
      <TeslaWordmark height={24} width={120} />

      {/* Mono/Dark variants - great for dark mode */}
      <BMWLogoDark size={48} className="text-white" />
    </div>
  );
}

使用通用图标组件

import { Icon } from "@cardog-icons/react";

function App() {
  return (
    <div>
      <Icon name="BMWLogo" size={48} />
      <Icon name="BMWLogoDark" size={48} />
      <Icon name="AudiIcon" size={32} />
    </div>
  );
}

使用 Icon 钩子

import { useIcon } from "@cardog-icons/react";

function CustomIcon({ name, ...props }) {
  const icon = useIcon({ name, ...props });

  return <div className="custom-icon-wrapper">{icon}</div>;
}

图标变量

每个品牌分为两种:

可用的图标类型

• 图标: 紧凑徽章/雕塑图标
• 标记: 完整的品牌标志
• 逻辑: 有文本的水平标志
• 文字标记: 只有文本的品牌名称

命名实例

可用品牌

阿库拉、阿尔法·罗密欧、阿斯顿·马丁、奥迪、本特利、宝马、布加蒂*、别克*、BYD、凯迪拉克、切夫罗莱特、克莱斯勒、道奇、法拉利、菲亚特、福特、创世纪、GMC、本田、悍马、现代、英菲尼蒂、贾瓜尔、吉普、基亚、柯尼格塞格、兰博基尼、地漫游、莱克萨斯、林肯、莲花、路西德、马塞拉蒂、马兹达、梅赛德斯-奔驰、麦克拉伦、米尼、三菱、尼桑、帕加尼*、波兰星、波尔什、RAM、里维昂*、罗斯-罗伊斯、苏巴鲁、特斯拉、丰田、文法斯特、伏克萨、沃尔沃

*只变体

道具

所有图标组件接受以下道具:

许可证

麻省理工学院