@unif/react-native-chat 3.7.0 → 4.1.0

package/lib/typescript/src/components/Process/styles.d.ts

@@ -67,6 +67,14 @@ export declare const createStyles: (colors: ColorTokens) => Readonly<{
         minHeight: number;
         paddingVertical: number;
     };
+    compactHeaderDense: {
+        minHeight: number;
+        paddingVertical: number;
+    };
+    compactDetailsDense: {
+        paddingTop: number;
+        paddingBottom: number;
+    };
     compactTitle: {
         flex: number;
         minWidth: number;

package/lib/typescript/src/components/Process/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgJ5C,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,YAAY,GAAI,QAAQ,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkJ5C,CAAC"}

package/lib/typescript/src/components/Process/types.d.ts

@@ -1,3 +1,5 @@
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { ChatAction } from '../../actions/index.js';
@@ -6,6 +8,8 @@ export interface ProcessStep {
     id: string;
     title: string;
     status: ProcessStepStatus;
+    /** compact 的活动图标；null 不显示，省略时沿状态呈现。 */
+    icon?: ComponentType<IconProps> | null;
     /** 调用者提供的状态显示文案；不改变 status 的语义。 */
     statusText?: string;
     description?: string;
@@ -16,6 +20,8 @@ export interface ProcessStep {
 export interface ProcessBaseProps {
     /** card 为状态面板；compact 为单行过程；timeline 为带状态节点的连续步骤。 */
     variant?: 'card' | 'compact' | 'timeline';
+    /** compact 文字密度；dense 用于与行内文字相邻的公开过程。 */
+    compactDensity?: 'comfortable' | 'dense';
     steps: readonly ProcessStep[];
     title?: string;
     identity?: ReactNode;
@@ -25,6 +31,7 @@ export interface ProcessBaseProps {
     testID?: string;
 }
 export interface ProcessCompactStepProps {
+    dense?: boolean;
     identity?: ReactNode;
     step: ProcessStep;
     expanded: boolean;

package/lib/typescript/src/components/Process/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAe,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAC3B,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,CAAC;IAC1B,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1C,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC,gBAAgB,CAAC,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,0BAA0B,GAAG,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Process/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAe,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAC3B,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,iBAAiB,CAAC;IAC1B,uCAAuC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;IACvC,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC1C,yCAAyC;IACzC,cAAc,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC;IACzC,KAAK,EAAE,SAAS,WAAW,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,IAAI,IAAI,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;IAC/B,gBAAgB,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IAC/C,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,kBAAkB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC,gBAAgB,CAAC,CAAC,GAAG,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GACzC,CAAC,0BAA0B,GAAG,qBAAqB,CAAC,CAAC"}

package/lib/typescript/src/components/Sources/Sources.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sources.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sources/Sources.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,YAAS,CAAC;AAExD,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAA6B,EAC7B,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAyDzC"}
+{"version":3,"file":"Sources.d.ts","sourceRoot":"","sources":["../../../../../src/components/Sources/Sources.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAc,YAAY,EAAE,MAAM,YAAS,CAAC;AAExD,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAA6B,EAC7B,OAAO,EACP,KAAK,EACL,MAAM,GACP,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA4DzC"}

package/lib/typescript/src/components/Suggestions/Suggestions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Suggestions/Suggestions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,KAAe,EACf,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA+B7C"}
+{"version":3,"file":"Suggestions.d.ts","sourceRoot":"","sources":["../../../../../src/components/Suggestions/Suggestions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAS,CAAC;AAEhD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,KAAe,EACf,KAAK,EACL,MAAM,GACP,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA2B7C"}

package/lib/typescript/src/components/Suggestions/types.d.ts

@@ -1,10 +1,11 @@
-import type { IconName } from '@unif/react-native-design';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 import type { StyleProp, ViewStyle } from 'react-native';
 export interface SuggestionItem {
     id: string;
     label: string;
     /** 14 布局单位的主题主色图标，普通与选中状态保持相同图标样式。 */
-    icon?: IconName;
+    icon?: ComponentType<IconProps>;
     selected?: boolean;
     loading?: boolean;
     disabled?: boolean;

package/lib/typescript/src/components/Suggestions/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Suggestions/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Suggestions/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,QAAQ,CAAC,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unif/react-native-chat",
-  "version": "3.7.0",
+  "version": "4.1.0",
   "description": "Unif React Native 聊天组件：消息、输入、附件和交互展示",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -68,7 +68,8 @@
     "@release-it/conventional-changelog": "^12.0.0",
     "@testing-library/react-native": "13.3.3",
     "@types/react": "^19.2.0",
-    "@unif/react-native-design": ">=0.41.0",
+    "@unif/react-native-design": ">=1.0.0",
+    "@unif/react-native-icons": ">=0.1.0",
     "commitlint": "^21.2.1",
     "del-cli": "^7.0.0",
     "eslint": "^9.39.5",
@@ -96,7 +97,8 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "@unif/react-native-design": ">=0.41.0",
+    "@unif/react-native-design": ">=1.0.0",
+    "@unif/react-native-icons": ">=0.1.0",
     "react": ">=19.2.3 <20.0.0",
     "react-native": ">=0.86.0",
     "react-native-svg": ">=15"

package/src/actions/types.ts

@@ -1,9 +1,10 @@
-import type { IconName } from '@unif/react-native-design';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 
 export interface ChatAction {
   id: string;
   label: string;
-  icon?: IconName;
+  icon?: ComponentType<IconProps>;
   disabled?: boolean;
   loading?: boolean;
   accessibilityHint?: string;

package/src/components/Attachments/AttachmentItem.tsx

@@ -1,9 +1,13 @@
+import {
+  CloseOutlined,
+  EyeOutlined,
+  RefreshOutlined,
+} from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
 import {
   Button,
   CircularProgress,
   GlassLayer,
-  Icon,
   IconButton,
   radius,
   Spinner,
@@ -55,12 +59,7 @@ export function AttachmentItem({
   const removable = item.removable && onRemove;
   const singleAction = item.actions?.length === 1 ? item.actions[0] : undefined;
   const retry =
-    failed &&
-    !caption &&
-    singleAction &&
-    (singleAction.id === 'retry' ||
-      singleAction.icon === 'retry' ||
-      singleAction.icon === 'refresh')
+    failed && !caption && singleAction?.id === 'retry'
       ? singleAction
       : undefined;
   const statusLeft = (imageSize - ATTACHMENT_STATUS_OWNER_SIZE) / 2;
@@ -73,9 +72,8 @@ export function AttachmentItem({
             ATTACHMENT_STATUS_OWNER_SIZE
         )
       : statusLeft;
-  const icon = (
-    <Icon name={ATTACHMENT_ICONS[item.kind ?? 'file']} size={ROW_IMAGE_SIZE} />
-  );
+  const Glyph = ATTACHMENT_ICONS[item.kind ?? 'file'];
+  const icon = <Glyph size={ROW_IMAGE_SIZE} color={colors.foregroundMuted} />;
   const thumbnail = item.thumbnail ? (
     <Thumbnail
       source={item.thumbnail}
@@ -91,16 +89,13 @@ export function AttachmentItem({
       {icon}
     </View>
   );
+  const Glyph2 = retry?.icon ?? RefreshOutlined;
   const statusVisual =
     busy || failed ? (
       <View style={styles.statusVisual}>
         <GlassLayer colorScheme="dark" style={styles.circleGlass} />
         {failed ? (
-          <Icon
-            name={retry?.icon ?? 'refresh'}
-            size={16}
-            color={colors.onPrimary}
-          />
+          <Glyph2 size={16} color={colors.onPrimary} />
         ) : progress !== undefined ? (
           <CircularProgress
             value={progress}
@@ -225,7 +220,7 @@ export function AttachmentItem({
         <View style={styles.actions}>
           {previewable && retry ? (
             <IconButton
-              icon="eye"
+              icon={EyeOutlined}
               size="sm"
               accessibilityLabel={`预览${name}`}
               onPress={() => onPreview?.(item)}
@@ -233,7 +228,7 @@ export function AttachmentItem({
           ) : null}
           {removable ? (
             <IconButton
-              icon="close"
+              icon={CloseOutlined}
               size="sm"
               accessibilityLabel={`移除${name}`}
               disabled={item.removeDisabled}
@@ -332,8 +327,7 @@ export function AttachmentItem({
             {!failed ? (
               <GlassLayer colorScheme="dark" style={styles.circleGlass} />
             ) : null}
-            <Icon
-              name="close"
+            <CloseOutlined
               size={preview ? 12 : 10}
               color={colors.onPrimary}
               strokeWidth={2.5}
@@ -363,7 +357,7 @@ export function AttachmentItem({
       {separatePreview ? (
         <View style={[styles.previewAction, { width: imageSize }]}>
           <IconButton
-            icon="eye"
+            icon={EyeOutlined}
             size="sm"
             accessibilityLabel={`预览${name}`}
             onPress={() => onPreview?.(item)}

package/src/components/Attachments/constants.ts

@@ -1,5 +1,13 @@
+import {
+  FileOutlined,
+  ImageOutlined,
+  PlayOutlined,
+  SoundOutlined,
+} from '@unif/react-native-icons';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 import { icon, r } from '@unif/react-native-design';
-import type { IconName } from '@unif/react-native-design';
+
 import type { ChatAttachmentItem } from './types';
 
 export const CARD_WIDTH = r(76);
@@ -15,12 +23,12 @@ export const ATTACHMENT_STATUS_OWNER_SIZE = Math.max(
 export const ATTACHMENT_REMOVE_OWNER_SIZE = 44;
 export const ATTACHMENT_ICONS: Record<
   NonNullable<ChatAttachmentItem['kind']>,
-  IconName
+  ComponentType<IconProps>
 > = {
-  image: 'image',
-  file: 'file',
-  audio: 'sound',
-  video: 'play',
+  image: ImageOutlined,
+  file: FileOutlined,
+  audio: SoundOutlined,
+  video: PlayOutlined,
 };
 export const STATUS_LABELS = {
   idle: '',

package/src/components/Composer/Composer.tsx

@@ -1,3 +1,10 @@
+import {
+  CloseOutlined,
+  MicOutlined,
+  PlusOutlined,
+  SendOutlined,
+  StopFilled,
+} from '@unif/react-native-icons';
 import {
   forwardRef,
   useEffect,
@@ -119,7 +126,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
     const moreAction =
       actions.length > 0 ? (
         <ComposerIconAction
-          icon="plus"
+          icon={PlusOutlined}
           label="更多操作"
           expanded={menuOpen}
           disabled={moreDisabled}
@@ -243,7 +250,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
               <View style={styles.trailingActions}>
                 {voice ? (
                   <ComposerIconAction
-                    icon="mic"
+                    icon={MicOutlined}
                     label="开始语音输入"
                     disabled={disabled || voice.disabled}
                     onPress={() => {
@@ -254,7 +261,9 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
                 ) : null}
                 {showPrimary ? (
                   <ComposerIconAction
-                    icon={primaryAction.kind === 'send' ? 'send' : 'stop'}
+                    icon={
+                      primaryAction.kind === 'send' ? SendOutlined : StopFilled
+                    }
                     label={primaryLabel}
                     visual="primary"
                     disabled={primaryDisabled}
@@ -276,7 +285,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
         {voice && voice.status !== 'idle' ? (
           <View style={styles.voice}>
             <ComposerIconAction
-              icon="close"
+              icon={CloseOutlined}
               visual="cancel"
               label="取消语音输入"
               disabled={disabled || voice.disabled}
@@ -300,7 +309,7 @@ export const Composer = forwardRef<ComposerHandle, ComposerProps>(
             </View>
             {voice.status === 'listening' || voice.status === 'finishing' ? (
               <ComposerIconAction
-                icon="stop"
+                icon={StopFilled}
                 visual="primary"
                 label="停止语音输入"
                 disabled={

package/src/components/Composer/ComposerIconAction.tsx

@@ -1,5 +1,5 @@
 import { ActivityIndicator, Pressable, View } from 'react-native';
-import { Icon, useColors, useThemedStyles } from '@unif/react-native-design';
+import { useColors, useThemedStyles } from '@unif/react-native-design';
 import {
   COMPOSER_ACTION_ICON_SIZE,
   COMPOSER_PRIMARY_ICON_SIZE,
@@ -28,6 +28,7 @@ export function ComposerIconAction({
       ? colors.foregroundSubtle
       : colors.onPrimary
     : colors.foregroundMuted;
+  const Glyph = icon;
   return (
     <Pressable
       accessibilityRole="button"
@@ -54,8 +55,7 @@ export function ComposerIconAction({
           {busy ? (
             <ActivityIndicator size="small" color={color} />
           ) : (
-            <Icon
-              name={icon}
+            <Glyph
               size={
                 primary
                   ? COMPOSER_PRIMARY_ICON_SIZE

package/src/components/Composer/types.ts

@@ -1,6 +1,8 @@
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import type { IconName, TextFieldHandle } from '@unif/react-native-design';
+import type { TextFieldHandle } from '@unif/react-native-design';
 import type { ChatAction } from '../../actions';
 
 export interface ComposerSendAction {
@@ -65,7 +67,7 @@ export interface ComposerProps {
 export type ComposerHandle = TextFieldHandle;
 
 export interface ComposerIconActionProps {
-  icon: IconName;
+  icon: ComponentType<IconProps>;
   label: string;
   onPress?(): void;
   disabled?: boolean;

package/src/components/Confirmation/Confirmation.tsx

@@ -1,7 +1,11 @@
+import {
+  CheckOutlined,
+  CloseOutlined,
+  WarningOutlined,
+} from '@unif/react-native-icons';
 import { Text, View } from 'react-native';
 import {
   Button,
-  Icon,
   Spinner,
   useColors,
   useThemedStyles,
@@ -44,23 +48,19 @@ export function Confirmation({
       ? statusText
       : (statusText ?? CONFIRMATION_STATUS_TEXT[status]);
 
+  const Glyph =
+    status === 'confirmed'
+      ? CheckOutlined
+      : status === 'cancelled'
+        ? CloseOutlined
+        : WarningOutlined;
   return (
     <View style={[styles.root, { borderColor }, style]} testID={testID}>
       <View style={styles.heading}>
         {status === 'processing' ? (
           <Spinner size={14} color={tint} />
         ) : (
-          <Icon
-            name={
-              status === 'confirmed'
-                ? 'check'
-                : status === 'cancelled'
-                  ? 'close'
-                  : 'warning'
-            }
-            size={14}
-            color={tint}
-          />
+          <Glyph size={14} color={tint} />
         )}
         <Text
           style={[styles.title, status === 'cancelled' && styles.cancelled]}

package/src/components/Feedback/Feedback.tsx

@@ -1,7 +1,7 @@
 import { Text, View } from 'react-native';
 import {
   Button,
-  Icon,
+  r,
   useColors,
   useThemedStyles,
 } from '@unif/react-native-design';
@@ -48,6 +48,7 @@ export function Feedback({
   const toneLabel = FEEDBACK_TONE_LABELS[tone];
   const accessibilityLabel = `${toneLabel}：${title ? `${title}。` : ''}${message}`;
 
+  const Glyph = FEEDBACK_TONE_ICONS[tone];
   return (
     <View
       style={[
@@ -57,7 +58,7 @@ export function Feedback({
       ]}
       testID={testID}
     >
-      <Icon name={FEEDBACK_TONE_ICONS[tone]} color={toneColors.iconColor} />
+      <Glyph size={r(18)} color={toneColors.iconColor} />
       <View style={styles.content}>
         <View accessible accessibilityLabel={accessibilityLabel}>
           {title ? (

package/src/components/Feedback/constants.ts

@@ -1,4 +1,12 @@
-import type { IconName } from '@unif/react-native-design';
+import {
+  ErrorOutlined,
+  InfoOutlined,
+  SuccessOutlined,
+  WarningOutlined,
+} from '@unif/react-native-icons';
+import type { ComponentType } from 'react';
+import type { IconProps } from '@unif/react-native-icons';
+
 import type { FeedbackTone } from './types';
 
 export const FEEDBACK_TONE_LABELS: Readonly<Record<FeedbackTone, string>> = {
@@ -8,9 +16,11 @@ export const FEEDBACK_TONE_LABELS: Readonly<Record<FeedbackTone, string>> = {
   error: '错误',
 };
 
-export const FEEDBACK_TONE_ICONS: Readonly<Record<FeedbackTone, IconName>> = {
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  error: 'error',
+export const FEEDBACK_TONE_ICONS: Readonly<
+  Record<FeedbackTone, ComponentType<IconProps>>
+> = {
+  info: InfoOutlined,
+  success: SuccessOutlined,
+  warning: WarningOutlined,
+  error: ErrorOutlined,
 };

package/src/components/Message/MarkdownContent/MarkdownImage/MarkdownImage.tsx

@@ -1,10 +1,12 @@
+import { ImageOutlined } from '@unif/react-native-icons';
 import { useEffect, useState } from 'react';
 import { Image, View } from 'react-native';
-import { Icon, Thumbnail } from '@unif/react-native-design';
+import { Thumbnail, r, useColors } from '@unif/react-native-design';
 import { styles } from './styles';
 import type { ImageRatio, MarkdownImageProps } from './types';
 
 export function MarkdownImage({ uri, label }: MarkdownImageProps) {
+  const colors = useColors();
   const [width, setWidth] = useState(1);
   const [ratio, setRatio] = useState<ImageRatio | undefined>(undefined);
   useEffect(() => {
@@ -44,7 +46,7 @@ export function MarkdownImage({ uri, label }: MarkdownImageProps) {
           borderRadius: 0,
         }}
         resizeMode="contain"
-        fallback={<Icon name="image" />}
+        fallback={<ImageOutlined size={r(18)} color={colors.foregroundMuted} />}
         accessibilityLabel={label || '图片'}
       />
     </View>

package/src/components/Message/Message.tsx

@@ -1,3 +1,4 @@
+import { AlertOutlined } from '@unif/react-native-icons';
 import { Pressable, Text, View } from 'react-native';
 import {
   Button,
@@ -142,7 +143,7 @@ export function Message(props: MessageProps) {
           <View style={[styles.failureRow, placement === 'end' && styles.end]}>
             {bubble}
             <IconButton
-              icon="alert"
+              icon={AlertOutlined}
               size="sm"
               variant="ghost"
               color={colors.error}

package/src/components/MessageList/MessageListEndButton.tsx

@@ -1,3 +1,4 @@
+import { ArrowDownOutlined } from '@unif/react-native-icons';
 import { useEffect, useRef } from 'react';
 import { Animated, View } from 'react-native';
 import {
@@ -39,7 +40,7 @@ export function MessageListEndButton({
           </View>
         ) : null}
         <IconButton
-          icon="arrow-down"
+          icon={ArrowDownOutlined}
           accessibilityLabel={busy ? '回到最新消息，正在处理' : '回到最新消息'}
           variant="glass"
           size="md"

package/src/components/Process/Process.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Text, View } from 'react-native';
 import {
   Button,
-  Icon,
+  r,
   useColors,
   useThemedStyles,
 } from '@unif/react-native-design';
@@ -125,11 +125,13 @@ export function Process(props: ProcessProps): React.JSX.Element {
                 key={step.id}
                 step={step}
                 identity={inlineIdentity ? identity : undefined}
+                dense={props.compactDensity === 'dense'}
                 expanded={isExpanded}
                 elapsed={elapsed}
                 onToggle={() => toggleDetails(step.id)}
               />
             );
+          const Glyph = PROCESS_STATUS_ICONS[step.status];
           return (
             <View
               key={step.id}
@@ -150,8 +152,8 @@ export function Process(props: ProcessProps): React.JSX.Element {
                   accessible
                   accessibilityLabel={`${step.title}，${statusLabel}`}
                 >
-                  <Icon
-                    name={PROCESS_STATUS_ICONS[step.status]}
+                  <Glyph
+                    size={r(18)}
                     color={
                       step.status === 'failed'
                         ? colors.error