安装 svg-sprite-loader、svgo-sprite-loader

yarn add --dev svg-sprite-loader
yarn add --dev svgo-sprite-loader  // svg 优化 loader

VUE

配置 svg、svgo

• vue.config.js ```javascript const path = require(‘path’)

module.exports = { ‘chainWebpack’: config => { const dir = path.resolve(__dirname, ‘src/assets/icons’) // 文件目录 config.module .rule(‘svg-sprite’) .test(/.svg$/) .include.add(dir).end() // 包含 icons 目录

//svg-loader
.use(‘svg-sprite-loader’).loader(‘svg-sprite-loader’).options({extract: false}).end()

// svgo-loader .use(‘svgo-loader’).loader(‘svgo-loader’) .tap(options => ({…options, plugins: [ {removeAttrs: {attrs: ‘fill’}} ]})).end()
// 去除颜色 config.plugin(‘svg-sprite’).use(require(‘svg-sprite-loader/plugin’), [{plainSprite: true}]) config.module.rule(‘svg’).exclude.add(dir) // 其他 svg loader 排除 icons 目录 }, }

<a name="4e3wL"></a>
### 使用
```javascript
import 'icons/xxx.svg' | require('icons/xxx/svg')   
<svg>
   <use :xlink:href="#xxx"/>
</svg>

react

配置 svg、svgo

• webpack.config.js ```javascript yarn eject

module: { rules: [ { test: /.svg$/, use: [ //svg { loader: ‘svg-sprite-loader’, options: {} }, //svgo { loader: ‘svgo—loader’, plugins: [ {removeAttrs: {attrs: ‘fill’}} ] } ] } ] }

<a name="PEAOW"></a>
### 使用
- 避免 treeShaking 使用 require，不使用 import
```javascript
require('icons/xxx.svg')   
<svg >
   <use xlinkHref="xxx"></use>   // xxx icon 名
</svg>

导入文件夹

vue

let importAll = (requireContext: __WebpackModuleApi.RequireContext) => 
    requireContext.keys().forEach(requireContext)
;
try {importAll(require.context('xxxx', true, /\.svg$/));}   // xxxx 目标文件夹
catch (error) {console.log(error);}

react

• 多一步 yarn add --dev @types/webpack-env@1.15.1