✨ feat: Add Udio (#55)

src/Udio/components/Avatar.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/features/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}
+      color={'#fff'}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;

src/Udio/components/Color.tsx

@@ -0,0 +1,30 @@
+'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
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 1024 1024"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        d="M 668.188 62.6218 C 676.968 61.7254 686.438 62.6748 695.307 62.7518 L 745.48 62.8271 C 815.122 62.8574 885.28 64.6087 954.843 61.7725 L 954.808 431.933 L 954.833 541.836 C 954.829 572.668 955.342 603.42 952.113 634.141 C 948.507 668.455 940.372 703.646 927.866 735.835 A 368.694 368.694 0 0 1 794.617 907.377 C 782.643 915.767 769.653 924.895 756.276 930.804 A 414.879 414.879 0 0 1 649.252 971.269 C 634.29 974.689 619.078 976.685 604.159 980.201 C 588.357 967.305 574.125 951.422 559.712 936.969 L 481.274 858.487 C 451.358 828.829 420.951 799.761 391.267 769.844 C 378.727 757.206 364.792 744.776 353.668 730.913 C 358.072 759.676 355.648 803.477 355.649 833.963 A 11475.7 11475.7 0 0 1 355.088 1015.1 A 39.0499 39.0499 0 0 1 353.169 1013.67 C 343.397 1005.98 334.656 995.891 325.861 987.061 A 6019.64 6019.64 0 0 0 274.477 935.759 L 150.482 812.294 C 128.115 789.919 104.981 767.918 83.2045 745.001 C 80.295 741.939 74.274 736.305 73.7422 732.122 C 75.4631 731.848 76.8431 731.823 78.5705 732.096 C 78.7407 732.123 78.9103 732.153 79.0802 732.182 L 78.8615 731.673 C 114.885 729.568 151.814 731.125 187.925 731.131 C 243.092 731.14 298.359 730.408 353.514 731.174 A 24783.8 24783.8 0 0 1 70.0479 449.02 C 68.1087 434.229 69.1978 418.333 69.2121 403.387 L 69.2746 324.021 L 68.721 69.1705 C 68.728 67.4885 69.1564 66.0449 69.878 64.5256 C 72.317 62.8615 74.1877 62.9258 77.1213 62.7621 C 98.6773 61.5593 121.057 62.8007 142.693 62.8106 C 205.363 62.8391 268.531 64.5554 331.147 62.5487 C 339.296 61.9984 347.579 62.1057 355.75 61.9371 L 355.631 500.527 A 14415.7 14415.7 0 0 1 354.905 731.592 C 372.55 729.747 391.814 731.168 409.609 731.169 L 524.505 731.142 C 564.457 730.871 601.478 723.328 630.52 693.714 C 652.824 670.97 662.183 641.626 666.99 610.837 C 670.29 589.702 668.734 566.024 668.717 544.606 L 668.619 434.989 C 668.571 310.893 669.704 186.704 668.188 62.6218 z"
+        fill="#e30a5d"
+        transform="translate(0,0)"
+      />
+    </svg>
+  );
+});
+
+export default Icon;

src/Udio/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';
+
+export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
+  type?: 'color' | 'mono';
+}
+const Combine = memo<CombineProps>(({ type = 'mono', extraStyle, ...rest }) => {
+  const Icon = type === 'color' ? Color : Mono;
+
+  return (
+    <IconCombine
+      Icon={Icon}
+      Text={Text}
+      aria-label={TITLE}
+      extraStyle={{ fontWeight: 500, ...extraStyle }}
+      spaceMultiple={SPACE_MULTIPLE}
+      textMultiple={TEXT_MULTIPLE}
+      {...rest}
+    />
+  );
+});
+
+export default Combine;

src/Udio/components/Mono.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 1024 1024"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        d="M 668.188 62.6218 C 676.968 61.7254 686.438 62.6748 695.307 62.7518 L 745.48 62.8271 C 815.122 62.8574 885.28 64.6087 954.843 61.7725 L 954.808 431.933 L 954.833 541.836 C 954.829 572.668 955.342 603.42 952.113 634.141 C 948.507 668.455 940.372 703.646 927.866 735.835 A 368.694 368.694 0 0 1 794.617 907.377 C 782.643 915.767 769.653 924.895 756.276 930.804 A 414.879 414.879 0 0 1 649.252 971.269 C 634.29 974.689 619.078 976.685 604.159 980.201 C 588.357 967.305 574.125 951.422 559.712 936.969 L 481.274 858.487 C 451.358 828.829 420.951 799.761 391.267 769.844 C 378.727 757.206 364.792 744.776 353.668 730.913 C 358.072 759.676 355.648 803.477 355.649 833.963 A 11475.7 11475.7 0 0 1 355.088 1015.1 A 39.0499 39.0499 0 0 1 353.169 1013.67 C 343.397 1005.98 334.656 995.891 325.861 987.061 A 6019.64 6019.64 0 0 0 274.477 935.759 L 150.482 812.294 C 128.115 789.919 104.981 767.918 83.2045 745.001 C 80.295 741.939 74.274 736.305 73.7422 732.122 C 75.4631 731.848 76.8431 731.823 78.5705 732.096 C 78.7407 732.123 78.9103 732.153 79.0802 732.182 L 78.8615 731.673 C 114.885 729.568 151.814 731.125 187.925 731.131 C 243.092 731.14 298.359 730.408 353.514 731.174 A 24783.8 24783.8 0 0 1 70.0479 449.02 C 68.1087 434.229 69.1978 418.333 69.2121 403.387 L 69.2746 324.021 L 68.721 69.1705 C 68.728 67.4885 69.1564 66.0449 69.878 64.5256 C 72.317 62.8615 74.1877 62.9258 77.1213 62.7621 C 98.6773 61.5593 121.057 62.8007 142.693 62.8106 C 205.363 62.8391 268.531 64.5554 331.147 62.5487 C 339.296 61.9984 347.579 62.1057 355.75 61.9371 L 355.631 500.527 A 14415.7 14415.7 0 0 1 354.905 731.592 C 372.55 729.747 391.814 731.168 409.609 731.169 L 524.505 731.142 C 564.457 730.871 601.478 723.328 630.52 693.714 C 652.824 670.97 662.183 641.626 666.99 610.837 C 670.29 589.702 668.734 566.024 668.717 544.606 L 668.619 434.989 C 668.571 310.893 669.704 186.704 668.188 62.6218 z"
+        transform="translate(0,0)"
+      />
+    </svg>
+  );
+});
+
+export default Icon;

src/Udio/components/Text.tsx

