feat: ✨ 封装全局SVG组件

package.json

@@ -56,6 +56,7 @@
         "@babel/runtime-corejs3": "^7.20.13",
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
+        "@types/webpack-env": "^1.18.0",
         "@typescript-eslint/eslint-plugin": "^5.51.0",
         "@typescript-eslint/parser": "^5.51.0",
         "autoprefixer": "^10.4.13",
@@ -95,6 +96,7 @@
         "stylelint-config-standard": "^29.0.0",
         "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
         "stylelint-order": "^6.0.1",
+        "svg-sprite-loader": "^6.0.11",
         "terser-webpack-plugin": "^5.3.6",
         "typescript": "^4.9.4",
         "webpack": "^5.75.0",

src/assets/icons/index.ts

@@ -0,0 +1,7 @@
+const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
+try {
+    importAll(require.context('./svg', true, /\.svg$/));
+} catch (error) {
+    console.log(error);
+}
+export {}; // 默认导出，ts如若不导出，会警告

src/components/SvgIcon/README.md

@@ -0,0 +1,16 @@
+## SvgIcon (Svg 图标)
+
+### 说明
+
+-   svg-sprite-loader 制作 svg-symbol，
+-   直接使用 svg-use。
+-   使用 svgo-loader 优化 svg。
+-   使 Icon 组件化，使用 require.context 一次引入所有文件。
+
+### API
+
+| 属性     | 类型   | 默认值 | 说明                  |
+| -------- | ------ | ------ | --------------------- |
+| svgName  | string | 无     | svg 名字 (svg 文件名) |
+| svgClass | string | 无     | 样式类名              |
+| color    | string | 无     | 填充颜色              |

src/components/SvgIcon/index.less

@@ -0,0 +1,8 @@
+.svg-class {
+    display: inline-block;
+    width: 1em;
+    min-width: 14px;
+    height: 1em;
+    overflow: hidden;
+    font-size: 50px;
+}

src/components/SvgIcon/index.tsx

@@ -0,0 +1,21 @@
+import React, {FC} from 'react';
+import './index.less';
+
+interface SvgIconProps {
+    svgName: string; // svg名字
+    svgClass?: string; // 自定义类名
+    color?: string; // 填充颜色
+}
+
+const SvgIcon: FC<SvgIconProps> = (props) => {
+    const {svgName, color, svgClass} = props;
+    return (
+        <i aria-hidden='true'>
+            <svg className={`svg-class ${svgClass}`}>
+                <use xlinkHref={'#icon-' + svgName} fill={color} />
+            </svg>
+        </i>
+    );
+};
+
+export default SvgIcon;

src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {BrowserRouter} from 'react-router-dom';
+import '@/assets/icons/index';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLDivElement);

src/view/Home/HomeOne/index.less

@@ -9,4 +9,8 @@
     font-size: 50px;
     background: #c6e2ff;
     border-radius: 10px;
+
+    .icon-my {
+        font-size: 100px;
+    }
 }

src/view/Home/HomeOne/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {observer} from 'mobx-react-lite';
 import {useStores} from '@/store';
+import SvgIcon from '@/components/SvgIcon';
 import './index.less';
 
 const HomeOne = () => {
@@ -10,6 +11,9 @@ const HomeOne = () => {
 
     return (
         <div className='home-one-root'>
+            <SvgIcon svgName='my' color='pink' svgClass='icon-my' />
+            <SvgIcon svgName='loop' color='#1db02e' />
+            <SvgIcon svgName='loading' color='#1db02e' />
             HomeOne
             <p>{name}</p>
             <p> globalStore: {count}</p>

webpack/config/webpack.common.js

@@ -113,8 +113,17 @@ const config = {
                 }
             },
             {
-                test: /\.(eot|svg|ttf|woff|woff2?)$/,
+                test: /\.(eot|ttf|woff|woff2?)$/,
+                exclude: paths.appSvg, // 不处理 svg类型文件
                 type: 'asset/resource'
+            },
+            {
+                test: /\.svg$/,
+                loader: 'svg-sprite-loader',
+                include: paths.appSvg,
+                options: {
+                    symbolId: 'icon-[name]' // symbolId和use使用的名称对应 <use xlinkHref={"#icon-" + svgName} />
+                }
             }
         ]
     },

webpack/paths.js

@@ -55,5 +55,6 @@ module.exports = {
     appProxySetup: resolveModule(resolveApp, 'webpack/setProxy'),
     appPackageJson: resolveApp('package.json'),
     appTsConfig: resolveApp('tsconfig.json'),
-    moduleFileExtensions,
+    appSvg: resolveApp('src/assets/icons'),
+    moduleFileExtensions
 };