NeteaseYanxuan · kiner-tang · Dec 24, 2022 · Dec 24, 2022 · Dec 27, 2022
diff --git a/.changeset/tender-donuts-swim.md b/.changeset/tender-donuts-swim.md
@@ -0,0 +1,7 @@
+---
+"ossaui": patch
+"ossa-demo": patch
+"ossa-doc": patch
+---
+
+feat: 支持自定义 Icon
diff --git a/packages/ossa-demo/src/components/button/demo/index.tsx b/packages/ossa-demo/src/components/button/demo/index.tsx
@@ -31,6 +31,9 @@ const initialAPI = {
     {
       list: ["icon", "icon名称，参考OsIcon，可选", "string", "-"],
     },
+    {
+      list: ["customIcon", "自定义图标，可选，当且仅当'icon'为'custom'时有效", "ReactNode", "-"],
+    },
     {
       list: [
         "size",

diff --git a/packages/ossa-demo/src/components/icon/demo/index.tsx b/packages/ossa-demo/src/components/icon/demo/index.tsx
@@ -25,6 +25,9 @@ const initialListApi = {
     {
       list: ["type", "内置icon名称/类型，必选", "string", "-"],
     },
+    {
+      list: ["customIcon", "自定义图标，可选，当且仅当'type'为'custom'时有效", "ReactNode", "-"],
+    },
     {
       list: ["size", "尺寸，可选", "number", "40"],
     },
@@ -618,6 +621,17 @@ export default function Index(props: Props) {
         </View>
       </DemoBlock>
 
+      <DemoBlock title='自定义图标' fullScreen>
+        <View className='block-section'>
+          <View className='inline-item'>
+            <View className='inline-item--top'>
+              <OsIcon type='custom' customIcon={<View style={{width: 30, height: 30, background: 'red', borderRadius: '10px 0 10px 0'}} />}></OsIcon>
+            </View>
+            <View className='inline-item--name'>custom</View>
+          </View>
+        </View>
+      </DemoBlock>
+
       <DemoBlock>
         <DemoTable list={listApi}></DemoTable>
       </DemoBlock>

diff --git a/packages/ossa-demo/src/components/list/demo/index.tsx b/packages/ossa-demo/src/components/list/demo/index.tsx
@@ -36,9 +36,15 @@ const initialListApi = {
     {
       list: ["rightIcon", "右侧icon，取值参考OsIcon，可选", "string", "-"],
     },
+    {
+      list: ["rightCustomIcon", "右侧自定义图标，可选，当且仅当'rightIcon'为'custom'时有效，可选", "ReactNode", "-"],
+    },
     {
       list: ["leftIcon", "左侧icon，取值参考OsIcon，可选", "string", "-"],
     },
+    {
+      list: ["leftCustomIcon", "右侧自定义图标，可选，当且仅当'leftIcon'为'custom'时有效，可选", "ReactNode", "-"],
+    },
     {
       list: ["showSplitLine", "展示分割线，可选", "boolean", "true"],
     },

diff --git a/packages/ossa-demo/src/components/navBar/demo/index.tsx b/packages/ossa-demo/src/components/navBar/demo/index.tsx
@@ -43,6 +43,14 @@ const initialListApi = {
         "-",
       ],
     },
+    {
+      list: [
+        "leftCustomIcons",
+        "当且仅当 leftIcons 为 custom 时生效，渲染自定义图标，可选",
+        "Array<ReactNode>",
+        "-",
+      ],
+    },
     {
       list: ["leftTexts", "左侧文案，可选", "Array<API-Texts>", "-"],
     },
@@ -62,6 +70,14 @@ const initialListApi = {
         "-",
       ],
     },
+    {
+      list: [
+        "rightCustomIcons",
+        "当且仅当 rightIcons 为 custom 时生效，渲染自定义图标，可选",
+        "Array<ReactNode>",
+        "-",
+      ],
+    },
     {
       list: ["rightTexts", "右侧文案，可选", "Array<API-Texts>", "-"],
     },

diff --git a/packages/ossa-demo/src/components/noticeBar/demo/index.tsx b/packages/ossa-demo/src/components/noticeBar/demo/index.tsx
@@ -33,6 +33,9 @@ const initialListApi = {
     {
       list: ["leftIcon", "左侧Icon，可选", "OsIcon", "-"],
     },
+    {
+      list: ["customIcon", "自定义图标，可选，当且仅当'type'为'custom'时有效，可选", "ReactNode", "-"],
+    },
     {
       list: ["more", "是否显示更多按钮，可选", "boolean", "false"],
     },

diff --git a/packages/ossa-demo/src/components/rate/demo/index.tsx b/packages/ossa-demo/src/components/rate/demo/index.tsx
@@ -38,9 +38,25 @@ const initialListApi = {
         "grade-selected",
       ],
     },
+    {
+      list: [
+        "selectedCustomIcon",
+        "自定义图标，可选，当且仅当'selectedIcon'为'custom'时有效，可选",
+        "ReactNode",
+        "-",
+      ],
+    },
     {
       list: ["icon", "未选中时icon，取值参考OsIcon，可选", "string", "grade"],
     },
+    {
+      list: [
+        "customIcon",
+        "自定义图标，可选，当且仅当'icon'为'custom'时有效，可选",
+        "ReactNode",
+        "-",
+      ],
+    },
     {
       list: ["selectedIconColor", "选中icon颜色，可选", "string", "#FAB646"],
     },

diff --git a/packages/ossa-demo/src/components/upload/__test__/e2e.js b/packages/ossa-demo/src/components/upload/__test__/e2e.js
@@ -25,7 +25,7 @@ describe("Upload Testing", function () {
         .find("taro-view-core")
         .should(($upladBtnContent) => {
           //包含图片和文字
-          expect($upladBtnContent).to.have.length(2);
+          expect($upladBtnContent).to.have.length(3);
         });
     });
 

diff --git a/packages/ossa-doc/docs/组件/button.md b/packages/ossa-doc/docs/组件/button.md
@@ -77,6 +77,7 @@ demo_url: 'https://neteaseyanxuan.github.io/OSSA/#/components/button/demo/index'
 | type  | default \| primary \| special1 \| special2，可选 | string | default,特殊按钮用于sku |
 | shape | round \| square，可选                            | string | square(默认有4px圆角)   |
 | icon  | icon名称，参考OsIcon，可选                       | string | -                       |
+| customIcon  | 自定义图标，可选，当且仅当'icon'为'custom'时有效| ReactNode | -                       |
 | size  | min \| small \| normal \| large \| block，可选   | string | normal,特殊按钮不生效   |
 | color  | 文字颜色，可选   | string | -   |
 | bgColor  | 背景色，可选   | string | -   |

diff --git a/packages/ossa-doc/docs/组件/icon.md b/packages/ossa-doc/docs/组件/icon.md
@@ -111,6 +111,7 @@ demo_url: 'https://neteaseyanxuan.github.io/OSSA/#/components/icon/demo/index'
 |参数|说明|类型|默认值|
 |------|------|------|------|
 |type|内置icon名称/类型，必选|string|-|
+|customIcon|自定义图标，可选，当且仅当'type'为'custom'时有效|ReactNode|-|
 |size|尺寸，可选|number|40|
 |color|图标颜色，可选|string|#7F7F7F|
 |customStyle|自定义样式，可选|object|-|

diff --git a/packages/ossa-doc/docs/组件/list.md b/packages/ossa-doc/docs/组件/list.md
@@ -78,7 +78,9 @@ demo_url: 'https://neteaseyanxuan.github.io/OSSA/#/components/list/demo/index'
 |subTitle|副标题，可选|string|-|
 |desc|描述，可选|string|-|
 |rightIcon|右侧icon，取值参考OsIcon，可选|string|-|
+|rightCustomIcon|右侧自定义图标，可选，当且仅当'rightIcon'为'custom'时有效|ReactNode|-|
 |leftIcon|左侧icon，取值参考OsIcon，可选|string|-|
+|leftCustomIcon|左侧自定义图标，可选，当且仅当'leftIcon'为'custom'时有效|ReactNode|-|
 |showSplitLine|展示分割线，可选|boolean|true|
 |color|标题颜色，可选|string|#333333|
 |descColor|副标题或者描述字体颜色，可选|string|#7f7f7f|

diff --git a/packages/ossa-doc/docs/组件/navBar.md b/packages/ossa-doc/docs/组件/navBar.md
@@ -101,9 +101,11 @@ const rightTexts = [{ id: 1, text: "按钮" }]
 |title|导航标题，可选|ReactChild|-|
 |middleSlot|自定义左侧内容，存在时覆盖title，但比custom优先级低，可选，`middleSlot`属性将在未来的版本中被删除，请使用`title`替代|any|-|
 |leftIcons|左侧icon,取值参考OsIcon，可选|string[]|-|
+|leftCustomIcons|当且仅当 leftIcons 为 custom 时生效，渲染自定义图标，可选，可选|ReactNode[]|-|
 |leftTexts|左侧文案，可选|Texts[]|-|
 |leftSlot|自定义左侧内容，存在时覆盖leftIcons和leftTexts，但比custom优先级低，可选|ReactChild|-|
 |rightIcons|右侧icon,取值参考OsIcon，可选|string[]|-|
+|rightCustomIcons|当且仅当 rightIcons 为 custom 时生效，渲染自定义图标，可选，可选|ReactNode[]|-|
 |rightTexts|右侧文案，可选|Texts[]|-|
 |rightSlot|自定义右侧内容，存在时覆盖rightIcons和rightTexts，但比custom优先级低，可选|ReactChild|-|
 |showSplitLine|展示分割线，可选|boolean|true|

diff --git a/packages/ossa-doc/docs/组件/noticeBar.md b/packages/ossa-doc/docs/组件/noticeBar.md
@@ -47,6 +47,7 @@ demo_url: 'https://neteaseyanxuan.github.io/OSSA/#/components/noticeBar/demo/ind
 |scrollable|文字是否可滚动，可选|boolean|false|
 |speed|文字滚动速度，单位秒，可选|number|16，单位px/s|
 |leftIcon|左侧Icon，可选|OsIcon|-|
+|customIcon|自定义图标，可选，当且仅当'leftIcon'为'custom'时有效，可选|ReactNode|-|
 |more|是否显示更多按钮，可选|boolean|false|
 |color|文字颜色，可选|string|#f48f18|
 |bgColor|背景颜色，可选|string|#fff8d8|

diff --git a/packages/ossa-doc/docs/组件/rate.md b/packages/ossa-doc/docs/组件/rate.md
@@ -41,7 +41,9 @@ demo_url: 'https://neteaseyanxuan.github.io/OSSA/#/components/rate/demo/index'
 |size|尺寸，可选|'default' \| 'small'|'small'|
 |title|标题，可选|string|-|
 |selectedIcon|选中时icon，取值参考OsIcon，可选|string|grade-selected|
+|selectedCustomIcon|自定义图标，可选，当且仅当'selectedIcon'为'custom'时有效，可选|ReactNode|-|
 |icon|未选中时icon，取值参考OsIcon，可选|string|grade|
+|customIcon|自定义图标，可选，当且仅当'icon'为'custom'时有效，可选|ReactNode|-|
 |selectedIconColor|选中icon颜色，可选|string|#FAB646|
 |color|未选中icon颜色，可选|string|#CCCCCC|
 |options|分数对应的结果，可选|string[]|\['非常差', '差', '一般', '满意', '非常满意'\]|

diff --git a/packages/ossa/src/components/button/index.tsx b/packages/ossa/src/components/button/index.tsx
@@ -117,6 +117,7 @@ export default function Button(props: OsButtonProps) {
   const iconComponent = icon && (
     <OsIcon
       type={icon}
+      customIcon={props.customIcon}
       customStyle={{
         color: "inherit",
         marginRight:
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,9 @@ const initialAPI = { @@
         {
           list: ["icon", "icon名称，参考OsIcon，可选", "string", "-"],
         },
+        {
+          list: ["customIcon", "自定义图标，可选，当且仅当'icon'为'custom'时有效", "ReactNode", "-"],
+        },
         {
           list: [
             "size",
@@ Expand Down @@