feat(Icon): icon harmony adaptation

jdf2e · Nov 22, 2024 · b380bcf · b380bcf
1 parent beb7be2
commit b380bcf
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 65 deletions.
diff --git a/src/config.json b/src/config.json
@@ -105,7 +105,7 @@
           "author": "hanyuxinting"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Icon",
           "type": "component",
           "cName": "图标",

diff --git a/src/packages/icon/demo.taro.tsx b/src/packages/icon/demo.taro.tsx
@@ -1,12 +1,11 @@
 import React, { useState } from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
-// import '@nutui/icons-react-taro/dist/style_iconfont.css'
+import '@nutui/icons-react-taro/dist/style_iconfont.css'
 import { Toast } from '@nutui/nutui-react-taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
-import Demo2 from './demos/taro/demo2'
 import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
@@ -16,28 +15,22 @@ import Demo7 from './demos/taro/demo7'
 const IconDemo = () => {
   const [translated] = useTranslate({
     'zh-CN': {
-      '84aa6bce': '基础用法',
-      svg: 'SVG 按需使用',
+      '84aa6bce': '基础用法: SVG',
       dab8a74f: '图片链接',
       '52c15454': '图标颜色',
       '7aeb5407': '图标大小',
-      f2e6c6d6: '基础图标',
     },
     'zh-TW': {
-      '84aa6bce': '基礎用法',
-      svg: 'SVG 按需使用',
+      '84aa6bce': '基礎用法: SVG',
       dab8a74f: '圖片連結',
       '52c15454': '圖示顏色',
       '7aeb5407': '圖示大小',
-      f2e6c6d6: '基礎圖示',
     },
     'en-US': {
-      '84aa6bce': 'Basic Usage',
-      svg: 'SVG import On Demand',
+      '84aa6bce': 'Basic Usage: SVG',
       dab8a74f: 'Image Link',
       '52c15454': 'IconFont Color',
       '7aeb5407': 'IconFont Size',
-      f2e6c6d6: 'Base IconFont',
     },
   })
 
@@ -72,10 +65,8 @@ const IconDemo = () => {
             })
           }}
         />
-        <View className="h2">{translated.svg}</View>
-        <Demo1 />
         <View className="h2">{translated['84aa6bce']}</View>
-        <Demo2 />
+        <Demo1 />
         <View className="h2">{translated.dab8a74f}</View>
         <Demo3 />
         <View className="h2">{translated['52c15454']}</View>

diff --git a/src/packages/icon/demos/taro/demo1.tsx b/src/packages/icon/demos/taro/demo1.tsx
@@ -1,13 +1,14 @@
 import React from 'react'
 import { Cell } from '@nutui/nutui-react-taro'
-import { Add, Dongdong, UserAdd } from '@nutui/icons-react-taro'
+import { Add, Dongdong, UserAdd, Minus } from '@nutui/icons-react-taro'
 
 const Demo1 = () => {
   return (
     <Cell>
       <Add color="red" style={{ marginRight: '10px' }} />
       <UserAdd style={{ marginRight: '10px' }} />
-      <Dongdong />
+      <Dongdong style={{ marginRight: '10px' }} />
+      <Minus />
     </Cell>
   )
 }

