From 43431d0e56b7f661ac59471f91cc86085fe34a70 Mon Sep 17 00:00:00 2001 From: Paul Abbott Date: Thu, 28 May 2020 15:45:27 -0400 Subject: [PATCH 1/2] Fix #12 Its not possible to have NO cssPrefix. Also removed invalid and unneeded charset, see https://codepen.io/tigt/post/optimizing-svgs-in-data-uris --- index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/index.js b/index.js index 2f266f8..09a9073 100644 --- a/index.js +++ b/index.js @@ -23,25 +23,25 @@ module.exports = function (options) { options = options || {}; // Init default options - if (!options.fileName) { + if (options.fileName == null) { // == null is true for null and undefined, but not empty string. options.fileName = 'icons'; } - if (!options.cssPrefix) { + if (options.cssPrefix == null) { options.cssPrefix = 'icon-'; } - if (!options.cssSelector) { + if (options.cssSelector == null) { options.cssSelector = '.'; } if (!options.addSize) { options.addSize = false; } - if (!options.defaultWidth) { + if (!options.defaultWidth) { // empty string not allowed options.defaultWidth = '16px'; } - if (!options.defaultHeight) { + if (!options.defaultHeight) { // empty string not allowed options.defaultHeight = '16px'; } - if (!options.fileExt) { + if (options.fileExt == null) { options.fileExt = 'css'; } @@ -61,7 +61,7 @@ module.exports = function (options) { .replace(//gmi, '%3E') // > .replace(/#/gmi, '%23') // # - .replace(/\"/gmi, '\''); // " + .replace(/\"/gmi, '\''); // " (replace double-quotes with single-quotes) } /** @@ -75,7 +75,7 @@ module.exports = function (options) { function buildCssRule(normalizedFileName, encodedSvg, width, height) { var cssRule = []; cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + ' {'); - cssRule.push(' background-image: url("data:image/svg+xml;charset=utf8, ' + encodedSvg + '");'); + cssRule.push(' background-image: url("data:image/svg+xml,' + encodedSvg + '");'); if (options.addSize) { cssRule.push(' width: ' + width + ';'); cssRule.push(' height: ' + height + ';'); From a631119626e1903a854eb658ca15aeb6d8d9ec89 Mon Sep 17 00:00:00 2001 From: Paul Abbott Date: Mon, 21 Sep 2020 18:31:34 -0400 Subject: [PATCH 2/2] Added new option "cssProperty" to set the property name other than background-image (i.e. --img: or mask-image:). Also some minor code-cleanup. --- README.md | 49 ++++++++++++++++++++++++++++++++++++++++++++++--- index.js | 28 ++++++++++++++++++++++++---- 2 files changed, 70 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 715aea5..2088271 100644 --- a/README.md +++ b/README.md @@ -21,15 +21,52 @@ gulp.task('create-css', function () { .src('icons/**/*.svg') .pipe(svgmin()) .pipe(svgcss({ - fileName: 'icons', - cssPrefix: 'icon-', - addSize: false + cssPrefix: '', + cssProperty: '--img' })) .pipe(gulp.dest('dist/')); }); }); ``` +For example, your initial .css file might look like this before processing: +```css +.cssimg { + display: inline-block; + --size: 32px; + width: var(--size); + height: var(--size); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: 0 0; + mask-position: 0 0; + background-color: #9f9697; + -webkit-mask-image: var(--img); + mask-image: var(--img); +} + +.ban { + --img: url(../img/ban.svg); +} + +.bars { + --img: url(../img/bars.svg); +} +``` + +After processing, this is added to the end of the .css file: +```css + +.ban { + --img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='red' d='M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5T1281 1280t116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73T425 619t-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164T189 1193t-61-300 61-299.5T352.5 348t245-164T896 123t298.5 61 245 164T1603 593.5t61 299.5z'/%3E%3C/svg%3E") +} + +.bars { + --img: url("data:image/svg+xml,%3Csvg viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%239f9697' d='M1664 1344v128q0 26-19 45t-45 19H192q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H192q-26 0-45-19t-19-45V832q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19H192q-26 0-45-19t-19-45V320q0-26 19-45t45-19h1408q26 0 45 19t19 45z'/%3E%3C/svg%3E") +} +``` + + ## API ### svgcss(options) @@ -58,6 +95,12 @@ Default value: `.` A selector to use for the CSS prefix. This is particularly useful if you're outputting a SASS partial, and would rather use a `%` placeholder selector. +#### options.cssProperty +Type: `String` +Default value: `background-image` + +The CSS property to write. Typically used background-image: or --img: + #### options.addSize Type: `Boolean` Default value: `false` diff --git a/index.js b/index.js index 09a9073..9c28cb5 100644 --- a/index.js +++ b/index.js @@ -13,13 +13,28 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +// @ts-check 'use strict'; + var gutil = require('gulp-util'); var through = require('through2'); var path = require('path'); var DOMParser = require('xmldom').DOMParser; -module.exports = function (options) { +/** + * @typedef {Object} gulp_svg_css_options + * @property {string=} fileName + * @property {string=} cssPrefix + * @property {string=} cssSelector + * @property {string=} cssProperty + * @property {boolean=} addSize + * @property {string=} defaultWidth + * @property {string=} defaultHeight + * @property {string=} fileExt + * + * @param {?gulp_svg_css_options=} options + */ +function gulp_svg_css(options) { options = options || {}; // Init default options @@ -32,6 +47,9 @@ module.exports = function (options) { if (options.cssSelector == null) { options.cssSelector = '.'; } + if (!options.cssProperty == null) { + options.cssProperty = 'background-image'; + } if (!options.addSize) { options.addSize = false; } @@ -48,7 +66,7 @@ module.exports = function (options) { /** * Returns encoded string of svg file. * @method buildSvgDataURI - * @param {String} data Contents of svg file. + * @param {String} svgContent Contents of svg file. */ function buildSvgDataURI(svgContent) { return svgContent @@ -75,7 +93,7 @@ module.exports = function (options) { function buildCssRule(normalizedFileName, encodedSvg, width, height) { var cssRule = []; cssRule.push(options.cssSelector + options.cssPrefix + normalizedFileName + ' {'); - cssRule.push(' background-image: url("data:image/svg+xml,' + encodedSvg + '");'); + cssRule.push(' ' + options.cssProperty + ': url("data:image/svg+xml,' + encodedSvg + '");'); if (options.addSize) { cssRule.push(' width: ' + width + ';'); cssRule.push(' height: ' + height + ';'); @@ -87,7 +105,7 @@ module.exports = function (options) { /** * Get svg image dimensions. * @method getDimensions - * @param {String} data Contents of svg file. + * @param {String} svgContent Contents of svg file. */ function getDimensions(svgContent) { var doc = new DOMParser().parseFromString(svgContent, 'text/xml'); @@ -148,3 +166,5 @@ module.exports = function (options) { cb(); }); }; + +module.exports = gulp_svg_css; \ No newline at end of file