Merge branch 'master' into internlmProvider

lobehub · Nov 18, 2024 · c724771 · c724771
2 parents ad10f65 + ad390e5
commit c724771
Show file tree

Hide file tree

Showing 15 changed files with 365 additions and 14 deletions.
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -71,31 +71,31 @@
     ]
   },
   "devDependencies": {
-    "@babel/runtime": "^7.25.4",
+    "@babel/runtime": "^7.26.0",
     "@commitlint/cli": "^18.6.1",
     "@lobehub/lint": "^1.24.4",
     "@testing-library/react": "^14.3.1",
     "@types/lodash-es": "^4.17.12",
     "@types/pangu": "^4.0.2",
     "@types/query-string": "^6.3.0",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitest/coverage-v8": "~1.2.2",
     "babel-plugin-antd-style": "^1.0.4",
     "commitlint": "^18.6.1",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "dumi": "2.2.17",
     "dumi-theme-lobehub": "^1.8.1",
-    "eslint": "^8.57.0",
-    "father": "^4.5.0",
+    "eslint": "^8.57.1",
+    "father": "^4.5.1",
     "glob": "^11.0.0",
     "gray-matter": "^4.0.3",
     "husky": "^8.0.3",
     "jsdom": "^23.2.0",
-    "lint-staged": "^15.2.9",
+    "lint-staged": "^15.2.10",
     "lodash-es": "^4.17.21",
-    "markdown-table": "^3.0.3",
+    "markdown-table": "^3.0.4",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -104,8 +104,8 @@
     "semantic-release": "^21.1.2",
     "stylelint": "^15.11.0",
     "svgo-browser": "^1.3.8",
-    "tsx": "^4.18.0",
-    "typescript": "^5.5.4",
+    "tsx": "^4.19.2",
+    "typescript": "^5.6.3",
     "vitest": "~1.2.2"
   },
   "peerDependencies": {

diff --git a/src/Ai360/index.md b/src/Ai360/index.md
@@ -68,6 +68,7 @@ import ColorPreview from '../components/ColorPreview';
 export default () => (
   <Flexbox gap={16} horizontal>
     <ColorPreview color={Ai360.colorPrimary} />
+    <ColorPreview color={Higress.colorGradient} />
   </Flexbox>
 );
 ```
diff --git a/src/Higress/components/Avatar.tsx b/src/Higress/components/Avatar.tsx
@@ -0,0 +1,23 @@
+import { memo } from 'react';
+
+import IconAvatar, { type IconAvatarProps } from '@/features/IconAvatar';
+
+import { COLOR_GRADIENT, 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_GRADIENT}
+      color={'#fff'}
+      iconMultiple={0.6}
+      {...rest}
+    />
+  );
+});
+
+export default Avatar;
diff --git a/src/Higress/components/Color.tsx b/src/Higress/components/Color.tsx
@@ -0,0 +1,69 @@
+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="M11.853 15.257c-.318.069-.648.101-.99.101H7.933a7.89 7.89 0 01-4.072-1.132 8.15 8.15 0 01-.616-.406 8.033 8.033 0 01-2.541-3.154c-.1-.23-.19-.46-.274-.7a8.007 8.007 0 01-.407-2.522V1H3.27v6.444c0 .153.004.298.025.443.016.214.048.415.1.616a4.681 4.681 0 002.223 2.985 4.667 4.667 0 002.296.616h.024a4.043 4.043 0 013.919 3.153h-.004z"
+        fill={a.fill}
+      ></path>
+      <path
+        d="M3.246 14.557v8.039H0v-12.24c.105.39.274.834.362 1.007a8.474 8.474 0 002.884 3.198v-.004z"
+        fill="#1E8CFE"
+      ></path>
+      <path
+        d="M15.824 16.151v6.445h-3.246V16.15a3.26 3.26 0 00-.024-.447 4.683 4.683 0 00-2.32-3.6 4.706 4.706 0 00-2.3-.616H7.91a4.047 4.047 0 01-3.919-3.146c.318-.068.649-.1.991-.1H7.91a7.89 7.89 0 014.072 1.131c.213.125.419.262.616.407a7.959 7.959 0 012.537 3.154 7.849 7.849 0 01.689 3.218z"
+        fill={b.fill}
+      ></path>
+      <path
+        d="M19.904 3.868c0-.552.201-1.027.6-1.426.399-.403.882-.6 1.442-.6.56 0 1.055.201 1.454.6.403.39.6.874.6 1.442s-.201 1.055-.6 1.454c-.39.402-.87.6-1.442.6a1.979 1.979 0 01-1.454-.6c-.403-.403-.6-.89-.6-1.47zm3.73 5.107v13.62h-3.36V8.972h3.36v.004z"
+        fill="#0418FF"
+      ></path>
+      <path
+        d="M12.578 9.039V1h3.246v12.24a6.393 6.393 0 00-.362-1.007 8.474 8.474 0 00-2.884-3.198v.004z"
+        fill="#1E8CFE"
+      ></path>
+      <defs>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={a.id}
+          x1=".024"
+          x2="11.853"
+          y1="8.177"
+          y2="8.177"
+        >
+          <stop stopColor="#0418FF"></stop>
+          <stop offset="1" stopColor="#1E8CFE"></stop>
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={b.id}
+          x1="15.824"
+          x2="3.991"
+          y1="15.418"
+          y2="15.418"
+        >
+          <stop stopColor="#0418FF"></stop>
+          <stop offset="1" stopColor="#1E8CFE"></stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Higress/components/Combine.tsx b/src/Higress/components/Combine.tsx
@@ -0,0 +1,15 @@
+import { memo } from 'react';
+
+import { type IconCombineProps } from '@/features/IconCombine';
+
+import Mono from './Text';
+import Color from './TextColor';
+
+export interface CombineProps extends Omit<IconCombineProps, 'Icon' | 'Text'> {
+  type?: 'color' | 'mono';
+}
+const Combine = memo<CombineProps>(({ type = 'mono', ...rest }) => {
+  return type === 'color' ? <Color {...(rest as any)} /> : <Mono {...(rest as any)} />;
+});
+
+export default Combine;
diff --git a/src/Higress/components/Mono.tsx b/src/Higress/components/Mono.tsx
@@ -0,0 +1,30 @@
+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="M11.853 15.257c-.318.069-.648.101-.99.101H7.933a7.89 7.89 0 01-4.072-1.132 8.15 8.15 0 01-.616-.406 8.033 8.033 0 01-2.541-3.154c-.1-.23-.19-.46-.274-.7a8.007 8.007 0 01-.407-2.522V1H3.27v6.444c0 .153.004.298.025.443.016.214.048.415.1.616a4.681 4.681 0 002.223 2.985 4.667 4.667 0 002.296.616h.024a4.043 4.043 0 013.919 3.153h-.004z"></path>
+      <path d="M3.246 14.557v8.039H0v-12.24c.105.39.274.834.362 1.007a8.474 8.474 0 002.884 3.198v-.004z"></path>
+      <path d="M15.824 16.151v6.445h-3.246V16.15a3.26 3.26 0 00-.024-.447 4.683 4.683 0 00-2.32-3.6 4.706 4.706 0 00-2.3-.616H7.91a4.047 4.047 0 01-3.919-3.146c.318-.068.649-.1.991-.1H7.91a7.89 7.89 0 014.072 1.131c.213.125.419.262.616.407a7.959 7.959 0 012.537 3.154 7.849 7.849 0 01.689 3.218z"></path>
+      <path d="M19.904 3.868c0-.552.201-1.027.6-1.426.399-.403.882-.6 1.442-.6.56 0 1.055.201 1.454.6.403.39.6.874.6 1.442s-.201 1.055-.6 1.454c-.39.402-.87.6-1.442.6a1.979 1.979 0 01-1.454-.6c-.403-.403-.6-.89-.6-1.47zm3.73 5.107v13.62h-3.36V8.972h3.36v.004z"></path>
+      <path d="M12.578 9.039V1h3.246v12.24a6.393 6.393 0 00-.362-1.007 8.474 8.474 0 00-2.884-3.198v.004z"></path>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Higress/components/Text.tsx b/src/Higress/components/Text.tsx
@@ -0,0 +1,31 @@
+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 84 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path d="M11.798 11.785a3.883 3.883 0 01-.819.083h-2.42a6.522 6.522 0 01-3.366-.935 6.738 6.738 0 01-.51-.336 6.64 6.64 0 01-2.1-2.607 8.042 8.042 0 01-.227-.58 6.619 6.619 0 01-.336-2.084V0h2.683v5.326c0 .127.004.247.02.367.014.176.04.342.084.509a3.857 3.857 0 003.735 2.976h.02a3.342 3.342 0 013.24 2.607h-.004z"></path>
+      <path d="M4.683 11.206v6.645H2V7.734c.087.323.226.69.3.832a7.005 7.005 0 002.383 2.644v-.004z"></path>
+      <path d="M15.08 12.524v5.327h-2.683v-5.327c0-.126-.004-.25-.02-.37a3.871 3.871 0 00-1.918-2.976 3.889 3.889 0 00-1.9-.51h-.02a3.346 3.346 0 01-3.24-2.6c.263-.056.536-.082.819-.082h2.42c1.225 0 2.38.342 3.366.935.176.103.346.216.51.336a6.578 6.578 0 012.097 2.607 6.487 6.487 0 01.57 2.66z"></path>
+      <path d="M35.635 17.585c0 .533-.017.999-.053 1.405a9.743 9.743 0 01-.143 1.069c-.187.849-.546 1.574-1.086 2.184C33.335 23.414 31.936 24 30.155 24c-1.505 0-2.74-.406-3.712-1.215-1.002-.832-1.581-1.984-1.734-3.455h2.613c.1.556.266.982.496 1.281.54.703 1.325 1.052 2.36 1.052 1.905 0 2.857-1.168 2.857-3.502V16.59c-1.032 1.055-2.224 1.584-3.572 1.584-1.535 0-2.79-.556-3.769-1.664-.985-1.126-1.481-2.534-1.481-4.222s.46-3.036 1.375-4.184c.985-1.219 2.29-1.828 3.908-1.828 1.418 0 2.597.53 3.539 1.585V6.589h2.6v10.996zm-2.497-5.34c0-1.095-.293-1.97-.879-2.623-.592-.67-1.351-1.006-2.277-1.006-.985 0-1.764.366-2.337 1.099-.516.656-.776 1.501-.776 2.543 0 1.042.26 1.865.776 2.52.563.716 1.342 1.076 2.337 1.076s1.781-.363 2.357-1.089c.533-.656.8-1.495.8-2.52zM38.917 6.588h2.603v1.006c.476-.5.903-.842 1.272-1.029.376-.193.826-.29 1.342-.29.686 0 1.401.224 2.15.67l-1.191 2.38c-.493-.353-.976-.533-1.445-.533-1.418 0-2.128 1.072-2.128 3.213v5.84h-2.603V6.587z"></path>
+      <path d="M18.453 2.37c0-.456.166-.849.496-1.178.33-.333.73-.496 1.192-.496.463 0 .872.166 1.202.496.333.323.496.722.496 1.192s-.167.872-.496 1.202a1.59 1.59 0 01-1.192.496c-.473 0-.872-.167-1.202-.496a1.647 1.647 0 01-.496-1.216zm3.083 4.222V17.85h-2.777V6.588h2.777v.003z"></path>
+      <path d="M57.867 12.831h-8.07c.07.925.37 1.661.902 2.207.533.54 1.215.81 2.048.81.645 0 1.181-.154 1.608-.464.3-.223.626-.582.865-1.072h2.68c-.173.82-.679 1.605-1.039 2.038-.359.433-.745.789-1.178 1.052-.433.266-.899.46-1.398.583a6.834 6.834 0 01-1.631.186c-1.682 0-3.03-.54-4.046-1.618-1.018-1.089-1.528-2.527-1.528-4.325 0-1.797.493-3.222 1.482-4.324.995-1.089 2.314-1.631 3.955-1.631s2.966.529 3.932 1.584c.955 1.049 1.435 2.5 1.435 4.358l-.014.613-.003.003zm-2.67-2.127c-.363-1.389-1.239-2.081-2.623-2.081-.317 0-.613.047-.89.143-.276.097-.529.236-.758.416-.227.18-.423.4-.583.653a2.942 2.942 0 00-.37.865H55.2l-.003.004zM65.501 18.154c-3 0-4.76-1.655-5.204-3.852h2.787c.38.846 1.328 1.425 2.524 1.425s1.907-.573 1.907-1.255c0-.546-.639-1.085-2.21-1.342-2.248-.37-3.263-.835-3.895-1.661-.563-.73-.693-1.628-.533-2.434.313-1.608 1.87-2.96 4.75-2.776 2.587.163 4.129 2.234 4.272 3.858h-2.554c-.22-.792-.785-1.355-1.884-1.521-.942-.143-1.92.153-1.974.949-.053.795.736 1.055 2.19 1.295 3.806.626 4.558 2.36 4.522 3.709-.06 2.197-2.038 3.612-4.701 3.612l.003-.007zM77.199 18.154c-3 0-4.76-1.655-5.204-3.852h2.787c.38.846 1.328 1.425 2.523 1.425s1.908-.573 1.908-1.255c0-.546-.64-1.085-2.21-1.342-2.248-.37-3.263-.835-3.896-1.661-.562-.73-.692-1.628-.532-2.434.313-1.608 1.87-2.96 4.75-2.776 2.587.163 4.129 2.234 4.272 3.858h-2.554c-.22-.792-.785-1.355-1.884-1.521-.942-.143-1.92.153-1.974.949-.054.795.736 1.055 2.19 1.295 3.806.626 4.558 2.36 4.521 3.709-.06 2.197-2.037 3.612-4.7 3.612l.003-.007z"></path>
+      <path d="M12.397 6.645V0h2.683v10.117a5.284 5.284 0 00-.3-.832 7.006 7.006 0 00-2.383-2.644v.004z"></path>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Higress/components/TextColor.tsx b/src/Higress/components/TextColor.tsx
@@ -0,0 +1,72 @@
+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
+      fill="currentColor"
+      fillRule="evenodd"
+      height={size}
+      ref={ref}
+      style={{ flex: 'none', lineHeight: 1, ...style }}
+      viewBox="0 0 84 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <title>{TITLE}</title>
+      <path
+        d="M11.798 11.785a3.883 3.883 0 01-.819.083h-2.42a6.522 6.522 0 01-3.366-.935 6.738 6.738 0 01-.51-.336 6.64 6.64 0 01-2.1-2.607 8.042 8.042 0 01-.227-.58 6.619 6.619 0 01-.336-2.084V0h2.683v5.326c0 .127.004.247.02.367.014.176.04.342.084.509a3.857 3.857 0 003.735 2.976h.02a3.342 3.342 0 013.24 2.607h-.004z"
+        fill={a.fill}
+      ></path>
+      <path
+        d="M4.683 11.206v6.645H2V7.734c.087.323.226.69.3.832a7.005 7.005 0 002.383 2.644v-.004z"
+        fill="#1E8CFE"
+      ></path>
+      <path
+        d="M15.08 12.524v5.327h-2.683v-5.327c0-.126-.004-.25-.02-.37a3.871 3.871 0 00-1.918-2.976 3.889 3.889 0 00-1.9-.51h-.02a3.346 3.346 0 01-3.24-2.6c.263-.056.536-.082.819-.082h2.42c1.225 0 2.38.342 3.366.935.176.103.346.216.51.336a6.578 6.578 0 012.097 2.607 6.487 6.487 0 01.57 2.66z"
+        fill={b.fill}
+      ></path>
+      <path d="M35.635 17.585c0 .533-.017.999-.053 1.405a9.743 9.743 0 01-.143 1.069c-.187.849-.546 1.574-1.086 2.184C33.335 23.414 31.936 24 30.155 24c-1.505 0-2.74-.406-3.712-1.215-1.002-.832-1.581-1.984-1.734-3.455h2.613c.1.556.266.982.496 1.281.54.703 1.325 1.052 2.36 1.052 1.905 0 2.857-1.168 2.857-3.502V16.59c-1.032 1.055-2.224 1.584-3.572 1.584-1.535 0-2.79-.556-3.769-1.664-.985-1.126-1.481-2.534-1.481-4.222s.46-3.036 1.375-4.184c.985-1.219 2.29-1.828 3.908-1.828 1.418 0 2.597.53 3.539 1.585V6.589h2.6v10.996zm-2.497-5.34c0-1.095-.293-1.97-.879-2.623-.592-.67-1.351-1.006-2.277-1.006-.985 0-1.764.366-2.337 1.099-.516.656-.776 1.501-.776 2.543 0 1.042.26 1.865.776 2.52.563.716 1.342 1.076 2.337 1.076s1.781-.363 2.357-1.089c.533-.656.8-1.495.8-2.52zM38.917 6.588h2.603v1.006c.476-.5.903-.842 1.272-1.029.376-.193.826-.29 1.342-.29.686 0 1.401.224 2.15.67l-1.191 2.38c-.493-.353-.976-.533-1.445-.533-1.418 0-2.128 1.072-2.128 3.213v5.84h-2.603V6.587z"></path>
+      <path
+        d="M18.453 2.37c0-.456.166-.849.496-1.178.33-.333.73-.496 1.192-.496.463 0 .872.166 1.202.496.333.323.496.722.496 1.192s-.167.872-.496 1.202a1.59 1.59 0 01-1.192.496c-.473 0-.872-.167-1.202-.496a1.647 1.647 0 01-.496-1.216zm3.083 4.222V17.85h-2.777V6.588h2.777v.003z"
+        fill="#0418FF"
+      ></path>
+      <path d="M57.867 12.831h-8.07c.07.925.37 1.661.902 2.207.533.54 1.215.81 2.048.81.645 0 1.181-.154 1.608-.464.3-.223.626-.582.865-1.072h2.68c-.173.82-.679 1.605-1.039 2.038-.359.433-.745.789-1.178 1.052-.433.266-.899.46-1.398.583a6.834 6.834 0 01-1.631.186c-1.682 0-3.03-.54-4.046-1.618-1.018-1.089-1.528-2.527-1.528-4.325 0-1.797.493-3.222 1.482-4.324.995-1.089 2.314-1.631 3.955-1.631s2.966.529 3.932 1.584c.955 1.049 1.435 2.5 1.435 4.358l-.014.613-.003.003zm-2.67-2.127c-.363-1.389-1.239-2.081-2.623-2.081-.317 0-.613.047-.89.143-.276.097-.529.236-.758.416-.227.18-.423.4-.583.653a2.942 2.942 0 00-.37.865H55.2l-.003.004zM65.501 18.154c-3 0-4.76-1.655-5.204-3.852h2.787c.38.846 1.328 1.425 2.524 1.425s1.907-.573 1.907-1.255c0-.546-.639-1.085-2.21-1.342-2.248-.37-3.263-.835-3.895-1.661-.563-.73-.693-1.628-.533-2.434.313-1.608 1.87-2.96 4.75-2.776 2.587.163 4.129 2.234 4.272 3.858h-2.554c-.22-.792-.785-1.355-1.884-1.521-.942-.143-1.92.153-1.974.949-.053.795.736 1.055 2.19 1.295 3.806.626 4.558 2.36 4.522 3.709-.06 2.197-2.038 3.612-4.701 3.612l.003-.007zM77.199 18.154c-3 0-4.76-1.655-5.204-3.852h2.787c.38.846 1.328 1.425 2.523 1.425s1.908-.573 1.908-1.255c0-.546-.64-1.085-2.21-1.342-2.248-.37-3.263-.835-3.896-1.661-.562-.73-.692-1.628-.532-2.434.313-1.608 1.87-2.96 4.75-2.776 2.587.163 4.129 2.234 4.272 3.858h-2.554c-.22-.792-.785-1.355-1.884-1.521-.942-.143-1.92.153-1.974.949-.054.795.736 1.055 2.19 1.295 3.806.626 4.558 2.36 4.521 3.709-.06 2.197-2.037 3.612-4.7 3.612l.003-.007z"></path>
+      <path
+        d="M12.397 6.645V0h2.683v10.117a5.284 5.284 0 00-.3-.832 7.006 7.006 0 00-2.383-2.644v.004z"
+        fill="#1E8CFE"
+      ></path>
+      <defs>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={a.id}
+          x1="2.02"
+          x2="11.798"
+          y1="5.933"
+          y2="5.933"
+        >
+          <stop offset="0" stopColor="#0418FF"></stop>
+          <stop offset="1" stopColor="#1E8CFE"></stop>
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id={b.id}
+          x1="15.08"
+          x2="5.299"
+          y1="11.918"
+          y2="11.918"
+        >
+          <stop offset="0" stopColor="#0418FF"></stop>
+          <stop offset="1" stopColor="#1E8CFE"></stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+});
+
+export default Icon;
diff --git a/src/Higress/index.md b/src/Higress/index.md
@@ -0,0 +1,74 @@
+---
+nav: Components
+group: Provider
+title: Higress
+atomId: Higress
+description: https://higress.cn/
+---
+
+## Icons
+
+```tsx
+import { Higress } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Higress size={64} />
+    <Higress.Color size={64} />
+  </Flexbox>
+);
+```
+
+## Text
+
+```tsx
+import { Higress } from '@lobehub/icons';
+
+export default () => <Higress.Text size={48} />;
+```
+
+## Combine
+
+```tsx
+import { Higress } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16}>
+    <Higress.Combine size={64} />
+    <Higress.Combine size={64} type={'color'} />
+  </Flexbox>
+);
+```
+
+## Avatars
+
+```tsx
+import { Higress } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <Higress.Avatar size={64} background={Higress.colorPrimary} />
+    <Higress.Avatar size={64} />
+    <Higress.Avatar size={64} shape={'square'} />
+  </Flexbox>
+);
+```
+
+## Colors
+
+```tsx
+import { Higress } from '@lobehub/icons';
+import { Flexbox } from 'react-layout-kit';
+
+import ColorPreview from '../components/ColorPreview';
+
+export default () => (
+  <Flexbox gap={16} horizontal>
+    <ColorPreview color={Higress.colorPrimary} />
+    <ColorPreview color={Higress.colorGradient} />
+  </Flexbox>
+);
+```