feat: addd svg rules use svgo-loader

[xiaohuoni]

原本就支持 svg，使用 svgo 产物会更小。

使用 svgr 将 svg 资源直接变成可用的 react 组件

examples/bundler-webpack-demo

import React from 'react';
import ReactDOM from 'react-dom';
// @ts-ignore
import smileUrl, { ReactComponent as SmileSvg } from './smile.svg';

function App() {
  return <div>App<SmileSvg /><img src={smileUrl} /></div>;
}

// @ts-ignore
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

[sorrycc]

svgr 感觉不对，在 https://github.com/umijs/umi-next/tree/master/examples/bundler-webpack-demo 里试试看能不能渲染出 svg。

[sorrycc]

同时还要确认 svg 在 css 中使用是否正常。

[sorrycc]

ref: https://github.com/gregberge/svgr/tree/main/packages/webpack

[xiaohuoni]

是有问题，我修一下

[xiaohuoni]

遗留问题：生成的文件和大小都是正确的，但是引入组件的时候，是错误的

wait  - compiling...
event - compiled successfully
assets by status 427 KiB [cached] 3 assets
cached modules 359 KiB (javascript) 3.21 KiB (asset) 18 bytes (remote) 18 bytes (share-init) 39.5 KiB (runtime) [cached] 29 modules

WARNING in ./index.tsx 14:12-20
Can't import the named export 'ReactComponent' (imported as 'SvgSmile') from default-exporting module (only default export is available)

WARNING in ./index.tsx 18:35-43
Can't import the named export 'ReactComponent' (imported as 'SvgSmile') from default-exporting module (only default export is available)

webpack 5.51.1 compiled with 2 warnings in 23 ms

根据 Using svgr with webpack 5 上面的方法，并不能解决。还要再修复一下。

FIXED

.type('javascript/auto') https://webpack.docschina.org/configuration/module/#ruletype