M
M
Max Byers2015-08-24 18:33:13
Node.js
Max Byers, 2015-08-24 18:33:13

Why does gulp-svg-sprite add a prefix to class names?

The gulp-svg-sprite plugin adds a prefix to class names:

  • aclassname1
  • bclassname2
  • cclassname3

instead of:
  • classname1
  • classname2
  • classname3

How to turn it off?
UPD: Config:
var svgSpriteConf = {
    dest: '.'
  , selector: ''
  , shape: {
    id: {
      separator: ''                  // Separator for directory name traversal
    }
  , transform: [
      {svgo: svgminConf}
    ]
  }
  , svg: {                             // General options for created SVG files
    xmlDeclaration: false,                     // Add XML declaration to SVG sprite
    doctypeDeclaration: false,                     // Add DOCTYPE declaration to SVG sprite
    namespaceIDs: false,                     // Add namespace token to all IDs in SVG shapes
    dimensionAttributes: false                      // Width and height attributes on the sprite
  }
  , mode: {
    symbol: {
        dest: '.'
      , sprite: 'symbol.svg'
      , prefix: ''
      , dimensions: '.'
      , bust: false
      //, render: {styl: true}
    }
  }
};

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
Nikolai Egorov, 2021-05-14
@nickicool

The question has been around for a long time, but there is no answer. I myself encountered this ... It is solved by adding a line to the config . For example:svg: { namespaceClassnames: false }

.pipe(svgSprite({
                svg: {
                    namespaceClassnames: false
                },
                shape: {
                    id: { // SVG shape ID related options
                        separator: '__', // Separator for directory name traversal
                    },
                },
                mode: {
                    symbol: {
                        dest: '', // Mode specific output directory
                        sprite: 'symbol.svg', // Sprite path and name
                    }
                },
                transform: [
                    {
                        svgo: {
                            js2svg: { pretty: true },
                        }
                    }
                ]
            }))

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question