Svgo: Support external plugins

[alex3165]

I have used svgo on a nodejs project and I couldn't find a way to define a plugin from outside of svgo module so I had to fork the library to add my own plugins. Am I missing something or is svgo plugins designed this way on purpose?

[GreLI]

You're right, currently, there is no design to connect external plugin. How do you think such an API would look like?

[alex3165]

Hum, maybe the less disruptive approach would be to have something like this:

const svgo = new SVGO({
    definePlugins: [
        renameAttrsToCamelCase: {
          type: "perItem",
          active: true,
          description: 'Convert attributes names to camelCase',
          params: {},
          fn: (item, params) => {
            // Blabla my logic here 
          }
        }
    ],
    usePlugins: [
        'removeComments',
        'removeMetadata'
    ]
});

I can work on a PR if you are happy with that.

[GreLI]

Speaking of this, if I reading lib/svgo/config.js correctly, you can pass plugins as functions with config like this. (Haven't tried it really.)

{
    plugins: [
        {
            myPlugin: {
                name: 'myPlugin',
                params: {},
                fn: function(data) { /*...*/ }
            }
        }
    ]
}

My question was related to passing plugins as files.

[strarsis]

It may be a nice solution to use liftoff as base for plugin loading.

[Enchiridion]

@GreLI I was able to get an external plugin to work using your example as a start, it's just missing the type property. I needed a custom plugin to remove the ID attr from the svg element. Here's my working config with custom and built-in plugins mixed together:

{
  plugins : [
    {
      removeSvgId : {
        type        : 'perItem',
        name        : 'removeSvgId',
        description : 'Removes the ID attr from the <svg> element',
        fn          : function(item) {
          if (item.isElem('svg')) {
            item.removeAttr('id');
          }
        }
      }
    },
    {sortAttrs   : true},
    {removeTitle : false},
  ],
}

I don't think any other plugin loading system is needed, this way works perfectly, it just needs to be documented.

[tiptronic]

@Enchiridion Thanks for pointing that out. However, if I copy/paste your code (or create a even more simpler/empty plugin) in a config.js file, I am getting:

YAMLException: missed comma between flow collection entries at line 8, column 38: ... fn : function(item) {

Any idea?
btw. I am on a Mac (10.14.4)