Commit cdbd3613 authored by Philipp Nowinski's avatar Philipp Nowinski

Merge branch 'encode-bugfix' into 'master'

Duplicated data URI encoding method

Whoops!  
The encoding method (`data:image/svg+xml`) is being added in the `urlEncode` function, so no need to repeat that on the object declaration.

See merge request !3
parents 98461e8c 0894845a
...@@ -4,7 +4,7 @@ ...@@ -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. 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 ## 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 ## 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. 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() { ...@@ -27,7 +27,7 @@ gulp.task('inline-svg', function() {
return gulp.src("images/svgs/**/*.svg") return gulp.src("images/svgs/**/*.svg")
.pipe(svgMin()) .pipe(svgMin())
.pipe(inlineSvg()) .pipe(inlineSvg())
.pipe(gulp.dest("sass")); .pipe(gulp.dest("sass"));
}); });
``` ```
......
...@@ -73,7 +73,7 @@ module.exports = function (_options) { ...@@ -73,7 +73,7 @@ module.exports = function (_options) {
// store this svg data // store this svg data
svgs.push({ svgs.push({
name: path.basename(file.path, '.svg'), name: path.basename(file.path, '.svg'),
inline: 'data:image/svg+xml,' + urlEncode(file.contents), inline: urlEncode(file.contents),
width: parseInt(width) + 'px', width: parseInt(width) + 'px',
height: parseInt(height) + 'px' height: parseInt(height) + 'px'
}); });
......
$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) { @mixin inline-svg($name) {
background: transparent url(nth($name, 1)) no-repeat 50% 50%; background: transparent url(nth($name, 1)) no-repeat 50% 50%;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment