✨ feat: Add new Claude icon and Groq

Author: canisminor1990

.husky/pre-commit

@@ -1,5 +1,6 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
+npm run sync:md
 npm run type-check
 npx --no-install lint-staged

README.md

@@ -57,49 +57,57 @@ Contributions, corrections & requests can be made on GitHub.
 
 **Supported brands:**
 
-- [x] Anthropic (Claude)
-- [x] Automatic1111 (SD Webui)
-- [x] AWS
-- [x] AWS (Bedrock)
-- [x] Baichuan (百川)
-- [x] Cloudflare
-- [x] Cloudflare (WorkersAI)
-- [x] Cohere (Command)
-- [x] Fireworks
-- [x] Github
-- [x] Github (Copilot)
-- [x] Google
-- [x] Google (Colab)
-- [x] Google (DeepMind)
-- [x] Google (Gemini)
-- [x] Google (Gemma)
-- [x] HuggingFace
-- [x] Hunyuan (腾讯混元)
-- [x] Meta (Llama)
-- [x] Microsoft (Azure)
-- [x] Microsoft (Bing)
-- [x] Microsoft (Copilot)
-- [x] Midjourney
-- [x] Minimax
-- [x] Mistral
-- [x] Moonshot (月之暗面)
-- [x] Nvidia (ChatWithRTX)
-- [x] Ollama
-- [x] OpenAI (ChatGPT)
-- [x] OpenAI (DALL·E)
-- [x] Perplexity
-- [x] Pollinations
-- [x] Replicate
-- [x] Spark (讯飞星火)
-- [x] Stability (StableDiffusion)
-- [x] Tongyi (通义)
-- [x] Wenxin (文心)
-- [x] Zhipu (ChatGLM)
-- [x] Zhipu (智谱)
-- [x] Zhipu (智谱清言)
+<!-- ICON LIST -->
+
+- [x] [Zhipu (智谱)](https://icons.lobehub.com/components/zhipu)
+- [x] [Cloudflare (WorkersAI)](https://icons.lobehub.com/components/workers-ai)
+- [x] [Wenxin (文心)](https://icons.lobehub.com/components/wenxin)
+- [x] [Tongyi (通义)](https://icons.lobehub.com/components/tongyi)
+- [x] [Stability (StableDiffusion)](https://icons.lobehub.com/components/stability)
+- [x] [Spark (讯飞星火)](https://icons.lobehub.com/components/spark)
+- [x] [Replicate](https://icons.lobehub.com/components/replicate)
+- [x] [Zhipu (智谱清言)](https://icons.lobehub.com/components/qingyan)
+- [x] [Pollinations](https://icons.lobehub.com/components/pollinations)
+- [x] [Perplexity](https://icons.lobehub.com/components/perplexity)
+- [x] [OpenRouter](https://icons.lobehub.com/components/open-router)
+- [x] [OpenAI (ChatGPT)](https://icons.lobehub.com/components/open-ai)
+- [x] [Ollama](https://icons.lobehub.com/components/ollama)
+- [x] [Nvidia (ChatWithRTX)](https://icons.lobehub.com/components/nvidia)
+- [x] [Moonshot (月之暗面)](https://icons.lobehub.com/components/moonshot)
+- [x] [Mistral](https://icons.lobehub.com/components/mistral)
+- [x] [Minimax](https://icons.lobehub.com/components/minimax)
+- [x] [Midjourney](https://icons.lobehub.com/components/midjourney)
+- [x] [Meta (Llama)](https://icons.lobehub.com/components/meta)
+- [x] [LLaVA](https://icons.lobehub.com/components/l-la-va)
+- [x] [Hunyuan (腾讯混元)](https://icons.lobehub.com/components/hunyuan)
+- [x] [HuggingFace](https://icons.lobehub.com/components/hugging-face)
+- [x] [Groq](https://icons.lobehub.com/components/groq)
+- [x] [Google](https://icons.lobehub.com/components/google)
+- [x] [Github (Copilot)](https://icons.lobehub.com/components/github-copilot)
+- [x] [Github](https://icons.lobehub.com/components/github)
+- [x] [Google (Gemma)](https://icons.lobehub.com/components/gemma)
+- [x] [Google (Gemini)](https://icons.lobehub.com/components/gemini)
+- [x] [Fireworks](https://icons.lobehub.com/components/fireworks)
+- [x] [Google (DeepMind)](https://icons.lobehub.com/components/deep-mind)
+- [x] [OpenAI (DALL·E)](https://icons.lobehub.com/components/dalle)
+- [x] [Microsoft (Copilot)](https://icons.lobehub.com/components/copilot)
+- [x] [Google (Colab)](https://icons.lobehub.com/components/colab)
+- [x] [Cohere (Command)](https://icons.lobehub.com/components/cohere)
+- [x] [Cloudflare](https://icons.lobehub.com/components/cloudflare)
+- [x] [Anthropic (Claude)](https://icons.lobehub.com/components/claude)
+- [x] [Zhipu (ChatGLM)](https://icons.lobehub.com/components/chat-glm)
+- [x] [Microsoft (Bing)](https://icons.lobehub.com/components/bing)
+- [x] [AWS (Bedrock)](https://icons.lobehub.com/components/bedrock)
+- [x] [Baichuan (百川)](https://icons.lobehub.com/components/baichuan)
+- [x] [Microsoft (Azure)](https://icons.lobehub.com/components/azure)
+- [x] [AWS](https://icons.lobehub.com/components/aws)
+- [x] [Automatic1111 (SD Webui)](https://icons.lobehub.com/components/automatic)
+- [x] [Anthropic](https://icons.lobehub.com/components/anthropic)
+
+ <!-- ICON LIST -->
 
 > \[!TIP]\
-> More brands are being added, and `PR` is welcome at the same time.
+> More brands are being added, and `PR` welcome.
 
 <div align="right">
 

package.json

@@ -45,6 +45,7 @@
     "release": "semantic-release",
     "setup": "dumi setup",
     "start": "npm run dev",
+    "sync:md": "tsx ./scripts/genMdList.ts",
     "test": "vitest --passWithNoTests",
     "test:coverage": "vitest run --coverage  --passWithNoTests",
     "test:update": "vitest -u",
@@ -78,12 +79,13 @@
     "@lobehub/lint": "latest",
     "@lobehub/ui": "^1",
     "@testing-library/react": "^14",
+    "@types/lodash-es": "^4",
     "@types/pangu": "^4",
     "@types/query-string": "^6",
-    "@types/react": "18.2.40",
+    "@types/react": "18",
     "@types/react-dom": "^18",
     "@vitest/coverage-v8": "latest",
-    "antd": "^5.14.1",
+    "antd": "^5",
     "antd-style": "^3",
     "babel-plugin-antd-style": "latest",
     "commitlint": "^18",
@@ -92,10 +94,13 @@
     "dumi": "^2",
     "dumi-theme-lobehub": "latest",
     "eslint": "^8",
-    "father": "4.3.1",
+    "father": "4",
+    "front-matter": "^4",
+    "glob": "^10",
     "husky": "^8",
     "jsdom": "^23",
     "lint-staged": "^15",
+    "lodash-es": "^4",
     "lucide-react": "latest",
     "prettier": "^3",
     "react": "^18",
@@ -105,6 +110,7 @@
     "semantic-release": "^21",
     "stylelint": "^15",
     "svgo-browser": "^1",
+    "tsx": "^4",
     "typescript": "^5",
     "vitest": "latest"
   },

scripts/genMdList.ts

@@ -0,0 +1,43 @@
+import fm from 'front-matter';
+import { globSync } from 'glob';
+import { kebabCase } from 'lodash-es';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const ROOT_PATH = resolve(__dirname, '..');
+
+const BASE_URL = 'https://icons.lobehub.com/components/';
+
+const updateReadme = (split: string, md: string, content: string): string => {
+  const mds = md.split(split);
+  mds[1] = [' ', content, ' '].join('\n\n');
+  return mds.join(split);
+};
+const run = () => {
+  const mds = globSync(resolve(ROOT_PATH, './src/**/index.md'));
+  const metas = mds
+    .map((md) => {
+      const meta: any = fm(readFileSync(md, 'utf8')).attributes;
+      const paths = md.split('/');
+      if (meta.group !== 'Icons') return false;
+      return {
+        ...meta,
+        path: paths.at(-2),
+      };
+    })
+    .filter(Boolean);
+
+  const contents = metas.map((meta) => `- [x] [${meta.title}](${BASE_URL}${kebabCase(meta.path)})`);
+
+  const readmePath = resolve(ROOT_PATH, 'README.md');
+
+  const readme = readFileSync(readmePath, 'utf8');
+
+  const newReadme = updateReadme('<!-- ICON LIST -->', readme, contents.join('\n'));
+
+  writeFileSync(readmePath, newReadme, 'utf8');
+
+  console.log(`Add ${contents.length} icons to README`);
+};
+
+run();

src/Anthropic/index.md

@@ -1,7 +1,7 @@
 ---
 nav: Components
 group: Icons
-title: Anthropic (Claude)
+title: Anthropic
 atomId: Anthropic
 description: https://anthropic.com
 ---

src/Claude/components/Avatar.tsx

@@ -0,0 +1,16 @@
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/IconAvatar';
+
+import { COLOR_PRIMARY, TITLE } from '../style';
+import Mono from './Mono';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, ...rest }) => {
+  return (
+    <IconAvatar Icon={Mono} aria-label={TITLE} background={background || COLOR_PRIMARY} {...rest} />
+  );
+});
+
+export default Avatar;

src/Claude/components/Color.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"
+        fill="#D97757"
+        fillRule="nonzero"
+      ></path>
+    </svg>
+  );
+});
+
+export default Icon;

src/Claude/components/Combine.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import Color from './Color';
+import Mono from './Mono';
+import Text from './Text';
+
+export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
+  type?: 'color' | 'mono';
+}
+const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
+  const Icon = type === 'color' ? Color : Mono;
+
+  return (
+    <IconCombine
+      Icon={Icon}
+      Text={Text}
+      aria-label={TITLE}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/Claude/components/Mono.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 24 24"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"></path>
+    </svg>
+  );
+});
+
+export default Icon;

src/Claude/components/Text.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, width: 'fit-content', ...style }}
+      viewBox="0 0 97 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M13.623 20.222c-3.417 0-5.753-1.901-6.855-4.827a12.992 12.992 0 01-.838-4.772c0-4.907 2.206-8.315 7.08-8.315 3.275 0 5.297 1.425 6.448 4.826h1.402l-.19-4.69C18.709 1.18 16.258.543 13.276.543c-4.2 0-7.775 1.874-9.763 5.254a11.357 11.357 0 00-1.511 5.872c0 3.753 1.777 7.08 5.113 8.926a11.95 11.95 0 005.943 1.398c3.254 0 5.835-.617 8.122-1.697l.593-5.172h-1.43c-.858 2.362-1.88 3.78-3.574 4.534-.831.373-1.88.564-3.146.564zm14.74-17.914L28.499 0h-.967L23.23 1.29v.699l1.907.882v16.142c0 1.1-.565 1.344-2.043 1.528v1.18h7.319v-1.18c-1.484-.184-2.042-.428-2.042-1.528V2.315l-.007-.007zm29.104 19.685h.565l4.95-.937v-1.208l-.695-.054c-1.157-.109-1.457-.346-1.457-1.29V9.897l.137-2.763h-.783l-4.678.672v1.181l.457.082c1.266.183 1.64.536 1.64 1.419v7.67c-1.212.937-2.369 1.527-3.744 1.527-1.525 0-2.471-.774-2.471-2.58V9.905l.136-2.763h-.804l-4.684.672v1.181l.484.082c1.266.183 1.64.536 1.64 1.418v7.08c0 3 1.703 4.426 4.412 4.426 2.07 0 3.765-1.1 5.038-2.627L57.474 22l-.007-.007zm-13.602-9.55c0-3.836-2.043-5.309-5.733-5.309-3.254 0-5.616 1.344-5.616 3.57 0 .666.238 1.175.721 1.528l2.478-.326c-.109-.746-.163-1.201-.163-1.391 0-1.263.674-1.901 2.042-1.901 2.022 0 3.044 1.419 3.044 3.7v.746l-5.106 1.527c-1.702.462-2.67.863-3.316 1.8a3.386 3.386 0 00-.476 1.9c0 2.172 1.497 3.706 4.057 3.706 1.852 0 3.493-.835 4.922-2.416.51 1.581 1.294 2.416 2.69 2.416 1.13 0 2.15-.455 3.063-1.344l-.272-.937a4.363 4.363 0 01-1.178.163c-.783 0-1.157-.617-1.157-1.826v-5.607zm-6.536 7.378c-1.396 0-2.26-.808-2.26-2.226 0-.964.456-1.528 1.43-1.854l4.139-1.31v3.965c-1.321.997-2.097 1.425-3.31 1.425zm43.095 1.235v-1.208l-.701-.054c-1.158-.109-1.45-.346-1.45-1.29V2.308L78.409 0h-.974l-4.302 1.29v.699l1.906.882V8.18a6.024 6.024 0 00-3.656-1.046c-4.276 0-7.612 3.245-7.612 8.098 0 3.998 2.397 6.761 6.346 6.761 2.042 0 3.819-.99 4.922-2.525l-.136 2.525h.571l4.95-.937zm-8.96-12.313c2.043 0 3.575 1.181 3.575 3.353v6.11a4.91 4.91 0 01-3.547 1.425c-2.928 0-4.412-2.308-4.412-5.39 0-3.462 1.695-5.498 4.385-5.498zm19.424 3.055c-.381-1.792-1.484-2.81-3.016-2.81-2.288 0-3.874 1.717-3.874 4.18 0 3.646 1.934 6.008 5.059 6.008a5.858 5.858 0 005.03-2.953l.913.245c-.408 3.163-3.281 5.525-6.808 5.525-4.14 0-6.992-3.054-6.992-7.399 0-4.378 3.098-7.46 7.237-7.46 3.09 0 5.27 1.853 5.97 5.07l-10.783 3.3V14.05l7.264-2.247v-.006z"></path>
+    </svg>
+  );
+});
+
+export default Icon;