update

Author: mezhanglei

package-lock.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",

package.json

@@ -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.less

@@ -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/components/svg-icon/index.tsx

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

src/icons/index.js

@@ -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/icons/svg/wenhao.svg

@@ -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;
 }
 
 // 根据路径获取目标对象中的单个值或多个值