diff --git a/build/webpack.base.js b/build/webpack.base.js index 39523ea..dffde54 100644 --- a/build/webpack.base.js +++ b/build/webpack.base.js @@ -106,10 +106,21 @@ module.exports = { 'less-loader', ], }, + // 配置svg图标 + { + test: /.svg$/, + // 存放svg的文件夹 + include: path.resolve('./src/icon/svg'), + use: [ + { loader: 'svg-sprite-loader', options: {} }, + { loader: 'svgo-loader', options: { symbolId: 'icon-[name]' } }, + ], + }, { // 匹配图片文件 test: /.(png|jpg|jpeg|gif|svg)$/, type: 'asset', // type选择asset + exclude: [path.resolve(__dirname, '../src/icon/svg')], // 排除icon文件夹的svg文件 parser: { dataUrlCondition: { maxSize: 10 * 1024, // 小于10kb转base64位 diff --git a/package.json b/package.json index 54618bf..3668826 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,9 @@ "react-helmet": "^6.1.0", "react-router-dom": "^6.6.2", "react-sortable-hoc": "^2.0.0", - "recoil": "^0.7.6" + "recoil": "^0.7.6", + "svg-sprite-loader": "^6.0.11", + "svgo-loader": "^4.0.0" }, "devDependencies": { "@babel/core": "^7.20.12", @@ -130,4 +132,4 @@ "url": "https://github.com/bigTig/react-webpack-ts/issues" }, "homepage": "https://github.com/bigTig/react-webpack-ts#readme" -} +} \ No newline at end of file diff --git a/src/components/SvgIcon/index.less b/src/components/SvgIcon/index.less new file mode 100644 index 0000000..9c0b8ca --- /dev/null +++ b/src/components/SvgIcon/index.less @@ -0,0 +1,4 @@ +.svg-icon { + width: 30px; + height: 30px; +} diff --git a/src/components/SvgIcon/index.tsx b/src/components/SvgIcon/index.tsx new file mode 100644 index 0000000..7b7c5dd --- /dev/null +++ b/src/components/SvgIcon/index.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import styles from './index.less' + +import '@/icon' + +interface SvgIconProps { + name: string + width?: string | number + height?: string | number +} + +/** + * @description: SvgIcon + * @author: KaifengLi + * @version: 1.0.0 + * @Date: 2024-06-26 13:43:13 + */ +const SvgIcon = (props: SvgIconProps) => { + const { width = 30, height = 30, name } = props + + return ( + + + + ) +} + +export default SvgIcon diff --git a/src/icon/index.ts b/src/icon/index.ts new file mode 100644 index 0000000..8155232 --- /dev/null +++ b/src/icon/index.ts @@ -0,0 +1,9 @@ +const req = require.context('./svg/', false, /.svg$/) +const requireAll = (requireContext: __WebpackModuleApi.RequireContext) => + requireContext.keys().map(requireContext) + +requireAll(req) + +console.log(requireAll(req)) + +export default requireAll(req) diff --git a/src/icon/svg/icon-business-trip.svg b/src/icon/svg/icon-business-trip.svg new file mode 100644 index 0000000..8abc596 --- /dev/null +++ b/src/icon/svg/icon-business-trip.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-change-request.svg b/src/icon/svg/icon-change-request.svg new file mode 100644 index 0000000..79337c6 --- /dev/null +++ b/src/icon/svg/icon-change-request.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-doe-application-form.svg b/src/icon/svg/icon-doe-application-form.svg new file mode 100644 index 0000000..fe8aeed --- /dev/null +++ b/src/icon/svg/icon-doe-application-form.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-ecn-application.svg b/src/icon/svg/icon-ecn-application.svg new file mode 100644 index 0000000..67a1d47 --- /dev/null +++ b/src/icon/svg/icon-ecn-application.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-fixed-capital.svg b/src/icon/svg/icon-fixed-capital.svg new file mode 100644 index 0000000..c704d70 --- /dev/null +++ b/src/icon/svg/icon-fixed-capital.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-interview-evaluation.svg b/src/icon/svg/icon-interview-evaluation.svg new file mode 100644 index 0000000..b65ef8f --- /dev/null +++ b/src/icon/svg/icon-interview-evaluation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-leave-request.svg b/src/icon/svg/icon-leave-request.svg new file mode 100644 index 0000000..0030624 --- /dev/null +++ b/src/icon/svg/icon-leave-request.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-material-contracte.svg b/src/icon/svg/icon-material-contracte.svg new file mode 100644 index 0000000..6fa2bb8 --- /dev/null +++ b/src/icon/svg/icon-material-contracte.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-monitor-access.svg b/src/icon/svg/icon-monitor-access.svg new file mode 100644 index 0000000..882fb00 --- /dev/null +++ b/src/icon/svg/icon-monitor-access.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-permission-application.svg b/src/icon/svg/icon-permission-application.svg new file mode 100644 index 0000000..5f2ba44 --- /dev/null +++ b/src/icon/svg/icon-permission-application.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-permission-request.svg b/src/icon/svg/icon-permission-request.svg new file mode 100644 index 0000000..14d0952 --- /dev/null +++ b/src/icon/svg/icon-permission-request.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-personnel-supple.svg b/src/icon/svg/icon-personnel-supple.svg new file mode 100644 index 0000000..29d46b1 --- /dev/null +++ b/src/icon/svg/icon-personnel-supple.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-quotation-request.svg b/src/icon/svg/icon-quotation-request.svg new file mode 100644 index 0000000..87eb5bf --- /dev/null +++ b/src/icon/svg/icon-quotation-request.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-quotation-sheet.svg b/src/icon/svg/icon-quotation-sheet.svg new file mode 100644 index 0000000..96bf942 --- /dev/null +++ b/src/icon/svg/icon-quotation-sheet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-release-permit.svg b/src/icon/svg/icon-release-permit.svg new file mode 100644 index 0000000..ff0b239 --- /dev/null +++ b/src/icon/svg/icon-release-permit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-shipment-requisition.svg b/src/icon/svg/icon-shipment-requisition.svg new file mode 100644 index 0000000..c633507 --- /dev/null +++ b/src/icon/svg/icon-shipment-requisition.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-shuwupinfabao.svg b/src/icon/svg/icon-shuwupinfabao.svg new file mode 100644 index 0000000..1fe5ab9 --- /dev/null +++ b/src/icon/svg/icon-shuwupinfabao.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-wupinzhuanyishenqingdan.svg b/src/icon/svg/icon-wupinzhuanyishenqingdan.svg new file mode 100644 index 0000000..df60592 --- /dev/null +++ b/src/icon/svg/icon-wupinzhuanyishenqingdan.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-xinanjianpinggu.svg b/src/icon/svg/icon-xinanjianpinggu.svg new file mode 100644 index 0000000..39f9ba4 --- /dev/null +++ b/src/icon/svg/icon-xinanjianpinggu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-yingjiangongcheng.svg b/src/icon/svg/icon-yingjiangongcheng.svg new file mode 100644 index 0000000..8c43b41 --- /dev/null +++ b/src/icon/svg/icon-yingjiangongcheng.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-yuanguanshenqingdan.svg b/src/icon/svg/icon-yuanguanshenqingdan.svg new file mode 100644 index 0000000..4810a4a --- /dev/null +++ b/src/icon/svg/icon-yuanguanshenqingdan.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icon/svg/icon-zhijufabao.svg b/src/icon/svg/icon-zhijufabao.svg new file mode 100644 index 0000000..aace7e7 --- /dev/null +++ b/src/icon/svg/icon-zhijufabao.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/iconDashboard/index.less b/src/pages/iconDashboard/index.less new file mode 100644 index 0000000..2ab86a5 --- /dev/null +++ b/src/pages/iconDashboard/index.less @@ -0,0 +1,15 @@ +.icon-dashboard { + display: flex; + width: 100%; + height: 100%; + padding: 16px; + background-color: #fff; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + + .icon { + width: 100px; + margin-right: 16px; + } +} diff --git a/src/pages/iconDashboard/index.tsx b/src/pages/iconDashboard/index.tsx new file mode 100644 index 0000000..936de9f --- /dev/null +++ b/src/pages/iconDashboard/index.tsx @@ -0,0 +1,37 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import SvgIcon from '@/components/SvgIcon' +import icon from '@/icon' +import { SmileFilled, SmileOutlined } from '@ant-design/icons' +import { Typography } from 'antd' +import React from 'react' +import styles from './index.less' +const { Paragraph } = Typography + +/** + * @description: svg图标展示面板 + * @author: KaifengLi + * @version: v1.0.0 + * @Date: 2024-06-26 14:51:31 + */ +const IconDashboard: React.FC = () => { + return ( +
+ {icon.map((el: any) => ( +
+ + , ], + tooltips: ['点击复制', '复制成功!!'], + }} + > + {el.default.id} + +
+ ))} +
+ ) +} + +export default IconDashboard diff --git a/src/routers/modules/dataScreen.tsx b/src/routers/modules/dataScreen.tsx index b16f92f..ce19efd 100644 --- a/src/routers/modules/dataScreen.tsx +++ b/src/routers/modules/dataScreen.tsx @@ -11,6 +11,7 @@ const dataScreenRouter: metaRoutersProps[] = [ auth: true, title: '数据大屏', key: 'dataScreen', + icon: 'FundProjectionScreenOutlined', }, }, ] diff --git a/src/routers/modules/iconDashboard.tsx b/src/routers/modules/iconDashboard.tsx new file mode 100644 index 0000000..5430920 --- /dev/null +++ b/src/routers/modules/iconDashboard.tsx @@ -0,0 +1,27 @@ +import BasicLayout from '@/layouts' +import React from 'react' +import { metaRoutersProps } from '../interface' +import lazyLoad from '../utils/lazyLoad' + +// 首页模块 +const iconRouter: Array = [ + { + element: , + path: '/icon', + single: true, + children: [ + { + path: '/icon/index', + element: lazyLoad(React.lazy(() => import('@/pages/iconDashboard'))), + meta: { + title: 'Svg图标', + key: 'svg', + icon: 'AppstoreOutlined', + auth: true, + }, + }, + ], + }, +] + +export default iconRouter diff --git a/src/routers/modules/menu.tsx b/src/routers/modules/menu.tsx index e2b9b0e..2999f1c 100644 --- a/src/routers/modules/menu.tsx +++ b/src/routers/modules/menu.tsx @@ -65,7 +65,7 @@ const menuRouter: Array = [ ], meta: { title: '菜单2-2', - key: 'menu221', + key: 'menu22', auth: true, }, }, @@ -80,8 +80,8 @@ const menuRouter: Array = [ }, ], meta: { - title: '菜单2-1', - key: 'menu21', + title: '菜单2', + key: 'menu2', auth: true, }, }, diff --git a/src/routers/utils/authRouter.tsx b/src/routers/utils/authRouter.tsx index 71af99c..161ad86 100644 --- a/src/routers/utils/authRouter.tsx +++ b/src/routers/utils/authRouter.tsx @@ -29,6 +29,7 @@ const AuthRouter = (props: { children: any }) => { '/dashboard/embedded', '/dashboard/analysis', '/dataScreen/analysis', + '/icon/index', ] // 5. Static Router(静态路由，必须配置首页地址，否则不能进首页获取菜单、按钮权限等数据)，获取数据的时候会loading，所有配置首页地址也没问题