diff --git a/src/packages/icon/demos/taro/demo2.tsx b/src/packages/icon/demos/taro/demo2.tsx
diff --git a/src/packages/icon/demos/taro/demo3.tsx b/src/packages/icon/demos/taro/demo3.tsx
@@ -6,7 +6,9 @@ const Demo3 = () => {
   return (
     <Cell>
       <IconFont
-        size="40"
+        size={40}
+        width={40}
+        height={40}
         name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
       />
     </Cell>

diff --git a/src/packages/icon/demos/taro/demo4.tsx b/src/packages/icon/demos/taro/demo4.tsx
@@ -1,21 +1,13 @@
 import React from 'react'
 import { Cell } from '@nutui/nutui-react-taro'
-import { IconFont } from '@nutui/icons-react-taro'
+import { Dongdong } from '@nutui/icons-react-taro'
 
 const Demo4 = () => {
   return (
     <Cell>
-      <IconFont
-        name="dongdong"
-        color="#FF0F23"
-        style={{ marginRight: '10px' }}
-      />
-      <IconFont
-        name="dongdong"
-        color="#64b578"
-        style={{ marginRight: '10px' }}
-      />
-      <IconFont name="dongdong" color="#ffd700" />
+      <Dongdong color="#FF0F23" style={{ marginRight: '10px' }} />
+      <Dongdong color="#64b578" style={{ marginRight: '10px' }} />
+      <Dongdong color="#ffd700" />
     </Cell>
   )
 }

diff --git a/src/packages/icon/demos/taro/demo5.tsx b/src/packages/icon/demos/taro/demo5.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { Cell } from '@nutui/nutui-react-taro'
-import { IconFont } from '@nutui/icons-react-taro'
+import { Dongdong } from '@nutui/icons-react-taro'
 
 const Demo5 = () => {
   return (
     <Cell style={{ alignItems: 'center' }}>
-      <IconFont name="dongdong" size="16" style={{ marginRight: '10px' }} />
-      <IconFont name="dongdong" size="20" style={{ marginRight: '10px' }} />
-      <IconFont name="dongdong" size="24" />
+      <Dongdong size="16" style={{ marginRight: '10px' }} />
+      <Dongdong size="20" style={{ marginRight: '10px' }} />
+      <Dongdong size="24" />
     </Cell>
   )
 }

diff --git a/src/packages/icon/demos/taro/demo6.tsx b/src/packages/icon/demos/taro/demo6.tsx
@@ -1,12 +1,15 @@
 import React, { useState } from 'react'
-import { IconFontConfig, IconFont } from '@nutui/icons-react-taro'
+import * as iconfonts from '@nutui/icons-react-taro'
 import { Cell, Toast } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 import { camelCase } from '@/utils/camel-case'
+import { web } from '@/utils/platform-taro'
 
 const Demo6 = () => {
   const generateCopyText = (name: string) => {
     return `<${camelCase(name, { pascalCase: true })} />`
   }
+
   const copyTag = (text: string) => {
     const input = document.createElement('input')
     document.body.appendChild(input)
@@ -25,11 +28,11 @@ const Demo6 = () => {
   return (
     <>
       <Toast visible={state.visible} content={state.content} type="text" />
-      {(IconFontConfig as any).data.map((item: any) => {
+      {(iconfonts.IconFontConfig as any).data.map((item: any) => {
         return (
           <Cell.Group key={item.name} title={item.name}>
             <Cell>
-              <ul
+              <View
                 style={{
                   display: 'flex',
                   flexWrap: 'wrap',
@@ -39,7 +42,7 @@ const Demo6 = () => {
               >
                 {item.icons.map((icon: any) => {
                   return (
-                    <li
+                    <View
                       key={Math.random()}
                       onClick={() => {
                         copyTag(generateCopyText(icon))
@@ -59,11 +62,17 @@ const Demo6 = () => {
                         justifyContent: 'center',
                       }}
                     >
-                      <IconFont name={icon} />
-                    </li>
+                      {!web() ? (
+                        React.createElement(
+                          iconfonts[camelCase(icon, { pascalCase: true })] || ''
+                        )
+                      ) : (
+                        <iconfonts.IconFont name={icon} />
+                      )}
+                    </View>
                   )
                 })}
-              </ul>
+              </View>
             </Cell>
           </Cell.Group>
         )

diff --git a/src/packages/icon/demos/taro/demo7.tsx b/src/packages/icon/demos/taro/demo7.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
-import { IconFontConfig, IconFont } from '@nutui/icons-react-taro'
+import * as iconfonts from '@nutui/icons-react-taro'
 import { Cell, Toast } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 import { camelCase } from '@/utils/camel-case'
+import { web } from '@/utils/platform-taro'
 
 const Demo7 = () => {
   const generateAMCopyText = (icon: any) => {
@@ -27,11 +29,11 @@ const Demo7 = () => {
   return (
     <>
       <Toast visible={state.visible} content={state.content} type="text" />
-      {(IconFontConfig as any).style.map((item: any) => {
+      {(iconfonts.IconFontConfig as any).style.map((item: any) => {
         return (
           <Cell.Group key={item.name} title={item.name}>
             <Cell>
-              <ul
+              <View
                 style={{
                   display: 'flex',
                   flexWrap: 'wrap',
@@ -41,7 +43,7 @@ const Demo7 = () => {
               >
                 {item.icons.map((icon: any) => {
                   return (
-                    <li
+                    <View
                       key={icon.name}
                       onClick={() => {
                         copyTag(generateAMCopyText(icon))
@@ -61,14 +63,25 @@ const Demo7 = () => {
                         justifyContent: 'center',
                       }}
                     >
-                      <IconFont
-                        name={icon.name}
-                        className={`nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`}
-                      />
-                    </li>
+                      {!web() ? (
+                        React.createElement(
+                          iconfonts[
+                            camelCase(icon.name || '', { pascalCase: true })
+                          ],
+                          {
+                            className: `nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`,
+                          }
+                        )
+                      ) : (
+                        <iconfonts.IconFont
+                          name={icon.name}
+                          className={`nut-icon-${icon['animation-name']} nut-icon-${icon['animation-time']}`}
+                        />
+                      )}
+                    </View>
                   )
                 })}
-              </ul>
+              </View>
             </Cell>
           </Cell.Group>
         )