✨ feat: Add Civitai

src/Civitai/components/Avatar.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
+
+import { COLOR_PRIMARY, TITLE } from '../style';
+import Color from './Color';
+
+export type AvatarProps = Omit<IconAvatarProps, 'Icon'>;
+
+const Avatar = memo<AvatarProps>(({ background, size, ...rest }) => {
+  return (
+    <IconAvatar
+      Icon={Color}
+      aria-label={TITLE}
+      background={background || COLOR_PRIMARY}
+      color={'#fff'}
+      size={size}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Civitai/components/Color.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+import { useFillIds } from '@/hooks/useFillId';
+import type { IconType } from '@/types';
+
+import { TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  const [a, b] = useFillIds(TITLE, 2);
+  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="M12 0l10.392 6v12L12 24 1.608 18V6L12 0z" fill={a.fill} />
+      <path d="M12 3.934l6.985 4.033v8.066L12 20.065l-6.985-4.032V7.967L12 3.934z" fill={b.fill} />
+      <path
+        d="M12 6.885l4.43 2.558v1.377h-2.386L12 9.64l-2.044 1.18v2.36L12 14.36l2.044-1.18h2.386v1.377L12 17.115l-4.43-2.558V9.443L12 6.885z"
+        fill="#fff"
+        fillRule="evenodd"
+      />
+      <defs>
+        <linearGradient gradientUnits="userSpaceOnUse" id={a.id} x1="12" x2="12" y1="0" y2="24">
+          <stop stopColor="#1281F4" />
+          <stop offset="1" stopColor="#0821C6" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={b.id}
+          x1="12"
+          x2="12"
+          y1="3.934"
+          y2="20.066"
+        >
+          <stop stopColor="#09138A" />
+          <stop offset="1" stopColor="#150740" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+});
+
+export default Icon;

src/Civitai/components/Combine.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconCombine, { type IconCombineProps } from '@/features/IconCombine';
+
+import { SPACE_MULTIPLE, TEXT_MULTIPLE, TITLE } from '../style';
+import Color from './Color';
+import Mono from './Mono';
+import Text from './Text';
+import TextColor from './TextColor';
+
+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={type === 'color' ? TextColor : Text}
+      aria-label={TITLE}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/Civitai/components/Mono.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+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="M22.392 6L12 0 1.608 6v12L12 24l10.392-6V6zm-3.407 1.967L12 3.934 5.015 7.967v8.066L12 20.065l6.985-4.032V7.967z" />
+      <path d="M12 6.885l4.43 2.558v1.377h-2.386L12 9.64l-2.044 1.18v2.36L12 14.36l2.044-1.18h2.386v1.377L12 17.115l-4.43-2.558V9.443L12 6.885z" />
+    </svg>
+  );
+});
+
+export default Icon;

src/Civitai/components/Text.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+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 110 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M21.594 2H4.234L2 4.437v15.228L4.335 22h17.36v-5.28H7.28V7.38h14.315V2zM77.736 2H57.939v5.38h7.31v14.518h5.279V7.381h7.106L77.737 2zm-53.706.102v19.796h5.28V2.102h-5.28zm7.716 0v19.796h7.716l8.426-8.426V2.102H42.61v8.426l-5.482 6.091V2.102h-5.38zm18.579 0v19.796h5.28V2.102h-5.28z" />
+      <path d="M102.305 2.102v19.796h5.279V2.102h-5.279zm-4.772 0H82.508l-2.335 2.335v17.462h5.279V14.69h9.035v7.208h5.28V4.438l-2.234-2.335zM94.589 9.31h-9.036V7.38h9.036v1.93zM47.888 16.72v5.178h-5.177" />
+    </svg>
+  );
+});
+
+export default Icon;

src/Civitai/components/TextColor.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+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 110 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M21.594 2H4.234L2 4.437v15.228L4.335 22h17.36v-5.28H7.28V7.38h14.315V2zM77.736 2H57.939v5.38h7.31v14.518h5.279V7.381h7.106L77.737 2zm-53.706.102v19.796h5.28V2.102h-5.28zm7.716 0v19.796h7.716l8.426-8.426V2.102H42.61v8.426l-5.482 6.091V2.102h-5.38zm18.579 0v19.796h5.28V2.102h-5.28z" />
+      <path
+        d="M102.305 2.102v19.796h5.279V2.102h-5.279zm-4.772 0H82.508l-2.335 2.335v17.462h5.279V14.69h9.035v7.208h5.28V4.438l-2.234-2.335zM94.589 9.31h-9.036V7.38h9.036v1.93zM47.888 16.72v5.178h-5.177"
+        fill="#1970C2"
+      />
+    </svg>
+  );
+});
+
+export default Icon;