@@ -0,0 +1,47 @@
+'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 650 194"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        d="M195.619 58.9477C188.381 53.2852 178.512 50.0365 167.771 50.0365C137.522 50.0365 115.81 73.5214 115.81 105.067C115.81 136.614 137.507 160.098 167.771 160.098C178.727 160.098 188.81 156.394 196.276 150.307V157.912H229.158V0L195.619 8.28283V58.9477ZM173.693 130.071C159.876 130.071 149.793 119.626 149.793 105.052C149.793 90.4786 159.876 80.0341 173.907 80.0341C187.938 80.0341 197.577 90.2509 197.577 105.052C197.577 119.854 187.938 130.071 173.677 130.071H173.693Z"
+        fill="white"
+      />
+      <path d="M282.618 48.879L249.079 57.1619V157.897H282.618V48.879Z" fill="white" />
+      <path
+        d="M265.956 1.07785C255.429 1.07785 247.763 9.12376 247.763 19.3557C247.763 29.5877 255.429 37.6336 265.956 37.6336C276.482 37.6336 283.934 29.5877 283.934 19.3557C283.934 9.12376 276.482 1.07785 265.956 1.07785Z"
+        fill="white"
+      />
+      <path
+        d="M353.689 49.8088C320.365 49.8088 295.379 73.5214 295.379 104.84C295.379 136.158 320.594 160.311 353.689 160.311C386.785 160.311 412 136.386 412 104.84C412 73.2937 386.785 49.8088 353.689 49.8088ZM353.689 130.071C339.444 130.071 329.576 119.854 329.576 105.052C329.576 90.2509 339.444 80.0341 353.689 80.0341C367.934 80.0341 377.803 90.0383 377.803 104.825C377.803 119.611 368.164 130.055 353.689 130.055V130.071Z"
+        fill="white"
+      />
+      <path
+        d="M70.796 113.098C70.796 124.196 64.6605 130.723 54.5773 130.723H33.539V52.1922H0V97.4315L33.539 130.723H0L33.539 164V130.723L62.8091 159.764C87.6879 156.531 104.335 138.481 104.335 113.326V52.1922H70.796V113.098Z"
+        fill="white"
+      />
+      <path
+        d="M437.504 192V119.273H454.869V146.794H455.224C455.935 145.137 456.941 143.539 458.243 142C459.569 140.461 461.25 139.206 463.286 138.236C465.345 137.241 467.807 136.744 470.672 136.744C474.46 136.744 477.999 137.739 481.29 139.727C484.604 141.716 487.279 144.782 489.315 148.925C491.351 153.068 492.369 158.347 492.369 164.763C492.369 170.942 491.387 176.115 489.422 180.281C487.481 184.448 484.853 187.573 481.538 189.656C478.248 191.74 474.59 192.781 470.565 192.781C467.819 192.781 465.44 192.331 463.428 191.432C461.415 190.532 459.723 189.348 458.349 187.881C457 186.413 455.958 184.839 455.224 183.158H454.692V192H437.504ZM454.514 164.727C454.514 167.663 454.905 170.22 455.686 172.398C456.491 174.576 457.639 176.268 459.131 177.476C460.646 178.66 462.457 179.251 464.564 179.251C466.695 179.251 468.506 178.66 469.997 177.476C471.489 176.268 472.613 174.576 473.371 172.398C474.152 170.22 474.543 167.663 474.543 164.727C474.543 161.792 474.152 159.247 473.371 157.092C472.613 154.938 471.489 153.269 469.997 152.085C468.529 150.902 466.718 150.31 464.564 150.31C462.433 150.31 460.622 150.89 459.131 152.05C457.639 153.21 456.491 154.867 455.686 157.021C454.905 159.176 454.514 161.744 454.514 164.727ZM526.966 193.03C521.261 193.03 516.337 191.905 512.194 189.656C508.074 187.384 504.902 184.152 502.676 179.962C500.475 175.748 499.374 170.741 499.374 164.94C499.374 159.306 500.487 154.382 502.712 150.168C504.937 145.93 508.074 142.639 512.123 140.295C516.171 137.928 520.941 136.744 526.434 136.744C530.316 136.744 533.867 137.348 537.087 138.555C540.307 139.763 543.088 141.55 545.432 143.918C547.776 146.285 549.599 149.209 550.901 152.689C552.203 156.145 552.854 160.111 552.854 164.585V168.918H505.446V158.832H536.696C536.673 156.986 536.235 155.34 535.382 153.896C534.53 152.452 533.358 151.328 531.867 150.523C530.399 149.694 528.706 149.28 526.789 149.28C524.847 149.28 523.107 149.718 521.569 150.594C520.03 151.446 518.81 152.618 517.911 154.109C517.011 155.577 516.538 157.246 516.49 159.116V169.379C516.49 171.605 516.928 173.558 517.804 175.239C518.68 176.896 519.923 178.186 521.533 179.109C523.143 180.033 525.06 180.494 527.286 180.494C528.825 180.494 530.221 180.281 531.476 179.855C532.731 179.429 533.808 178.802 534.708 177.973C535.607 177.144 536.282 176.126 536.732 174.919L552.676 175.381C552.014 178.955 550.558 182.069 548.309 184.72C546.083 187.348 543.159 189.396 539.537 190.864C535.915 192.308 531.725 193.03 526.966 193.03ZM592.511 137.455V150.239H558.101V137.455H592.511ZM565.31 124.386H582.675V174.848C582.675 175.913 582.84 176.777 583.172 177.44C583.527 178.08 584.036 178.541 584.699 178.825C585.362 179.086 586.155 179.216 587.078 179.216C587.741 179.216 588.439 179.157 589.173 179.038C589.931 178.896 590.499 178.778 590.878 178.683L593.506 191.219C592.677 191.455 591.505 191.751 589.99 192.107C588.499 192.462 586.711 192.687 584.628 192.781C580.556 192.971 577.064 192.497 574.152 191.361C571.264 190.201 569.05 188.402 567.511 185.963C565.996 183.525 565.262 180.459 565.31 176.766V124.386ZM616.748 192.923C613.268 192.923 610.178 192.343 607.479 191.183C604.804 190 602.685 188.224 601.123 185.857C599.584 183.465 598.815 180.471 598.815 176.872C598.815 173.842 599.347 171.285 600.413 169.202C601.478 167.118 602.946 165.426 604.816 164.124C606.686 162.821 608.841 161.839 611.279 161.176C613.718 160.49 616.322 160.028 619.092 159.791C622.193 159.507 624.691 159.211 626.585 158.903C628.478 158.572 629.852 158.11 630.704 157.518C631.58 156.903 632.018 156.039 632.018 154.926V154.749C632.018 152.926 631.39 151.517 630.136 150.523C628.881 149.528 627.188 149.031 625.058 149.031C622.761 149.031 620.915 149.528 619.518 150.523C618.121 151.517 617.233 152.89 616.854 154.642L600.839 154.074C601.312 150.759 602.531 147.8 604.496 145.196C606.485 142.568 609.208 140.509 612.664 139.017C616.144 137.502 620.323 136.744 625.2 136.744C628.68 136.744 631.888 137.159 634.823 137.987C637.759 138.792 640.316 139.976 642.494 141.538C644.672 143.077 646.353 144.971 647.536 147.22C648.744 149.469 649.347 152.038 649.347 154.926V192H633.012V184.401H632.586C631.615 186.247 630.372 187.81 628.857 189.088C627.366 190.366 625.602 191.325 623.566 191.964C621.554 192.604 619.281 192.923 616.748 192.923ZM622.11 181.56C623.98 181.56 625.661 181.181 627.153 180.423C628.668 179.666 629.875 178.624 630.775 177.298C631.674 175.949 632.124 174.386 632.124 172.611V167.426C631.627 167.687 631.023 167.923 630.313 168.136C629.627 168.349 628.869 168.551 628.04 168.74C627.212 168.929 626.36 169.095 625.484 169.237C624.608 169.379 623.767 169.509 622.962 169.628C621.329 169.888 619.932 170.291 618.772 170.835C617.636 171.38 616.76 172.09 616.144 172.966C615.552 173.818 615.256 174.836 615.256 176.02C615.256 177.819 615.896 179.192 617.174 180.139C618.476 181.086 620.121 181.56 622.11 181.56Z"
+        fill="white"
+      />
+    </svg>
+  );
+});
+
+export default Icon;

