feat: 优雅使用svg图标

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位

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"
-}
+}

src/components/SvgIcon/index.less

@@ -0,0 +1,4 @@
+.svg-icon {
+  width: 30px;
+  height: 30px;
+}

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 (
+    <svg className={styles['svg-icon']} style={{ width: width, height: height }}>
+      <use xlinkHref={'#' + name}></use>
+    </svg>
+  )
+}
+
+export default SvgIcon

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)