scriptex / svg-symbol-sprite

A script to generate a symbol sprite from SVG files
https://atanas.info/portfolio/open-source/svg-symbol-sprite
MIT License
17 stars 2 forks source link

SVGO - Are plugins actually working? #53

Closed irv-armenta-g closed 5 months ago

irv-armenta-g commented 5 months ago

Hello, I am wondering if I'm doing something incorrect

I'm using the cli with this command:

$ svg-symbol-sprite  -i ./src/components/Icon/icons-library -o ./public/svg-symbols.svg --config svgo.config.js

where config is a custom file I have created in the root of the project (same level as package.json)

this is my config file:

const myPlugin = {
  name: 'makeEverythingPink',
  description: 'Change all fill attribute values to pink.',
  fn: () => {
    return {
      element: {
        enter: (node, parentNode) => {
          if (node.attributes.fill === null) {
            return;
          }

          node.attributes.fill = 'pink';
        }
      }
    };
  }
};

module.exports = {
  plugins: [
    'cleanupAttrs',
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeUselessDefs',
    'removeEditorsNSData',
    'removeEmptyAttrs',
    'removeEmptyText',
    'removeEmptyContainers',
    'cleanupEnableBackground',
    'convertStyleToAttrs',
    'removeUselessStrokeAndFill',
    'removeDimensions',
    'cleanupIds',
    {
      name: 'removeViewBox',
      enabled: false
    },
    {
      name: 'prefixIds',
      params: {
        prefix: {
          toString() {
            this.counter = this.counter || 0;

            return `svgo-viewbox-id-${this.counter++}`;
          }
        }
      }
    },
    myPlugin
  ]
};

myPlugin is an example located in svgo website, but it seems is not really working at all, I keep getting the same fill value as is declared in the original <svg /> file.

I have checked the console log for both enter: and exit: of the function, it seems to actually change the fill: 'pink' like this, but the generated svg symbols still have the original fill.

Am I doing something wrong? I am not completely sure if this is an svgo issue or a svg-symbol-sprite issue though.

scriptex commented 5 months ago

Thanks for reporting this, @irv-armenta-g, it has been fixed in the latest version. You can download it from Github or NPM