chore(backtop): icon 组件替换 (#774)

src/packages/backtop/backtop.taro.tsx

-import React, { FunctionComponent, useState } from 'react'
-
+import React, { FunctionComponent, ReactNode, useState } from 'react'
 import { usePageScroll, pageScrollTo } from '@tarojs/taro'
-import Icon from '@/packages/icon/index.taro'
+import { Top } from '@nutui/icons-react-taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 declare const window: any
@@ -15,7 +14,7 @@ export interface BackTopProps extends BasicComponent {
   zIndex: number
   isAnimation: boolean
   duration: number
-  children?: HTMLElement | any
+  children?: ReactNode
   style?: React.CSSProperties
   onClick?: (event: MouseEvent) => void
 }
@@ -46,8 +45,6 @@ export const BackTop: FunctionComponent<
     duration,
     style,
     onClick,
-    iconClassPrefix,
-    iconFontClassName,
   } = {
     ...defaultProps,
     ...props,
@@ -85,13 +82,7 @@ export const BackTop: FunctionComponent<
         }}
       >
         {children || (
-          <Icon
-            classPrefix={iconClassPrefix}
-            fontClassName={iconFontClassName}
-            size="19px"
-            className="nut-backtop-main"
-            name="top"
-          />
+          <Top width={19} height={19} className="nut-backtop-main" />
         )}
       </div>
     </>

src/packages/backtop/backtop.tsx

-import React, { FunctionComponent, useEffect, useState, useRef } from 'react'
-
-import Icon from '@/packages/icon'
+import React, {
+  FunctionComponent,
+  useEffect,
+  useState,
+  useRef,
+  ReactNode,
+} from 'react'
+import { Top } from '@nutui/icons-react'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 
 declare const window: any
@@ -14,7 +19,7 @@ export interface BackTopProps extends BasicComponent {
   zIndex: number
   isAnimation: boolean
   duration: number
-  children?: HTMLElement | any
+  children?: ReactNode
   style?: React.CSSProperties
   onClick?: (event: MouseEvent) => void
 }
@@ -45,8 +50,6 @@ export const BackTop: FunctionComponent<
     duration,
     style,
     onClick,
-    iconClassPrefix,
-    iconFontClassName,
   } = {
     ...defaultProps,
     ...props,
@@ -152,15 +155,7 @@ export const BackTop: FunctionComponent<
         goTop(e)
       }}
     >
-      {children || (
-        <Icon
-          classPrefix={iconClassPrefix}
-          fontClassName={iconFontClassName}
-          size="19px"
-          className="nut-backtop-main"
-          name="top"
-        />
-      )}
+      {children || <Top width={19} height={19} className="nut-backtop-main" />}
     </div>
   )
 }

src/packages/backtop/demo.taro.tsx

 import React from 'react'
-import { BackTop, Icon } from '@/packages/nutui.react.taro'
+import Taro from '@tarojs/taro'
+import { Top } from '@nutui/icons-react-taro'
+import { BackTop } from '@/packages/nutui.react.taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
-import Taro from '@tarojs/taro'
 
 interface T {
   title: string
@@ -141,7 +142,7 @@ const BackTopDemo = () => {
               alignItems: 'center',
             }}
           >
-            <Icon size="12px" className="nut-backtop-main" name="top" />
+            <Top width={12} height={12} className="nut-backtop-main" />
             <div style={{ fontSize: '12px' }}>{translated.backText}</div>
           </div>
         </BackTop>

src/packages/backtop/demo.tsx

 import React from 'react'
+import { Top } from '@nutui/icons-react'
 import { BackTop } from './backtop'
 import { useTranslate } from '../../sites/assets/locale'
-import Icon from '@/packages/icon'
 
 interface T {
   title: string
@@ -136,11 +136,11 @@ const BackTopDemo = () => {
               alignItems: 'center',
             }}
           >
-            <Icon size="12px" className="nut-backtop-main" name="top" />
+            <Top width={12} height={12} />
             <div style={{ fontSize: '12px' }}>{translated.backText}</div>
           </div>
         </BackTop>
