diff --git a/README.md b/README.md index 5668698c4b57f978d47ece0342be1fc4a9fdc554..fa895bf97d6e01e533d735e99c59e80d0cf647f3 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ This plugin takes a couple of SVG files and provides them inside a Sass mixin as inlined background-images. By doing so, you can use them without having to touch your markup. ## Compatibility -The inlined SVG gets URL encoded, so it is save to use starting with IE9. +The inlined SVG gets URL encoded, so it's safe to use starting with IE9. ## Important notes The generated mixin contains width and height values for each SVG. Those values are taken from the width and height attribute inside the SVG. If it does not provide them, they will be set to 0px. You can still overwrite them in your CSS. @@ -27,7 +27,7 @@ gulp.task('inline-svg', function() { return gulp.src("images/svgs/**/*.svg") .pipe(svgMin()) .pipe(inlineSvg()) - .pipe(gulp.dest("sass")); + .pipe(gulp.dest("sass")); }); ``` diff --git a/index.js b/index.js index a2bdc41723a9a9a8702f7ee8930b06aa8252ff09..edeb55d0609a72c16db1b8c82437b61f6c348f06 100644 --- a/index.js +++ b/index.js @@ -73,7 +73,7 @@ module.exports = function (_options) { // store this svg data svgs.push({ name: path.basename(file.path, '.svg'), - inline: 'data:image/svg+xml,' + urlEncode(file.contents), + inline: urlEncode(file.contents), width: parseInt(width) + 'px', height: parseInt(height) + 'px' }); diff --git a/test/expected/test.scss b/test/expected/test.scss index e9b88a836314fab90f1896ee6823276d2c1cba37..95178bf5d9bd261719701e6c44fb691468807752 100644 --- a/test/expected/test.scss +++ b/test/expected/test.scss @@ -1,4 +1,4 @@ -$test: "data:image/svg+xml,data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350.471' height='350.471'%3E%3Cg stroke='%230091d4' stroke-width='1.9'%3E%3Cpath d='M.95.95h234.286v225.714H.95z'/%3E%3Cpath d='M349.52 236.664c0 62.33-50.526 112.857-112.856 112.857-62.33 0-112.857-50.526-112.857-112.856 0-62.33 50.528-112.857 112.857-112.857 62.33 0 112.857 50.528 112.857 112.857z'/%3E%3C/g%3E%3C/svg%3E" 350px 350px; +$test: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='350.471' height='350.471'%3E%3Cg stroke='%230091d4' stroke-width='1.9'%3E%3Cpath d='M.95.95h234.286v225.714H.95z'/%3E%3Cpath d='M349.52 236.664c0 62.33-50.526 112.857-112.856 112.857-62.33 0-112.857-50.526-112.857-112.856 0-62.33 50.528-112.857 112.857-112.857 62.33 0 112.857 50.528 112.857 112.857z'/%3E%3C/g%3E%3C/svg%3E" 350px 350px; @mixin inline-svg($name) { background: transparent url(nth($name, 1)) no-repeat 50% 50%;