0

I'm migrating an older Gulp workflow to Laravel Mix, and having trouble getting the old cleanup of SVGs working properly.

Current package.json:

{
  "scripts": {
    ...
  },
  "devDependencies": {
    "browser-sync": "^2.27.7",
    "browser-sync-webpack-plugin": "^2.3.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.4.1",
    "cross-env": "^7.0.3",
    "dotenv": "^8.2.0",
    "fontfaceobserver": "^2.1.0",
    "image-webpack-loader": "^8.1.0",
    "laravel-mix": "^6.0.43",
    "laravel-mix-clean": "^0.1.0",
    "normalize.css": "^8.0.1",
    "postcss": "^8.4.7",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.49.9",
    "sass-loader": "^8.0.2",
    "svgo-loader": "^3.0.0",
    "tiny-slider": "^2.9.4",
    "vue-template-compiler": "^2.6.12"
  },
  "browserslist": [
    ...
  ],
  "dependencies": {}
}

I've migrated all of our existing SVGO options (namely the overrides) to svgo.config.js:

module.exports = {
    multipass: true,
    datauri: 'enc',
    js2svg: {
        indent: 4,
        pretty: true,
    },
    plugins: [
        // default plugins
        'preset-default',
        {
            name: 'removeViewBox',
            active: false
        },
        {
            name: 'removeUnknownsAndDefaults',
            params: {
                keepRoleAttr: true
            }
        },
        {
            name: 'prefixIds',
            active: true,
        }
    ],
};

Before attempting any cleanup on SVGs, we are copying them over to the public path first to do all the processing there:

mix
    // Path to public
    .setPublicPath('/web/dist')
    .setResourceRoot('/dist')

    // Copy over all fonts, images, and svgs
    .copy('src/fonts/*', 'web/dist/fonts')
    .copy('src/images/*', 'web/dist/images')
    .copy('src/svgs/*', 'web/dist/svgs')

    // Minify and cleanup SVGs
    .webpackConfig({
        module: {
            rules: [{
                test: /\.svg$/i,
                use: [{
                    loader: 'svgo-loader',
                    options: {
                        configFile: "svgo.config.js"
                    }
                }]
            }]
        }
    })

At this point, it doesn't appear to be triggering SVGO at all as the file is copied as-is with the viewBox and role attributes still in place (default settings have both of these being removed).

I can't seem to find full and complete documentation over how to accomplish this, as other StackOverflow questions or GitHub issues are all incomplete, outdated, or only include a part of the solution (a portion of the code as it is used with Webpack but not Laravel Mix).

I've attempted trying to use Mix Imagemin, ImageminWebpackPlugin directly, and svgo loader in various ways but either issues preventing me from using them at all or the same issue with the SVGs not be processed at all.

Any help would be greatly appreciated!

4

0 回答 0