src/Civitai/index.md

@@ -0,0 +1,80 @@
+---
+nav: Components
+group:
+  title: Provider
+  order: 10
+title: Civitai
+atomId: Civitai
+description: https://civitai.com
+---
+
+## Icons
+
+```tsx
+import { Civitai } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Civitai size={64} />
+    <Civitai.Color size={64} />
+  </Flexbox>
+);
+```
+
+## Text
+
+```tsx
+import { Civitai } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} align={'flex-start'}>
+    <Civitai.Text size={48} />
+    <Civitai.TextColor size={48} />
+  </Flexbox>
+);
+```
+
+## Combine
+
+```tsx
+import { Civitai } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} align={'flex-start'}>
+    <Civitai.Combine size={64} />
+    <Civitai.Combine size={64} type={'color'} />
+  </Flexbox>
+);
+```
+
+## Avatars
+
+```tsx
+import { Civitai } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Civitai.Avatar size={64} />
+    <Civitai.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { Civitai } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={Civitai.colorPrimary} />
+  </Flexbox>
+);
+```

src/Civitai/index.ts

@@ -0,0 +1,30 @@
+'use client';
+
+import Avatar from './components/Avatar';
+import Color from './components/Color';
+import Combine from './components/Combine';
+import Mono from './components/Mono';
+import Text from './components/Text';
+import TextColor from './components/TextColor';
+import { COLOR_PRIMARY, TITLE } from './style';
+
+export type CompoundedIcon = typeof Mono & {
+  Avatar: typeof Avatar;
+  Color: typeof Color;
+  Combine: typeof Combine;
+  Text: typeof Text;
+  TextColor: typeof TextColor;
+  colorPrimary: string;
+  title: string;
+};
+
+const Icons = Mono as CompoundedIcon;
+Icons.Color = Color;
+Icons.Text = Text;
+Icons.TextColor = TextColor;
+Icons.Combine = Combine;
+Icons.Avatar = Avatar;
+Icons.colorPrimary = COLOR_PRIMARY;
+Icons.title = TITLE;
+
+export default Icons;

src/Civitai/style.ts

@@ -0,0 +1,4 @@
+export const TITLE = 'Civitai';
+export const TEXT_MULTIPLE = 0.75;
+export const SPACE_MULTIPLE = 0.2;
+export const COLOR_PRIMARY = '#fff';

src/icons.ts

@@ -18,6 +18,7 @@ export { default as Bedrock, type CompoundedIcon as BedrockProps } from './Bedro
 export { default as Bing, type CompoundedIcon as BingProps } from './Bing';
 export { default as ByteDance, type CompoundedIcon as ByteDanceProps } from './ByteDance';
 export { default as ChatGLM, type CompoundedIcon as ChatGLMProps } from './ChatGLM';
+export { default as Civitai, type CompoundedIcon as CivitaiProps } from './Civitai';
 export { default as Claude, type CompoundedIcon as ClaudeProps } from './Claude';
 export { default as Cloudflare, type CompoundedIcon as CloudflareProps } from './Cloudflare';
 export { default as CodeGeeX, type CompoundedIcon as CodeGeeXProps } from './CodeGeeX';

src/toc.ts

@@ -406,6 +406,25 @@ const toc: IconToc[] = [
     },
     title: 'ChatGLM',
   },
+  {
+    color: '#fff',
+    desc: 'https://civitai.com',
+    docsUrl: 'civitai',
+    fullTitle: 'Civitai',
+    group: 'provider',
+    id: 'Civitai',
+    param: {
+      hasAvatar: true,
+      hasBrand: false,
+      hasBrandColor: false,
+      hasColor: true,
+      hasCombine: true,
+      hasText: true,
+      hasTextCn: false,
+      hasTextColor: false,
+    },
+    title: 'Civitai',
+  },
   {
     color: '#D97757',
     desc: 'https://claude.ai',