svg / svgo-loader Goto Github PK

I'm getting the following error:

WARNING in ./src/assets/paw.svg
svg-sprite-loader exception. Some loaders will be applied after svg-sprite-loader in extract mode
 @ ./src/index.ts 2:14-41
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.ts

WARNING in ./src/assets/triangle.svg
svg-sprite-loader exception. Some loaders will be applied after svg-sprite-loader in extract mode
 @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/sss/base.sss 6:5369-5402
 @ ./src/sss/base.sss
 @ ./src/index.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.ts

WARNING in ./src/assets/brown-dog.svg
svg-sprite-loader exception. Some loaders will be applied after svg-sprite-loader in extract mode
 @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/sss/base.sss 6:5434-5468
 @ ./src/sss/base.sss
 @ ./src/index.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.ts

ERROR in ./src/assets/paw.svg
Module build failed: Error: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: e
    at /Users/god/Desktop/s3-lander/node_modules/svgo-loader/index.js:36:14
    at <anonymous>
 @ ./src/index.ts 2:14-41
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.ts

ERROR in ./src/assets/triangle.svg
Module build failed: Error: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: e
    at /Users/god/Desktop/s3-lander/node_modules/svgo-loader/index.js:36:14
    at <anonymous>
 @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/sss/base.sss 6:5369-5402
 @ ./src/sss/base.sss
 @ ./src/index.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.ts

ERROR in ./src/assets/brown-dog.svg
Module build failed: Error: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: e
    at /Users/god/Desktop/s3-lander/node_modules/svgo-loader/index.js:36:14
    at <anonymous>
 @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./src/sss/base.sss 6:5434-5468
 @ ./src/sss/base.sss
 @ ./src/index.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.ts

ERROR in ./src/sss/base.sss
Module build failed: ModuleBuildError: Module build failed: Error: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: m
    at /Users/god/Desktop/s3-lander/node_modules/svgo-loader/index.js:36:14
    at <anonymous>
    at runLoaders (/Users/god/Desktop/s3-lander/node_modules/webpack/lib/NormalModule.js:195:19)
    at /Users/god/Desktop/s3-lander/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/god/Desktop/s3-lander/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/god/Desktop/s3-lander/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/god/Desktop/s3-lander/node_modules/svgo-loader/index.js:36:5
    at <anonymous>
 @ ./src/sss/base.sss
 @ ./src/index.ts
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/index.ts

The triangle.svg file is:

<svg xmlns="http://www.w3.org/2000/svg" width="776" height="78" viewBox="0 0 776 78">
  <polygon fill="#FFF" fill-rule="evenodd" points="721 0 1109 78 333 78" transform="rotate(180 554.5 39)"/>
</svg>

I've ran the following command to test if it's an svgo issue but that runs fine, which suggests that maybe its an issue with this library?

node_modules/svgo/bin/svgo src/assets/triangle.svg -o src/assets/triangle.min.svg [8d23h1m]✭ M ✖

triangle.svg:
Done in 14 ms!
0.196 KiB - 35.3% = 0.127 KiB

Any ideas?

For several projects I use one svgoconfig-file per project for several different types of svgs.
Inside the svgoconfig file I use 'preserve' inside cleanupIDs to preserve some element-IDs to be able to adress them by javascript to animate them. But what ID I'd like to preserve in one svg I'd like to get rid of in another svg file.

To avoid using the same preserved IDs for all svg-files going through svgo with this loader I could create several svgoconfig files. One for each svg-type. But I have lots of settings set and that's a lot of duplicated code that I need to maintain everytime also.

It would be a lot better if the svgo-loader could instead load the external svgo-file with all settings in and append the config of the module itself (as set in the config-object) to those imported settings. That way we could set the cleanupIDs - preserve array in the webpack config file and still keep the major list of general svgo settings in the svgoconfig file.

So the only change the loader should need to be able to do this is loading the external config first and APPEND, rather than overwrite, the 'local' loader-config object to the imported config result.

Would that be possible to build in this very handy loader? Thanks in advance and for the great work.

... or does run svgo every build?

Hello!

