feat(sprites): improve sprites and add symbol sprite

.gitignore

@@ -37,6 +37,7 @@ bower_components
 # Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
 build/
+sprites/
 
 # Dependency directories
 node_modules/

README.md

@@ -83,20 +83,57 @@ const App = () => <img src={github.module} alt="github logo" />;
 
 #### With SVG sprites
 
+##### CSS Sprite Map
+
 The package includes an SVG sprite that bundles all icons into a single file. Alongside this sprite, we include CSS, Sass, and Less files that associate each icon in the sprite with a CSS class. To consume the icons in this way, you must include one of the aforementioned style files in your project.
 
 For instance, with Sass, in your main Sass file import:
 
 ```scss
-@import "~@igniteui/material-icons-extended/build/styles/sprite";
+@import "~@igniteui/material-icons-extended/sprites/styles/sprite";
+
+.imx-icon {
+  width: 24px;
+  height: 24px;
+  background-size: auto 100%;
+}
 ```
 
 Then in your HTML file:
 
 ```html
-<i class="imx-social-media__github"></i>
+<i class="imx-icon imx-github"></i>
+```
+
+We also include a Less and Sass mixin called `igx-icon`. This mixins includes the `background-image` and `background-position`.
+
+##### Symbols
+
+The package also includes an SVG sprite with all icons listed as `<symbol>` elements. This sprite can be imported from `@igniteui/material-icons-extended/sprites/symbol/svg/sprite.symbol.svg`;
+Once you add the image to your application, you can use the encapsulated symbols like this:
+
+In your HTML:
+
+```html
+<svg class="imx-github">
+  <use xlink:href="svg/sprite.symbol.svg#github"></use>
+</svg>
+```
+
+In your CSS:
+
+```css
+.imx-github {
+  width: 24px;
+  height: 24px;
+  fill: royalblue;
+}
 ```
 
+#### Standalone SVG images:
+
+All SVG icons can be found in `@igniteui/material-icons-extended/svgs`;
+
 ### Requests
 
 Feel free to use the issue tracker to request new icons.

gulpfile.js

@@ -1,32 +1,44 @@
 const { series, src, dest } = require("gulp");
 const svgSprite = require("gulp-svg-sprite");
+const svgmin = require("gulp-svgmin");
 const rimraf = require("rimraf");
 
-// More complex configuration example
 const spritesConfig = {
+  dest: "test",
   shape: {
     id: {
       separator: "__",
       whitespace: "-",
     },
     dimension: {
-      // Set maximum dimensions
-      maxWidth: 24,
-      maxHeight: 24,
+      maxWidth: 512,
+      maxHeight: 512,
     },
     spacing: {
-      // Add padding
       padding: 0,
       box: "icon",
     },
-    dest: "../svgs", // Keep the intermediate files
+    transform: [
+      {
+        svgo: {
+          plugins: [{ removeViewBox: false }, { removeDimensions: true }],
+        },
+      },
+    ],
+    dest: "../svgs",
+  },
+  svg: {
+    xmlDeclaration: false,
   },
   mode: {
-    view: {
+    css: {
       bust: true,
       prefix: ".imx-%s",
       example: true,
-      dimensions: true,
+      dimensions: false,
+      layout: "horizontal",
+      common: "imx-icon",
+      mixin: "imx-icon",
       render: {
         css: true,
         less: true,
@@ -36,24 +48,49 @@ const spritesConfig = {
       },
       dest: "styles",
     },
-    symbol: false, // Activate the «symbol» mode
+    symbol: {
+      example: true,
+      dimensions: true,
+      dest: "symbol",
+    },
   },
 };
 
 function cleanBuild(cb) {
-  return rimraf('./build', {}, cb);
+  return rimraf("./build", {}, cb);
 }
 
 function cleanSvgs(cb) {
-  return rimraf('./svgs', {}, cb);
+  return rimraf("./svgs", {}, cb);
+}
+
+function cleanSprites(cb) {
+  return rimraf("./sprites", {}, cb);
 }
 
-const clean = series(cleanSvgs, cleanBuild);
+const clean = series(cleanSvgs, cleanBuild, cleanSprites);
 
 function buildSvg() {
   return src("**/*.svg", { cwd: "src/svgs" })
     .pipe(svgSprite(spritesConfig))
-    .pipe(dest("build"));
+    .pipe(dest("sprites"));
+}
+
+function optimizeSvgs() {
+  return src("svgs/*.svg")
+    .pipe(
+      svgmin({
+        plugins: [
+          {
+            removeViewBox: false,
+          },
+          {
+            removeDimensions: true,
+          },
+        ],
+      })
+    )
+    .pipe(dest("svgs"));
 }
 
-exports.build = series(clean, buildSvg);
+exports.build = series(clean, buildSvg, optimizeSvgs);