SASS mixin sprites won't resize.

I’m using the SASS mixin to add sprites as background images and everything seems to work fine (the icons show up and the color works) except I’m not able to resize the images. I’m assuming that the svg’s aren’t being minified so the whitespace isn’t being removed. I have the svgo option set to “true” and even have svgo installed globally. I’m not sure that it’s actually processing the svg’s before emitting the data uri’s in the scss. The plugin version I’m using is “^3.7.1” and the webpack version is “^5.4.0”.

Here’s my webpack config:

const ESLintPlugin = require('eslint-webpack-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const postcssPresetEnv = require('postcss-preset-env');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PostCSSAssetsPlugin = require('postcss-assets-webpack-plugin');
const mqpacker = require('mqpacker');
const sassExportData = require('@theme-tools/sass-export-data');
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
const { ProgressPlugin, ProvidePlugin } = require('webpack');
const paths = require('./paths');

module.exports = {
  entry: {
    public: [`${paths.src}/index.js`],
  },
  output: {
    path: paths.build,
    filename: 'js/[name].bundle.js',
    publicPath: '/wp-content/themes/public/dist/wp/',
  },
  module: {
    rules: [
      // JavaScript
      {
        test: /\.js$/,
        exclude: [
          /(node_modules|vendor|wp-admin|wp-includes|plugins|twentyfifteen|twentysixteen|twentyseventeen|twentynineteen|libs|bundle|dist)/,
        ],
        use: {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [
              ['@babel/preset-env', { modules: false }],
              '@babel/preset-react',
            ],
          },
        },
      },
      // Images
      {
        test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
        exclude: [/(fonts|svg\/svg)/, '/node_modules/@fortawesome/'],
        type: 'asset/resource',
        generator: {
          filename: 'img/[name][ext][query]',
        },
      },
      // Fonts
      {
        test: /\.(woff(2)?|eot|ttf|otf|svg?)(\?[a-z0-9]+)?$/,
        exclude: [/(img|svg\/svg)/],
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext][query]',
        },
      },
      // CSS, PostCSS, and Sass
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              postcssOptions: {
                ident: 'postcss',
                plugins: [
                  postcssPresetEnv(),
                  autoprefixer({ overrideBrowserslist: 'last 2 version' }),
                  cssnano(),
                ],
              },
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              sourceMap: true,
              keepQuery: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                // Used to generate JSON about variables like colors, fonts
                // Used for patternlab demo data
                functions: sassExportData({
                  name: 'export_data',
                  path: `${paths.plsrc}/_data/`,
                }),
                // Enable Sass to import other components via, eg:
                // `@import 01-atoms/thing/thing`
                includePaths: `${paths.plsrc}/_patterns/`,
              },
              // ALL Sass partials should be provided with non-printing
              // variables, mixins, and functions
              additionalData: '@import "00-protons/variables";',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // Show build progress
    new ProgressPlugin({ profile: false }),
    // Provide "global" vars mapped to an actual dependency.
    // Allows e.g. jQuery plugins to assume that `window.jquery` is available
    new ProvidePlugin({
      // Bootstrap is dependant on jQuery and Popper
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'],
    }),
    // Lint Javascript
    new ESLintPlugin(),
    // Lint Styles
    new StylelintPlugin(),
    // Extract CSS into separate files
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: '[id].css',
    }),
    // Manage postcss assets
    // @link https://css-tricks.com/images-in-postcss/
    new PostCSSAssetsPlugin({
      test: /\.css$/,
      log: true,
      plugins: [
        // Pack same CSS media query rules into one media query rule
        mqpacker,
      ],
    }),
    // Generate SVG Spritemap
    new SVGSpritemapPlugin(`${paths.svg}/svg/*.svg`, {
      styles: {
        filename: `${paths.svg}/generated/_icons-generated.scss`,
        variables: {
          sizes: 'svgicon-sizes', // Prevent collision with Bootstrap $sizes
          variables: 'svgicon-variables',
        },
      },
      output: {
        filename: 'spritemap.svg',
        svg4everybody: true,
        svgo: true,
      },
    }),
  ],
};

Here’s an example of an svg I’m using:

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="27"> <path var:color.fill="#000" fill-rule="evenodd" d="M27.987 4.122L17.849 14.126l8.73 8.616-4.046 3.993-8.731-8.616-8.985 8.868-4.164-4.109 8.986-8.867-9.626-9.5L4.059.517l9.627 9.5L23.823.013l4.164 4.109z"/> </svg>

And here’s a codepen example of what’s generated by the plugin vs the same svg minified or base64 encoded. Is there a way to ensure that the svg is optimized or base64 encoded before the data uri is generated? Maybe there’s a setting or something I’m missing?

[pdrittenhouse]

I tried disabling svgo and also tried passing in an options object to explicitly disable removeDimensions and neither worked. I’ve set up a repo here that reproduces the issue.

[heyflo]

I’m glad I’ve found this issue, I was scratching my head with this and noticed on my fresh install I was using the 3.9.1 while on my last project it was the 3.5.7. Thanks for the fix, going to update this on my projects 👍