New option cssProperty name

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`

index.js

@@ -13,42 +13,60 @@
  * 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
-    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.cssProperty == null) {
+        options.cssProperty = 'background-image';
+    }
     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';
     }
 
     /**
      * 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
@@ -61,7 +79,7 @@ module.exports = function (options) {
             .replace(/</gmi, '%3C') // <
             .replace(/>/gmi, '%3E') // >
             .replace(/#/gmi, '%23') // #
-            .replace(/\"/gmi, '\''); // "
+            .replace(/\"/gmi, '\''); // " (replace double-quotes with single-quotes)
     }
 
     /**
@@ -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;charset=utf8, ' + 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;