✨ feat: add new provider icon PPIO (#72)

* 💄 feat: add new provider icon PPIO * 🐛 fix: fix import * 🐛 fix: fix import * 💄 fix: fix ppio icons * 💄 fix: fix ppio brand icon * 💄 fix: add ppio combile icon * 💄 fix: restore README --------- Co-authored-by: arvinxx <arvinx@foxmail.com>
lobehub · Feb 14, 2025 · 775d232 · 775d232
1 parent 02b4fba
commit 775d232
Show file tree

Hide file tree

Showing 15 changed files with 397 additions and 1 deletion.
diff --git a/src/PPIO/components/Avatar.tsx b/src/PPIO/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 || '#fff'}
+      color={COLOR_PRIMARY}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;
diff --git a/src/PPIO/components/BrandColor.tsx b/src/PPIO/components/BrandColor.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { COLOR_PRIMARY, TITLE } from '../style';
+
+const Icon: IconType = forwardRef(({ size = '1em', style, ...rest }, ref) => {
+  return (
+    <svg
+      fill="currentColor"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 300 100"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        d="M49.4653 0.800003C22.1583 0.800003 0 22.9189 0 50.2308C0 63.6945 5.38922 75.9079 14.1467 84.8276V50.2789C14.1467 40.8544 17.8277 31.9587 24.4921 25.299C31.1805 18.6153 40.0582 14.9609 49.4894 14.9609C49.5856 14.9609 49.6818 14.9609 49.7781 14.9609L49.4653 14.9849C68.9772 14.9849 84.808 30.8047 84.808 50.303C84.808 52.01 84.6877 53.6689 84.4471 55.3278L64.4781 35.3006C60.4843 31.3096 55.1432 29.0977 49.4894 29.0977C43.8355 29.0977 38.4944 31.3096 34.5006 35.3006C30.4828 39.3157 28.2934 44.629 28.2934 50.303C28.2934 55.9529 30.5068 61.2903 34.5006 65.3053C38.4944 69.2963 43.8355 71.5082 49.4894 71.5082C55.1432 71.5082 60.4843 69.2963 64.4781 65.3053C68.2073 61.5788 70.3485 56.7222 70.6372 51.5051L82.354 63.2617C77.1813 76.3648 64.406 85.6451 49.4653 85.6451C41.7183 85.6451 34.3322 83.1687 28.2693 78.5766V94.9254C34.6931 97.9787 41.8627 99.6857 49.4413 99.6857C76.7482 99.6857 98.9066 77.5669 98.9066 50.2549C98.9306 22.9189 76.7963 0.800003 49.4653 0.800003Z"
+        fill={COLOR_PRIMARY}
+      />
+      <path
+        clipRule="evenodd"
+        d="M140.147 78.1637V57.285H154.194C159.052 57.285 162.808 55.8581 165.462 53.0041C168.116 50.1502 169.443 46.32 169.443 41.5134C169.443 36.7068 168.116 32.8765 165.462 30.0226C162.808 27.1687 159.052 25.7417 154.194 25.7417H131.658V78.1637H140.147ZM153.668 49.8498H140.147V33.1769H153.668C155.822 33.1769 157.499 33.7402 158.701 34.8668C159.903 35.9933 160.504 37.608 160.504 39.7109V43.3158C160.504 45.4187 159.903 47.0335 158.701 48.16C157.499 49.2865 155.822 49.8498 153.668 49.8498ZM187.246 57.285V78.1637H178.758V25.7417H201.294C206.151 25.7417 209.907 27.1687 212.562 30.0226C215.216 32.8765 216.543 36.7068 216.543 41.5134C216.543 46.32 215.216 50.1502 212.562 53.0041C209.907 55.8581 206.151 57.285 201.294 57.285H187.246ZM200.768 49.8498H187.246V33.1769H200.768C202.921 33.1769 204.599 33.7402 205.801 34.8668C207.003 35.9933 207.604 37.608 207.604 39.7109V43.3158C207.604 45.4187 207.003 47.0335 205.801 48.16C204.599 49.2865 202.921 49.8498 200.768 49.8498ZM246.44 71.2542V78.1637H223.604V71.2542H230.74V32.6512H223.604V25.7417H246.44V32.6512H239.229V71.2542H246.44ZM277.389 78.1712C280.795 78.1712 283.887 77.6024 286.666 76.4649C289.446 75.3273 291.825 73.6572 293.803 71.4546C295.781 69.252 297.308 66.517 298.385 63.2494C299.462 59.9819 300 56.2181 300 51.9582C300 47.6983 299.462 43.9346 298.385 40.667C297.308 37.3995 295.781 34.6644 293.803 32.4618C291.825 30.2593 289.446 28.5892 286.666 27.4516C283.887 26.314 280.795 25.7452 277.389 25.7452C273.984 25.7452 270.891 26.314 268.112 27.4516C265.333 28.5892 262.954 30.2593 260.976 32.4618C258.998 34.6644 257.47 37.3995 256.393 40.667C255.317 43.9346 254.778 47.6983 254.778 51.9582C254.778 56.2181 255.317 59.9819 256.393 63.2494C257.47 66.517 258.998 69.252 260.976 71.4546C262.954 73.6572 265.333 75.3273 268.112 76.4649C270.891 77.6024 273.984 78.1712 277.389 78.1712ZM271.64 69.586C273.348 70.2548 275.263 70.5892 277.385 70.5892C279.455 70.5892 281.357 70.2548 283.09 69.586C284.824 68.9172 286.299 67.9498 287.515 66.6839C288.731 65.4179 289.676 63.8773 290.349 62.0619C291.022 60.2466 291.358 58.1924 291.358 55.8994V48.017C291.358 45.724 291.022 43.6698 290.349 41.8545C289.676 40.0391 288.731 38.4985 287.515 37.2326C286.299 35.9666 284.824 34.9992 283.09 34.3304C281.357 33.6616 279.455 33.3272 277.385 33.3272C275.263 33.3272 273.348 33.6616 271.64 34.3304C269.932 34.9992 268.47 35.9666 267.254 37.2326C266.038 38.4985 265.093 40.0391 264.421 41.8545C263.748 43.6698 263.411 45.724 263.411 48.017V55.8994C263.411 58.1924 263.748 60.2466 264.421 62.0619C265.093 63.8773 266.038 65.4179 267.254 66.6839C268.47 67.9498 269.932 68.9172 271.64 69.586Z"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/PPIO/components/BrandMono.tsx b/src/PPIO/components/BrandMono.tsx
@@ -0,0 +1,32 @@
+'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 300 100"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M49.4653 0.800003C22.1583 0.800003 0 22.9189 0 50.2308C0 63.6945 5.38922 75.9079 14.1467 84.8276V50.2789C14.1467 40.8544 17.8277 31.9587 24.4921 25.299C31.1805 18.6153 40.0582 14.9609 49.4894 14.9609C49.5856 14.9609 49.6818 14.9609 49.7781 14.9609L49.4653 14.9849C68.9772 14.9849 84.808 30.8047 84.808 50.303C84.808 52.01 84.6877 53.6689 84.4471 55.3278L64.4781 35.3006C60.4843 31.3096 55.1432 29.0977 49.4894 29.0977C43.8355 29.0977 38.4944 31.3096 34.5006 35.3006C30.4828 39.3157 28.2934 44.629 28.2934 50.303C28.2934 55.9529 30.5068 61.2903 34.5006 65.3053C38.4944 69.2963 43.8355 71.5082 49.4894 71.5082C55.1432 71.5082 60.4843 69.2963 64.4781 65.3053C68.2073 61.5788 70.3485 56.7222 70.6372 51.5051L82.354 63.2617C77.1813 76.3648 64.406 85.6451 49.4653 85.6451C41.7183 85.6451 34.3322 83.1687 28.2693 78.5766V94.9254C34.6931 97.9787 41.8627 99.6857 49.4413 99.6857C76.7482 99.6857 98.9066 77.5669 98.9066 50.2549C98.9306 22.9189 76.7963 0.800003 49.4653 0.800003Z" />
+      <path
+        clipRule="evenodd"
+        d="M140.147 78.1637V57.285H154.194C159.052 57.285 162.808 55.8581 165.462 53.0041C168.116 50.1502 169.443 46.32 169.443 41.5134C169.443 36.7068 168.116 32.8765 165.462 30.0226C162.808 27.1687 159.052 25.7417 154.194 25.7417H131.658V78.1637H140.147ZM153.668 49.8498H140.147V33.1769H153.668C155.822 33.1769 157.499 33.7402 158.701 34.8668C159.903 35.9933 160.504 37.608 160.504 39.7109V43.3158C160.504 45.4187 159.903 47.0335 158.701 48.16C157.499 49.2865 155.822 49.8498 153.668 49.8498ZM187.246 57.285V78.1637H178.758V25.7417H201.294C206.151 25.7417 209.907 27.1687 212.562 30.0226C215.216 32.8765 216.543 36.7068 216.543 41.5134C216.543 46.32 215.216 50.1502 212.562 53.0041C209.907 55.8581 206.151 57.285 201.294 57.285H187.246ZM200.768 49.8498H187.246V33.1769H200.768C202.921 33.1769 204.599 33.7402 205.801 34.8668C207.003 35.9933 207.604 37.608 207.604 39.7109V43.3158C207.604 45.4187 207.003 47.0335 205.801 48.16C204.599 49.2865 202.921 49.8498 200.768 49.8498ZM246.44 71.2542V78.1637H223.604V71.2542H230.74V32.6512H223.604V25.7417H246.44V32.6512H239.229V71.2542H246.44ZM277.389 78.1712C280.795 78.1712 283.887 77.6024 286.666 76.4649C289.446 75.3273 291.825 73.6572 293.803 71.4546C295.781 69.252 297.308 66.517 298.385 63.2494C299.462 59.9819 300 56.2181 300 51.9582C300 47.6983 299.462 43.9346 298.385 40.667C297.308 37.3995 295.781 34.6644 293.803 32.4618C291.825 30.2593 289.446 28.5892 286.666 27.4516C283.887 26.314 280.795 25.7452 277.389 25.7452C273.984 25.7452 270.891 26.314 268.112 27.4516C265.333 28.5892 262.954 30.2593 260.976 32.4618C258.998 34.6644 257.47 37.3995 256.393 40.667C255.317 43.9346 254.778 47.6983 254.778 51.9582C254.778 56.2181 255.317 59.9819 256.393 63.2494C257.47 66.517 258.998 69.252 260.976 71.4546C262.954 73.6572 265.333 75.3273 268.112 76.4649C270.891 77.6024 273.984 78.1712 277.389 78.1712ZM271.64 69.586C273.348 70.2548 275.263 70.5892 277.385 70.5892C279.455 70.5892 281.357 70.2548 283.09 69.586C284.824 68.9172 286.299 67.9498 287.515 66.6839C288.731 65.4179 289.676 63.8773 290.349 62.0619C291.022 60.2466 291.358 58.1924 291.358 55.8994V48.017C291.358 45.724 291.022 43.6698 290.349 41.8545C289.676 40.0391 288.731 38.4985 287.515 37.2326C286.299 35.9666 284.824 34.9992 283.09 34.3304C281.357 33.6616 279.455 33.3272 277.385 33.3272C275.263 33.3272 273.348 33.6616 271.64 34.3304C269.932 34.9992 268.47 35.9666 267.254 37.2326C266.038 38.4985 265.093 40.0391 264.421 41.8545C263.748 43.6698 263.411 45.724 263.411 48.017V55.8994C263.411 58.1924 263.748 60.2466 264.421 62.0619C265.093 63.8773 266.038 65.4179 267.254 66.6839C268.47 67.9498 269.932 68.9172 271.64 69.586Z"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/PPIO/components/Color.tsx b/src/PPIO/components/Color.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { forwardRef } from 'react';
+
+import type { IconType } from '@/types';
+
+import { COLOR_PRIMARY, 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 100 100"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        clipRule="evenodd"
+        d="M49.6479 0.359833C22.2415 0.359833 0 22.5703 0 49.9767C0 63.4861 5.41303 75.7546 14.1918 84.7039V50.0233C14.1918 40.5621 17.8832 31.6283 24.568 24.9434C31.2839 18.2275 40.1867 14.5671 49.6634 14.5671H49.9581L49.6479 14.5981C69.2372 14.5981 85.1196 30.4805 85.1196 50.0543C85.1196 51.7604 84.9955 53.4355 84.7628 55.0951L64.7238 34.9939C60.7221 30.9923 55.3556 28.7744 49.6789 28.7744C44.0022 28.7744 38.6512 30.9923 34.6341 34.9939C30.6015 39.0266 28.399 44.3621 28.399 50.0543C28.399 55.7465 30.617 61.082 34.6341 65.1146C38.6357 69.1162 44.0022 71.3342 49.6789 71.3342C55.3556 71.3342 60.7066 69.1162 64.7238 65.1146C68.4617 61.3767 70.6176 56.491 70.9123 51.2641L82.669 63.0673C77.4731 76.2199 64.6617 85.5415 49.6634 85.5415C41.8929 85.5415 34.479 83.0598 28.3835 78.4533V94.863C34.8357 97.934 42.0324 99.6402 49.6324 99.6402C77.0388 99.6402 99.2803 77.4297 99.2803 50.0233C99.3113 22.5858 77.0853 0.375343 49.6634 0.375343L49.6479 0.359833Z"
+        fill={COLOR_PRIMARY}
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/PPIO/components/Combine.tsx b/src/PPIO/components/Combine.tsx
@@ -0,0 +1,30 @@
+'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', ...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;
diff --git a/src/PPIO/components/Mono.tsx b/src/PPIO/components/Mono.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 100 100"
+      width={size}
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M49.6479 0.359833C22.2415 0.359833 0 22.5703 0 49.9767C0 63.4861 5.41303 75.7546 14.1918 84.7039V50.0233C14.1918 40.5621 17.8832 31.6283 24.568 24.9434C31.2839 18.2275 40.1867 14.5671 49.6634 14.5671H49.9581L49.6479 14.5981C69.2372 14.5981 85.1196 30.4805 85.1196 50.0543C85.1196 51.7604 84.9955 53.4355 84.7628 55.0951L64.7238 34.9939C60.7221 30.9923 55.3556 28.7744 49.6789 28.7744C44.0022 28.7744 38.6512 30.9923 34.6341 34.9939C30.6015 39.0266 28.399 44.3621 28.399 50.0543C28.399 55.7465 30.617 61.082 34.6341 65.1146C38.6357 69.1162 44.0022 71.3342 49.6789 71.3342C55.3556 71.3342 60.7066 69.1162 64.7238 65.1146C68.4617 61.3767 70.6176 56.491 70.9123 51.2641L82.669 63.0673C77.4731 76.2199 64.6617 85.5415 49.6634 85.5415C41.8929 85.5415 34.479 83.0598 28.3835 78.4533V94.863C34.8357 97.934 42.0324 99.6402 49.6324 99.6402C77.0388 99.6402 99.2803 77.4297 99.2803 50.0233C99.3113 22.5858 77.0853 0.375343 49.6634 0.375343L49.6479 0.359833Z" />
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/PPIO/components/Text.tsx b/src/PPIO/components/Text.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 169 54"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        clipRule="evenodd"
+        d="M9.14689 53.1637V32.285H23.1941C28.0518 32.285 31.8078 30.8581 34.462 28.0041C37.1162 25.1502 38.4433 21.32 38.4433 16.5134C38.4433 11.7068 37.1162 7.87651 34.462 5.02259C31.8078 2.16867 28.0518 0.741714 23.1941 0.741714H0.658447V53.1637H9.14689ZM22.6683 24.8498H9.14688V8.17693H22.6683C24.8217 8.17693 26.4994 8.7402 27.7013 9.86675C28.9032 10.9933 29.5041 12.608 29.5041 14.7109V18.3158C29.5041 20.4187 28.9032 22.0335 27.7013 23.16C26.4994 24.2865 24.8217 24.8498 22.6683 24.8498ZM56.2464 32.285V53.1637H47.758V0.741728H70.2937C75.1514 0.741728 78.9073 2.16869 81.5615 5.0226C84.2157 7.87652 85.5428 11.7068 85.5428 16.5134C85.5428 21.32 84.2157 25.1502 81.5615 28.0041C78.9073 30.8581 75.1514 32.285 70.2937 32.285H56.2464ZM69.7679 24.8498H56.2464V8.17693H69.7679C71.9213 8.17693 73.5989 8.7402 74.8008 9.86675C76.0027 10.9933 76.6037 12.608 76.6037 14.7109V18.3158C76.6037 20.4187 76.0027 22.0335 74.8008 23.16C73.5989 24.2865 71.9213 24.8498 69.7679 24.8498ZM115.44 46.2542V53.1637H92.604V46.2542H99.7403V7.65121H92.604V0.741728H115.44V7.65121H108.229V46.2542H115.44ZM146.389 53.1712C149.795 53.1712 152.887 52.6024 155.666 51.4649C158.446 50.3273 160.825 48.6572 162.803 46.4546C164.781 44.252 166.308 41.517 167.385 38.2494C168.462 34.9819 169 31.2181 169 26.9582C169 22.6983 168.462 18.9346 167.385 15.667C166.308 12.3995 164.781 9.66441 162.803 7.46183C160.825 5.25926 158.446 3.58918 155.666 2.45159C152.887 1.314 149.795 0.745202 146.389 0.745202C142.984 0.745202 139.891 1.314 137.112 2.45159C134.333 3.58918 131.954 5.25926 129.976 7.46183C127.998 9.66441 126.47 12.3995 125.393 15.667C124.317 18.9346 123.778 22.6983 123.778 26.9582C123.778 31.2181 124.317 34.9819 125.393 38.2494C126.47 41.517 127.998 44.252 129.976 46.4546C131.954 48.6572 134.333 50.3273 137.112 51.4649C139.891 52.6024 142.984 53.1712 146.389 53.1712ZM140.64 44.586C142.348 45.2548 144.263 45.5892 146.385 45.5892C148.455 45.5892 150.357 45.2548 152.09 44.586C153.824 43.9172 155.299 42.9498 156.515 41.6839C157.731 40.4179 158.676 38.8773 159.349 37.0619C160.022 35.2466 160.358 33.1924 160.358 30.8994V23.017C160.358 20.724 160.022 18.6698 159.349 16.8545C158.676 15.0391 157.731 13.4985 156.515 12.2326C155.299 10.9666 153.824 9.99923 152.09 9.33042C150.357 8.66162 148.455 8.32722 146.385 8.32722C144.263 8.32722 142.348 8.66162 140.64 9.33042C138.932 9.99923 137.47 10.9666 136.254 12.2326C135.038 13.4985 134.093 15.0391 133.421 16.8545C132.748 18.6698 132.411 20.724 132.411 23.017V30.8994C132.411 33.1924 132.748 35.2466 133.421 37.0619C134.093 38.8773 135.038 40.4179 136.254 41.6839C137.47 42.9498 138.932 43.9172 140.64 44.586Z"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+});
+
+export default Icon;