I've run into this issue that webpack is ignoring svgo-loader. That is, no optimization rules are applied to the svg file. Just load raw file. What do you think this might be related to?

My config:

module: {
  rules: [
    // ...

    {
      test: /\.(svg)(\?.*)?$/,
      type: 'asset/resource',
      generator: {
        filename: 'img/[name].[hash:8][ext]'
      },
      use: [
        {
          loader: 'svgo-loader',
          options: {
            configFile: false,
            plugins: [
              'preset-default'
            ]
          }
        }
      ]
    },

    // ...
  ]
}

I'm using vue-cli under webpack 5 (around ~5.54.0 version)
svgo-loader: "^3.0.0"

Thanks!

As of [email protected] there's a deprecation warning of parseQuery.

DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

Instead of using "loader-utils": "^0.2.16" it's possible to also include the next major version that includes getOptions and use it if it exists with a fallback to parseQuery.

This will remove the warning generated by loader-utils and will start to phase out webpack 1.x in favor of webpack 2.x as it has become stable enough.

Hi, works great, but how can I pass a --flag option like --pretty
the following code does not prettify

      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: '../images/svg'
            }
          },
          {
            loader: 'svgo-loader',
            options: {
              pretty: true,
              plugins: [{ removeTitle: true }, { convertColors: { shorthex: false } }, { convertPathData: false }]
            }
          }
        ]
      }

Hello! 👋 Just a question, are there plans to support svgo v3.0.0 (https://github.com/svg/svgo/releases/tag/v3.0.0) which was released recently?

Many thanks! 😃

Hi, I just installed your svgo-loader and it looks great, but I can't figure out by the readme if it's possible to load the svgo-config via its yaml file. If there is a way: How can we do that with this loader? If there's not: could you please add an option to load the svgo config from the yaml file?

The reason I'm using yaml files for svgo config is that the config is pretty large and reused over multiple projects. Including all its settings would make the webpack config overly complex to read too. So it would be great if there is a way to load the config, like normal svgo can.
Thanks!

Hi
Because of CVE-2022-37601 vulnerability, could you please help to update the dependency loader-utils to 2.0.3, thanks a lot.

Is there any plan to publish a new release of this package to npm? I would really like to get this commit 5bd5786.

Also why is svgo a dependency and not a peer dependency? It seems I have to wait for svgo-loader to update its svgo dependency if I want to use a newer version of svgo.

After npm installed version 1.2.0 (^1.1.0) we encountered this error: Module build failed: TypeError: Cannot read property 'useConfig' of null at Object.module.exports (.../node_modules/svgo-loader/index.js:13:13) @ ./source/index.js 79:0-29

We fixed this by setting a custom config as shown in the README. If a custom config is now required for the loader to function I think it would be best to add a more specific error message such as "svgo-loader configuration not found.".

This error appears to have been caused by the change in how you're defining the config variable in this commit: 466238b

var config = loaderUtils.getOptions(this);
If don't provide in the loader query string then config is null
Attempt to get variable by key useConfig cause an TypeError.
TypeError: Cannot read property 'useConfig' of nul

what difference between this package and https://github.com/tcoopman/image-webpack-loader?

Hello,

Is SVGO-Loader compatible with Webpack 5?
I got this error when I build my js.

ERROR in ./src/img/icons/viadeo.svg
Module build failed (from ./node_modules/svgo-loader/index.js):
Error: Plugin name should be specified
    at resolvePluginConfig (node_modules/svgo/lib/svgo/config.js:98:13)
    at node_modules/svgo/lib/svgo.js:46:7
    at Array.map (<anonymous>)
    at optimize (node_modules/svgo/lib/svgo.js:45:37)
    at Object.loader (node_modules/svgo-loader/index.js:12:18)
 @ ./src/img/icons/ sync \.svg$ ./viadeo.svg
 @ ./src/js/app.js 14:11-58

Here my loader configuration :

test: /icons\/.*\.svg$/,
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        extract: true,
        publicPath: 'img/icons/',
        spriteFilename: svgPath => `icons${svgPath.substr(-4)}`,
        symbolId: filePath => `icon-${path.basename(filePath).slice(0, -4)}`,
      },
    },
    {
      loader: 'svgo-loader',
    },
  ],

