In some cases generates wrong quote characters in generated js files

[franktopel]

This is what generating my icon with 1.2.6 instead of 1.2.3 suddenly produces (and breaks my build process, obviously):

var icon = require('vue-svgicon')
icon.register({
  'close': {
    width: 19,
    height: 18,
    viewBox: '0 0 19 18',
    data: `<path pid="0" d="M11.951 8.915l5.737-5.737A1.875 1.875 0 1 0 15.036.526L9.3 6.263 3.563.526A1.875 1.875 0 1 0 .911 3.178l5.737 5.737L.911 14.65a1.875 1.875 0 1 0 2.652 2.652L9.3 11.566l5.736 5.737a1.875 1.875 0 1 0 2.652-2.652L11.95 8.915z" fill-rule="evenodd"/>
  }
})

See it generates wrong quotation characters after data: ` which should be either " or '

Pls check, have downgraded to 1.2.3 and the problem is gone.

This is my command to generate the icons:

vsvg -s ./src/img/svg -t ./vue/assets/js/compiled-svg-icons

Here's my svgo.json:

{
  "full": true,
  "multipass": true,
  "plugins": [
    "removeDoctype",
    "removeXMLProcInst",
    "removeComments",
    "removeMetadata",
    "removeEditorsNSData",
    "cleanupAttrs",
    {
      "cleanupIDs": {
        "minify": false
      }
    },
    "removeUselessDefs",
    {
      "cleanupNumericValues": {
        "floatPrecision": 3,
        "leadingZero": true,
        "defaultPx": true,
        "convertToPx": false
      }
    },
    {
      "cleanupListOfValues": {
        "floatPrecision": 2,
        "leadingZero": true,
        "defaultPx": true,
        "convertToPx": false
      }
    },
    {
      "convertColors": {
        "shorthex": true,
        "shortname": false
      }
    },
    {
      "removeUnknownsAndDefaults": {
        "defaultAttrs": false
      }
    },
    "cleanupEnableBackground",
    "removeEmptyText",
    "collapseGroups",
    "removeEmptyAttrs",
    "removeEmptyContainers",
    "removeUnusedNS",
    "removeDesc",
    "convertPathData",
    "mergePaths"
  ],
  "js2svg": {
    "pretty": false,
    "indent": 1
  }
}

This is the svg that fails to generate properly:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="19px" height="18px" viewBox="0 0 19 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46 (44423) - http://www.bohemiancoding.com/sketch -->
    <title>Combined Shape</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="maggi_mobile-290px_overlay-v2b" transform="translate(-256.000000, -746.000000)" fill="#FFFFFF">
            <path d="M267.951272,754.91463 L273.687811,749.17809 C274.420045,748.445857 274.420045,747.258673 273.687811,746.52644 C272.955578,745.794207 271.768394,745.794207 271.036161,746.52644 L271.036161,746.52644 L265.299621,752.26298 L259.563081,746.52644 C258.830848,745.794207 257.643664,745.794207 256.911431,746.52644 C256.179198,747.258673 256.179198,748.445857 256.911431,749.17809 L256.911431,749.17809 L262.647971,754.91463 L256.911431,760.65117 C256.179198,761.383403 256.179198,762.570587 256.911431,763.30282 C257.643664,764.035053 258.830848,764.035053 259.563081,763.30282 L259.563081,763.30282 L265.299621,757.56628 L271.036161,763.30282 C271.768394,764.035053 272.955578,764.035053 273.687811,763.30282 C274.420045,762.570587 274.420045,761.383403 273.687811,760.65117 L273.687811,760.65117 L267.951272,754.91463 Z" id="Combined-Shape"></path>
        </g>
    </g>
</svg>

[Allenice]

@franktopel Hi, It is no problem use the svg which you provide, and I wonder why you use svgo.json? vue-svgicon will use it's own svgo config, will not load any another svgo config. Do you have your own icon template file?

[franktopel]

I am not using a custom icon template.

I am using svgo.json for this gulp task:

gulp.task('svg', () =>
  gulp.src(paths.src.svg + '*.svg')
    .pipe(imagemin([imagemin.svgo(options[env].img.svg)]))
    .pipe(gulp.dest(paths.dest.svg))
)

You are right, this has supposedly nothing to do with the current problem. Fact remains that vsvg -s ./src/img/svg -t ./vue/assets/js/compiled-svg-icons results in the above falty quotation characters in the generated close.js file. And this only happens since V1.2.6, so there must be something wrong in the part of the code that generates the Javascript files from the svg images.

[Allenice]

See it generates wrong quotation characters after data: ` which should be either " or '

`` is es6 template literals, if you not use es6, please use your own icon template

[franktopel]

I am using ES6, but uglify.js seems to be unable in its default configuration to handle this. And babel doesn't seem to translate it either, even though I'm using es2015-ie preset (which should include all transformations required down until IE 9).

[Allenice]

Please check your config is include the generated js file

[franktopel]

Pardon?

The generated js file is quoted in my initial post.

[Allenice]

I close this issue. If you still reproduce this bug, you can reopen it.