H
H
HelpSophie2020-04-15 22:42:50
Layout
HelpSophie, 2020-04-15 22:42:50

How to format svg sprite?

Building an svg sprite using gulp-svg-sprite. In stack mode, if that matters.
At the output, I get a minified svg, i.e. in one line.
Is there any configuration option so that the code as a result is formatted with the usual "ladder" by nesting tags? Ideally with a blank line between sprite elements.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
X
xdevelx, 2020-04-15
@HelpSophie

If you disable svgo, then

const configSVG = {
  transform: [],
  mode: {
    stack: true // Create a «stack» sprite
  }
};

If you configure svgo, then
const configSVG = {
  transform: [{svgo: {
    js2svg: {pretty: true}, // Отключаем минификацию svg.
    plugins: [
      {cleanupListOfValues: {floatPrecision: 0}},
      {inlineStyles: {onlyMatchedOnce: false}},
      {removeAttrs: {attrs: ['stroke', 'data-name']}},
      {removeAttributesBySelector: {selector: ':not([fill="none"])', attributes: ['fill']}}
    ]
  }}],
  mode: {
    stack: true // Create a «stack» sprite
  }
};

According to svgo config https://github.com/svg/svgo#what-it-can-do

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question