http://stackoverflow.com/q/34480228/247243

I'm trying to enable only one plugin to remove fill/stroke
To do that svgo has fill: true option, so I'm trying to do

{
  loader: 'svgo-loader',
  options: {
    full: true,
    plugins: [
      {removeUselessStrokeAndFill: true},
    ],
  },
},

But then fill and stroke attributes remain. If I remove full: true those attributes are gone, but then other optimizations are applied as well

Instructions include

const { extendDefaultPlugins } = require('svgo');

However, this only works if the svgo version used by svgo-loader is the same as wherever is using svgo-loader and thus, importing extendDefaultPlugins. If not, the default plugins might include new ones that don't exist in the version used in this plugin.

Solution1: switch back to peerDeps

Solution2: re-export svgo things you expect users to use like extendDefaultPlugins so they can use a version consistent with this library.

Hello. Trouble with 2.0.0; 1.2.1 is ok.

Webpack 3.8.1
Config:

{
                        loader: 'svgo-loader',
                        options: {
                            plugins: [
                                {removeTitle: true},
                                {convertColors: {shorthex: false}},
                                {convertPathData: false},
                                {removeUselessDefs: false}
                            ]
                        }
                    }

stacktrace:

       ERROR in ./src/components/rs-logo/rs-logo.svg
        Module build failed: TypeError: callback is not a function
            at optimizeOnceCallback (/Users/f0rmat1k/projects/tststub/node_modules/svgo/lib/svgo.js:44:17)
            at /Users/f0rmat1k/projects/tststub/node_modules/svgo/lib/svgo.js:65:9
            at SAXParser.sax.onend (/Users/f0rmat1k/projects/tststub/node_modules/svgo/lib/svgo/svg2js.js:156:13)
            at emit (/Users/f0rmat1k/projects/tststub/node_modules/sax/lib/sax.js:624:35)
            at end (/Users/f0rmat1k/projects/tststub/node_modules/sax/lib/sax.js:667:5)
            at SAXParser.write (/Users/f0rmat1k/projects/tststub/node_modules/sax/lib/sax.js:975:14)
            at SAXParser.close (/Users/f0rmat1k/projects/tststub/node_modules/sax/lib/sax.js:157:38)
            at module.exports (/Users/f0rmat1k/projects/tststub/node_modules/svgo/lib/svgo/svg2js.js:169:28)
            at module.exports.SVGO._optimizeOnce (/Users/f0rmat1k/projects/tststub/node_modules/svgo/lib/svgo.js:56:5)
            at module.exports.SVGO.optimize (/Users/f0rmat1k/projects/tststub/node_modules/svgo/lib/svgo.js:49:11)
            at Object.module.exports (/Users/f0rmat1k/projects/tststub/node_modules/svgo-loader/index.js:27:8)
         @ ./node_modules/css-loader!./node_modules/postcss-loader/lib?{"plugins":[null,null]}!./src/components/rs-logo/rs-logo.css 6:131-155

I'm getting this error:

Uncaught Error: Module build failed: TypeError: Can't add property config, object is not extensible
    at Object.module.exports (/Users/orkazaz/Developments/Autodesk/BIM360/omri-quality-fork/quality-ui-web/node_modules/svgo/lib/svgo.js:21:17)
    at Object.module.exports (/Users/orkazaz/Developments/Autodesk/BIM360/omri-quality-fork/quality-ui-web/node_modules/svgo/lib/svgo.js:21:17)
    at Object.Accordion.render.__WEBPACK_IMPORTED_MODULE_4_react___default.a.createElement.__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_extends___default.accordion (http://localhost:3001/application-0e88b1e2e0d44eb75e53.js:44667:7)
    at __webpack_require__ (http://localhost:3001/commons-0e88b1e2e0d44eb75e53.js:692:30)

In webpack 2 top level configs are not allowed, so this option is NOT good anymore:

module.exports = {
  ...
  module: {
    loaders: [
      {
        test: /.*\.svg$/,
        loaders: [
          'file-loader',
          'svgo-loader?useConfig=svgoConfig1'
        ]
      }
    ]
  },
  svgoConfig1: {
    plugins: [
      {removeTitle: true},
      {convertColors: {shorthex: false}},
      {convertPathData: false}
    ]
  }
}

I actually used svgo-loader before upgrading to webpack 2.

Some base assumptions for the webpack 2 tries I had:

1. Ignore why I'm using also the raw-loader there.. Kind of something to implement an SVG store.
2. require('./svgo.plugins') returns us:

{
  plugin: [
    { cleanupAttrs: true },
    { removeDoctype: true },
    { removeXMLProcInst: true },
    { removeComments: true },
    { removeMetadata: true },
    { removeTitle: true }, // Changed from default of `false`
    { removeDesc: true },
    { removeUselessDefs: true },
    { removeXMLNS: false },
    { removeEditorsNSData: true },
    { removeEmptyAttrs: true },
    { removeHiddenElems: true },
    { removeEmptyText: true },
    { removeEmptyContainers: true },
    { removeViewBox: false },
    { cleanUpEnableBackground: true },
    { minifyStyles: true },
    { convertStyleToAttrs: true },
    { convertColors: true },
    { convertPathData: true },
    { convertTransform: true },
    { removeUnknownsAndDefaults: true },
    { removeNonInheritableGroupAttrs: true },
    { removeUselessStrokeAndFill: true },
    { removeUnusedNS: true },
    { cleanupIDs: true },
    { cleanupNumericValues: true },
    { cleanupListOfValues: true },
    { moveElemsAttrsToGroup: true },
    { moveGroupAttrsToElems: true },
    { removeRasterImages: false },
    { mergePaths: true },
    { convertShapeToPath: true },
    { sortAttrs: false },
    { transformsWithOnePath: false },
    { removeDimensions: true }, // Changed from default of `false`
    { removeAttrs: false },
    { removeElementsByAttr: false },
    { addClassesToSVGElement: false },
    { addAttributesToSVGElement: false },
    { removeStyleElement: false }
  ]
}

And this is how I tried using it now with webpack 2:

      {
        test: /\.svg$/,
        use: [
          {
            loader: 'raw-loader'
          },
          {
            loader: 'svgo?' + JSON.stringify(require('./svgo.plugins'))
          }
        ]
      },

Also tried this:

      {
        test: /\.svg$/,
        use: [
          {
            loader: 'raw-loader'
          },
          {
            loader: 'svgo',
            options: require('./svgo.plugins')
          }
        ]
      },

Nothing seems to work. Can someone please help out here?

Pls update repo based on new version of svgo https://github.com/svg/svgo/releases/tag/v2.0.0

Problem: as title says.

At line 53 of index.js the loader is not cloning the options/config object before passing it to the svgo module:

var svgo = new Svgo(config);

This is throwing issues when using the loader more than once in webpack as the config object is changed after first use. This is also stated in the official documentation of loader-utils' getOptions(): If you pass it on to another library, make sure to make a deep copy of it

Please note: The returned options object is read-only. It may be re-used across multiple invocations.
If you pass it on to another library, make sure to make a deep copy of it

source: https://algobank.oecd.org:4430/SDG_tracker/SDG_website/tree/eeaf0f7a10d802f3444fa0f9e59af80ac5b3e48d/node_modules/loader-utils/#getoptions

So to fix this issue it's just a matter of adding three dots and two accolades to clone before passing to svgo() (tested here and works fine):

solution

var svgo = new Svgo({ ...config });

Hey all,

While svgo-loader v2.0.0 should use at least svgo v1.0.0, it resolved to v0.7.2. Then, library returns an error while promise are only available from v1.0.0.

Could It comes from the fact that svgo is declared as a peer dependency?
Issue reproduced with both yarn and npm. FYI, loader works properly when svgo is installed manually.

Edit: While a peer dependency should be manually installed (as suggested by npm), documentation should be modified to:

$ npm install svgo svgo-loader --save-dev
$ yarn add svgo svgo-loader -D

ic_vendor_360.svg:1 Uncaught Error: Module build failed (from ../node_modules/svgo-loader/index.js):
Error: Error in parsing SVG: Non-whitespace before first tag.
Line: 0
Column: 1
Char: i
at Object.loader (Users/zhj/Documents/fe-dev/test/node_modules/svgo-loader/index.js:14)
at eval (ic_vendor_360.svg:1)
at Object../modules/holographic-archive/src/icons/svg/brand/ic_vendor_360.svg (index.js:2507)
at webpack_require (index.js:833)
at fn (index.js:130)
at webpackContext (eval at ./modules/test/src/icons/svg sync recursive .svg$ (index.js:2496), :31:9)
at Array.map ()
at requireAll (index.js?fb20:3)
at eval (index.js?fb20:4)
at Module../modules/test/src/icons/index.js (index.js:2485)
at webpack_require (index.js:833)

webpack config

I'm using this loader to optimize the svg images. I want to add some custom configuration based on my requirements, for example I dont want to remove the viewBox from svg as it makes defining the dimensions of svg really hard.

I found the following solutions from internet... but none of them seems to be working, and I always get the viewBox removed from svg (which I'm trying to keep as it is.).

          {
            loader: 'svgo-loader',
            options: {
              plugins: [{
                removeViewBox: false
              }]
            }
        }

          {
            loader: 'svgo-loader',
            options: {
              externalConfig: "svgo-config.yml"
            }
          }

         {
            loader: 'svgo-loader',
            options: {
              configFile: './svgo.config.js'
            }
          }

Content of config.yml file

plugins:
  - removeTitle: false
  - remoViewBox: false

Content of svgo.config.js

const { extendDefaultPlugins } = require('svgo');
module.exports = {
  plugins: extendDefaultPlugins([
    {
      name: 'removeTitle',
      active: false
    },
    {
      name: 'removeViewBox',
      active: false
    },
  ])
};

For the configFile solution, I feel like it's just not picking the given file, because if I will provide the wrong file location (or some file location that doesnt exists) it works exactly same as the default case (my expectation was to have an error smething like ...wrong file supplied).

I've asked this question on Stackoverflow as well

If I upgrade svgo from 3.2.0 to 3.3.0 I get the following error:

Module build failed (from ./node_modules/svgo-loader/index.js):
TypeError: loadConfig is not a function
at Object.loader (/var/www/html/node_modules/svgo-loader/index.js:9:20)
at module.exports (/var/www/html/node_modules/svgo-loader/index.js:17:10)
@ ./src/icons/ sync nonrecursive .svg$/ ./chevron-16.svg
@ ./src/scripts/main.js 3:12-58

if you have svgs with unquoted attributes such as:
xmlns="http://www.w3.org/2000/svg" width=20px height=20px

The error: Error in parsing SVG: Unquoted attribute value is emitted.

I've created a loader to temporary fix this in webpack:
https://www.npmjs.com/package/xml-fix-loader

{
  test: /\.svg$/,
  use: [
    { loader: 'file-loader' },
    { loader: 'svgo-loader' },
    { loader: 'xml-fix-loader' }
  ]
}

Also opened a bug on svgo:
svg/svgo#678

Hi,
I'm realy newbie in webpack and i don't understand how exactly how work svgo-loader :
When is it triggered ?
Is there au way to set the output path whitout chanaguing the entry ?
I want to do something like this $ svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output in my webpack.config.fs

thx for your help.

I want to generate unique ID names, which are prefixed with the SVG filename. I can do it in gulp gulp-svgmin, where it is being done from svgo actually.

gulp.task('default', function () {
    return gulp.src('src/*.svg')
        .pipe(svgmin(function getOptions (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]
            }
        }))
        .pipe(svgstore())
        .pipe(gulp.dest('./dest'));
});

Do we have a similar option in svgo-loader?

This is a question. svgo-loader specifies a development dependency on webpack@^5.74.0, so we assume it supports webpack@5. But we are attempting to use it with webpack@4 and we are seeing some problems. Is this supported? In general, what versions of webpack are supported?

The best way to answer this question would be to add a peerDependencies field to your package.json.

Thank you for your free work!