update

package.json

@@ -71,6 +71,8 @@
     "style-loader": "^3.3.1",
     "stylelint": "^14.7.1",
     "stylelint-webpack-plugin": "^3.2.0",
+    "svg-sprite-loader": "^6.0.11",
+    "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.1",
     "thread-loader": "^3.0.4",
     "typescript": "^4.4.4",

src/components/svg-icon/index.less

@@ -0,0 +1,8 @@
+.svg-icon {
+  width: 1.1em;
+  height: 1.1em;
+  vertical-align: -0.2em;
+  fill: currentColor;
+  overflow: hidden;
+  outline: none;
+}

src/components/svg-icon/index.tsx

@@ -0,0 +1,20 @@
+import React, { LegacyRef } from 'react';
+import './index.less';
+
+interface SvgIconProps extends React.HtmlHTMLAttributes<SVGSVGElement> {
+  name: string;
+  className?: string;
+}
+
+const SvgIcon = React.forwardRef((props: SvgIconProps, ref: LegacyRef<SVGSVGElement>) => {
+  const { name, className, ...rest } = props
+  const svgClass = className ? 'svg-icon ' + className : 'svg-icon';
+  const iconName = `#${name}`;
+  return (
+    <svg className={svgClass} aria-hidden="true" ref={ref} {...rest}>
+      <use xlinkHref={iconName} />
+    </svg>
+  );
+});
+
+export default SvgIcon;

src/icons/index.js

@@ -0,0 +1,3 @@
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)

src/pages/index.tsx

@@ -10,7 +10,8 @@ import "slick-carousel/slick/slick-theme.css";
 import "less/index.less";
 import { ConfigProvider } from 'antd-mobile';
 import antdMobileConfigs from '@/core/antd-mobile-configs';
-
+// 引入图标
+import "@/icons/index.js";
 
 // 只在开发环境下引入
 // if (process.env.NODE_ENV === 'development') {

src/utils/object.ts

@@ -57,7 +57,8 @@ export function filterObject(obj: object | undefined | null, callback: (value: a
 // 接收路径字符串或数组字符串，返回数组字符串表示路径
 export function pathToArr(path?: string | string[]) {
   if (path instanceof Array) return path;
-  return typeof path === 'string' && path ? path.replace(/\]$/, '').split(/\.\[|\[\]|\]\[|\[|\]\.|\]|\./g) : [];
+  const parts = typeof path === 'string' && path ? path.replace(/\]$/, '').replace(/^\[/, '').split(/\.\[|\[\]|\]\[|\[|\]\.|\]|\./g) : []
+  return parts;
 }
 
 // 根据路径获取目标对象中的单个值或多个值

webpack/paths.js

@@ -25,11 +25,14 @@ const dllOutputPath = path.join(staticPath, 'dll');
 const appHtml = path.join(srcPath, 'pages/index.html');
 // 引入配置
 const configs = require('./configs.js');
+// 图标路径
+const iconsPath = path.resolve(srcPath, './icons');
 const isDev = configs.isDev;
 // 合并为一个对象输出
 module.exports = {
   appRoot,
   srcPath,
+  iconsPath,
   staticPath,
   lessPath,
   outputPath,

webpack/webpack.base.js

@@ -191,7 +191,7 @@ module.exports = {
       },
       {
         test: /\.(png|svg|jpg|gif|jpeg|ico)$/i,
-        exclude: nodeModulesRegex,
+        exclude: [nodeModulesRegex, paths.iconsPath],
         type: "asset",
         parser: {
           dataUrlCondition: {
@@ -203,6 +203,18 @@ module.exports = {
           filename: "img/[name]_[hash:8].[ext]"
         }
       },
+      {
+        test: /\.svg$/,
+        include: paths.iconsPath,
+        use: [
+          { loader: 'svg-sprite-loader' },
+          {
+            loader: 'svgo-loader', options: {
+              plugins: [{ name: "removeAttrs", params: { attrs: 'fill' } }]
+            }
+          },
+        ],
+      },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         exclude: nodeModulesRegex,