feat: 新增iconPark组件

config/routes.js

@@ -6,9 +6,9 @@ export default [
       {
         name: 'login',
         path: '/user/login',
-        component: './user/login',
-      },
-    ],
+        component: './user/login'
+      }
+    ]
   },
   {
     path: '/',
@@ -26,98 +26,98 @@ export default [
           // {
           //   path: '/welcome',
           //   name: 'welcome',
-          //   icon: 'smile',
+          // (icon: 'smile'),
           //   component: './Welcome',
           // },
-            {
-              path: '/workbench',
-              name: 'workbench',
-              icon: 'icon-chess',
-              routes: [
-                {
-                  path: '/workbench/workbench',
-                  name: 'workbench',
-                  component: './Workbench/workbench',
-                },
-              ],
-            },
-            {
-              path: '/customer',
-              name: 'customer',
-              icon: 'icon-address-book',
-              routes: [
-                {
-                  path: '/customer/contact',
-                  name: 'contact',
-                  icon: 'icon-address-book-o',
-                  component: './Customer/Contact',
-                },
-                {
-                  path: '/customer/company',
-                  name: 'company',
-                  icon: 'icon-building',
-                  component: './Customer/Company',
-                },
-                {
-                  path: '/customer/test',
-                  name: 'test',
-                  icon: 'icon-siglyphalarmclock',
-                  component: './Customer/Test',
-                },
-              ],
-            },
-            {
-              path: '/product',
-              name: 'product',
-              icon: 'icon-box',
-              routes: [
-                {
-                  path: '/product/lock',
-                  name: 'lock',
-                  icon: 'icon-magic',
-                  routes: [
-                    {
-                      path: '/product/lock/lockstore',
-                      name: 'lockstore',
-                      component: './Product/Lock/Lockstore',
-                    },
-                    {
-                      path: '/product/lock/lockcount',
-                      name: 'lockcount',
-                      component: './Product/Lock/Lockcount',
-                    },
-                  ],
-                },
-                {
-                  path: '/product/cloud',
-                  name: 'cloud',
-                  icon: 'icon-cloud',
-                  routes: [
-                    {
-                      path: '/product/cloud/building',
-                      name: 'build',
-                      component: './Product/Cloud/Building',
-                    },
-                    {
-                      path: '/product/cloud/curing',
-                      name: 'curing',
-                      component: './Product/Cloud/Curing',
-                    },
-                  ],
-                },
-              ],
-            },
+          {
+            path: '/workbench',
+            name: 'workbench',
+            // // icon: 'icon-chess',
+            routes: [
+              {
+                path: '/workbench/workbench',
+                name: 'workbench',
+                component: './Workbench/workbench'
+              }
+            ]
+          },
+          {
+            path: '/customer',
+            name: 'customer',
+            // // icon: 'icon-address-book',
+            routes: [
+              {
+                path: '/customer/contact',
+                name: 'contact',
+                icon: 'address-book',
+                component: './Customer/Contact'
+              },
+              {
+                path: '/customer/company',
+                name: 'company',
+                icon: 'ad-product',
+                component: './Customer/Company'
+              },
+              {
+                path: '/customer/test',
+                name: 'test',
+                icon: 'alarm',
+                component: './Customer/Test'
+              }
+            ]
+          },
+          {
+            path: '/product',
+            name: 'product',
+            // // icon: 'icon-box',
+            routes: [
+              {
+                path: '/product/lock',
+                name: 'lock',
+                // // icon: 'icon-magic',
+                routes: [
+                  {
+                    path: '/product/lock/lockstore',
+                    name: 'lockstore',
+                    component: './Product/Lock/Lockstore'
+                  },
+                  {
+                    path: '/product/lock/lockcount',
+                    name: 'lockcount',
+                    component: './Product/Lock/Lockcount'
+                  }
+                ]
+              },
+              {
+                path: '/product/cloud',
+                name: 'cloud',
+                // // icon: 'icon-cloud',
+                routes: [
+                  {
+                    path: '/product/cloud/building',
+                    name: 'build',
+                    component: './Product/Cloud/Building'
+                  },
+                  {
+                    path: '/product/cloud/curing',
+                    name: 'curing',
+                    component: './Product/Cloud/Curing'
+                  }
+                ]
+              }
+            ]
+          }
           // {
           //   path: '/admin',
           //   name: 'admin',
-          //   icon: 'crown',
+          // icon: 'crown',
           //   component: './Admin',
           //   authority: ['admin'],
           //   routes: [
           //     {
           //       path: '/admin/sub-page',
           //       name: 'sub-page',
-          //       icon: 'smile',
+          // icon: 'smile',
           //       component: './Welcome',
           //       authority: ['admin'],
           //     },
@@ -125,21 +125,21 @@ export default [
           // },
           // {
           //   name: 'list.table-list',
-          //   icon: 'table',
+          // icon: 'table',
           //   path: '/list',
           //   component: './ListTableList',
           // },
           // {
           //   component: './404',
           // },
-        ],
+        ]
       },
       {
-        component: './404',
-      },
-    ],
+        component: './404'
+      }
+    ]
   },
   {
-    component: './404',
-  },
-];
+    component: './404'
+  }
+]

src/components/SvgIcon/index.jsx

@@ -1,7 +1,16 @@
 import { createFromIconfontCN } from '@ant-design/icons'
 import setting from '../../../config/defaultSettings'
 
+import Icon from '@icon-park/react/es/all'
+import React from 'react'
+
 const IconFont = createFromIconfontCN({
   scriptUrl: setting.iconfontUrl
 })
 export default IconFont
+
+export const IconPark = props => (
+  <span className="action zh-mg-right-10">
+    <Icon {...props} />
+  </span>
+)

src/layouts/BasicLayout.jsx

@@ -15,6 +15,8 @@ import logo from '../assets/logo.svg'
 import styles from './BasicLayout.less'
 import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import './amimate.scss'
+import '@icon-park/react/styles/index.less'
+import { IconPark } from '@/components/SvgIcon'
 
 const noMatch = (
   <Result
@@ -38,6 +40,9 @@ const menuDataRender = menuList =>
       ...item,
       children: item.children ? menuDataRender(item.children) : undefined
     }
+    if (item.icon) {
+      localItem.icon = <IconPark type={item.icon} />
+    }
     return Authorized.check(item.authority, localItem, null)
   })
 
@@ -146,11 +151,6 @@ const BasicLayout = props => {
         menuDataRef.current = menuData || []
         return menuData || []
       }}>
-      {/* <TransitionGroup className="wrap-container">
-        <CSSTransition key={location.pathname} timeout={250} classNames="fade">
-          <ConfigProvider locale={zhCN}>{children}</ConfigProvider>
-        </CSSTransition>
-      </TransitionGroup> */}
       <ConfigProvider locale={zhCN}>{children}</ConfigProvider>
       {/* <Authorized authority={authorized.authority} noMatch={noMatch}> */}
       {/* </Authorized> */}