src/Udio/index.md

@@ -0,0 +1,58 @@
+---
+nav: Components
+group: Application
+title: Udio
+atomId: Udio
+description: https://www.udio.com
+---
+
+## Icons
+
+```tsx
+import { Udio } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Udio size={64} />
+    <Udio.Color size={64} />
+  </Flexbox>
+);
+```
+
+## Text
+
+```tsx
+import { Udio } from '@lobehub/icons';
+
+export default () => <Udio.Text size={48} />;
+```
+
+## Avatars
+
+```tsx
+import { Udio } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Udio.Avatar size={64} />
+    <Udio.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { Udio } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={Udio.colorPrimary} />
+  </Flexbox>
+);
+```

src/Udio/index.ts

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

src/Udio/style.ts

@@ -0,0 +1,4 @@
+export const TITLE = 'Udio';
+export const TEXT_MULTIPLE = 0.75;
+export const SPACE_MULTIPLE = 0.15;
+export const COLOR_PRIMARY = '#e30a5d';

src/features/modelConfig.ts

@@ -44,6 +44,7 @@ import Spark from '@/Spark';
 import Stability from '@/Stability';
 import Stepfun from '@/Stepfun';
 import Suno from '@/Suno';
+import Udio from '@/Udio';
 import Upstage from '@/Upstage';
 import Wenxin from '@/Wenxin';
 import Yi from '@/Yi';
@@ -147,4 +148,5 @@ export const modelMappings: ModelMapping[] = [
       '^lite$',
     ],
   },
+  { Icon: Udio, keywords: ['udio'] },
 ];

src/icons.ts

@@ -101,6 +101,7 @@ export { default as Tencent, type CompoundedIcon as TencentProps } from './Tence
 export { default as Tiangong, type CompoundedIcon as TiangongProps } from './Tiangong';
 export { default as TII, type CompoundedIcon as TIIProps } from './TII';
 export { default as Together, type CompoundedIcon as TogetherProps } from './Together';
+export { default as Udio, type CompoundedIcon as UdioProps } from './Udio';
 export { default as Upstage, type CompoundedIcon as UpstageProps } from './Upstage';
 export { default as V0, type CompoundedIcon as V0Props } from './V0';
 export { default as Vercel, type CompoundedIcon as VercelProps } from './Vercel';

src/toc.ts

@@ -1946,6 +1946,25 @@ const toc: IconToc[] = [
     },
     title: 'together.ai',
   },
+  {
+    color: '#e30a5d',
+    desc: 'https://www.udio.com',
+    docsUrl: 'udio',
+    fullTitle: 'Udio',
+    group: 'application',
+    id: 'Udio',
+    param: {
+      hasAvatar: true,
+      hasBrand: false,
+      hasBrandColor: false,
+      hasColor: true,
+      hasCombine: false,
+      hasText: true,
+      hasTextCn: false,
+      hasTextColor: false,
+    },
+    title: 'Udio',
+  },
   {
     color: '#908AF9',
     colorGradient: 'linear-gradient(to bottom, #AEBCFE,  #805DFA)',