基于Webpack的SVG嵌入与优化方案

⚠️ 项目停更声明

svg-inline-loader 项目已停止维护,不再推荐使用。

推荐方案:

使用 raw-loader 将SVG作为字符串加载,结合 image-minimizer-webpack-plugin 进行优化。

// webpack.config.js
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /.svg$/,
        use: [{ loader: "raw-loader" }],
      },
    ],
  },
  plugins: [
    new ImageMinimizerPlugin({
      // ...配置选项
    }),
  ],
};
zip
svg-inline-loader-master.zip 预估大小:20个文件
folder
svg-inline-loader-master 文件夹
file
config.js 276B
folder
lib 文件夹
file
component.jsx 1KB
file
transformer.js 7KB
file
conditions.js 1KB
file
.npmignore 21B
file
LICENSE 1KB
file
README.md 6KB
folder
tests 文件夹
file
svg-inline-loader.test.js 7KB
folder
fixtures 文件夹
file
style-inserted.svg 863B
file
xml-rect.svg 168B
file
with-ids.svg 259B
file
removing-attrs-to-be-removed.json 11B
file
removing-tags-to-be-removed.json 1KB
file
removing-tags.svg 3KB
file
removing-tags-to-be-remain.json 1KB
file
.gitignore 47B
file
index.js 3KB
file
karma.conf.js 1KB
file
CHANGELOG.md 2KB
file
package.json 1KB
zip 文件大小:16.6KB