-        <BackTop elId="elId" distance={200} bottom={50} onClick={handleClick} />
+        {/* <BackTop elId="elId" distance={200} bottom={50} onClick={handleClick} /> */}
       </div>
     </>
   )

src/packages/backtop/doc.en-US.md

@@ -129,7 +129,8 @@ export default App;
 
 ```tsx
 import  React from "react";
-import { BackTop, Icon } from '@nutui/nutui-react';
+import { BackTop } from '@nutui/nutui-react';
+import { Top } from '@nutui/icons-react';
 
 const App = () => {
     const cellStyle = {
@@ -183,7 +184,7 @@ const App = () => {
               alignItems: 'center',
             }}
           >
-            <Icon size="12px" className="nut-backtop-main" name="top" />
+            <Top width={12} height={12} className="nut-backtop-main" />
             <div style={{ fontSize: '12px' }}>TOP</div>
           </div>
         </BackTop>

src/packages/backtop/doc.md

@@ -132,7 +132,8 @@ export default App;
 
 ```tsx
 import  React from "react";
-import { BackTop,Icon } from '@nutui/nutui-react';
+import { BackTop } from '@nutui/nutui-react';
+import { Top } from '@nutui/icons-react';
 
 const App = () => {
   const cellStyle = {
@@ -186,7 +187,7 @@ const App = () => {
               alignItems: 'center',
             }}
           >
-            <Icon size="12px" className="nut-backtop-main" name="top" />
+            <Top width={12} height={12} className="nut-backtop-main" />
             <div style={{ fontSize: '12px' }}>顶部</div>
           </div>
         </BackTop>

src/packages/backtop/doc.taro.md

@@ -7,7 +7,7 @@
 ### 安装
 
 ```javascript
-import { BackTop } from '@/packages/nutui.react.taro'
+import { BackTop } from '@nutui/nutui-react-taro'
 ```
 
 ## 代码演示
@@ -18,7 +18,7 @@ import { BackTop } from '@/packages/nutui.react.taro'
 
 ```tsx
 import  React from "react";
-import { BackTop } from '@/packages/nutui.react.taro'
+import { BackTop } from '@nutui/nutui-react-taro'
 
 const App = () => {
   const cellStyle = {
@@ -74,7 +74,7 @@ export default App;
 
 ```tsx
 import  React from "react";
-import { BackTop} from '@/packages/nutui.react.taro'
+import { BackTop} from '@nutui/nutui-react-taro';
 
 const App = () => {
     const cellStyle = {
@@ -129,7 +129,8 @@ export default App;
 
 ```tsx
 import  React from "react";
-import { BackTop, Icon } from '@/packages/nutui.react.taro'
+import { BackTop } from '@nutui/nutui-react-taro';
+import { Top } from '@nutui/icons-react-taro';
 
 const App = () => {
   const cellStyle = {
@@ -179,7 +180,7 @@ const App = () => {
               alignItems: 'center',
             }}
           >
-            <Icon size="12px" className="nut-backtop-main" name="top" />
+            <Top width={12} height={12} className="nut-backtop-main" />
             <div style={{ fontSize: '12px' }}>顶部</div>
           </div>
         </BackTop>
@@ -197,7 +198,7 @@ export default App;
 
 ```tsx
 import  React from "react";
-import { BackTop} from '@/packages/nutui.react.taro'
+import { BackTop} from '@nutui/nutui-react-taro'
 
 const App = () => {
   const cellStyle = {

src/packages/backtop/doc.zh-TW.md

@@ -131,8 +131,8 @@ export default App;
 
 ```tsx
 import  React from "react";
-import { BackTop,Icon } from '@nutui/nutui-react';
-
+import { BackTop } from '@nutui/nutui-react';
+import { Top } from '@nutui/icons-react';
 
 const App = () => {
   const cellStyle = {
@@ -186,7 +186,7 @@ const App = () => {
               alignItems: 'center',
             }}
           >
-            <Icon size="12px" className="nut-backtop-main" name="top" />
+            <Top width={12} height={12} className="nut-backtop-main" />
             <div style={{ fontSize: '12px' }}>顶部</div>
           </div>
         </BackTop>