Change build process to Vite (#69)

* refactor(*): migrate from webpack + gulp to vite

.github/workflows/nodejs.yml

@@ -1,23 +1,23 @@
-# This workflow will do a clean install of node dependencies and build the package 
+# This workflow will do a clean install of node dependencies and build the package
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
 name: Node.js CI
 
 on:
   push:
-    branches: [ master, '[0-9]+.[0-9]+.x' ]
+    branches: [master, '[0-9]+.[0-9]+.x']
   pull_request:
-    branches: [ master, '[0-9]+.[0-9]+.x' ]
+    branches: [master, '[0-9]+.[0-9]+.x']
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      
+        uses: actions/checkout@v3
+
       - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
 
       - name: Install packages
         run: npm ci

.github/workflows/npm-publish.yml

@@ -8,10 +8,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 18
           cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
 
@@ -26,15 +26,15 @@ jobs:
 
       - name: Define NPM tag
         run: |
-            if [[ ${VERSION} == *"alpha"* || ${VERSION} == *"beta"* || ${VERSION} == *"rc"* ]]; then echo "NPM_TAG=next"; else echo "NPM_TAG=latest"; fi >> $GITHUB_ENV
-            echo ${NPM_TAG}
+          if [[ ${VERSION} == *"alpha"* || ${VERSION} == *"beta"* || ${VERSION} == *"rc"* ]]; then echo "NPM_TAG=next"; else echo "NPM_TAG=latest"; fi >> $GITHUB_ENV
+          echo ${NPM_TAG}
 
       - name: Create package version
         run: npm version ${VERSION} --no-git-tag-version --save --allow-same-version
-        working-directory: ./
+        working-directory: dist
 
       - name: Publish material-icons-extended
         run: npm publish --tag ${NPM_TAG}
-        working-directory: ./
+        working-directory: dist
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -15,6 +15,9 @@ pids
 *.seed
 *.pid.lock
 
+# Build artefacts
+.tmp
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
@@ -84,6 +87,7 @@ out
 # Next.js build / generate output
 .nuxt
 dist
+!vite-plugins/svg-spritemap/dist
 
 # Gatsby files
 .cache/

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "arrowParens": "always"
+}

README.md

@@ -1,4 +1,5 @@
-## Material Icons Extended by Infragistics  
+## Material Icons Extended by Infragistics
+
 [![npm version](https://badge.fury.io/js/%40igniteui%2Fmaterial-icons-extended.svg)](https://badge.fury.io/js/%40igniteui%2Fmaterial-icons-extended)
 
 This is an unofficial subset of icons that extends the official [Material Design Icon set](https://github.com/google/material-design-icons) provided by Google.
@@ -36,16 +37,16 @@ npm install @igniteui/material-icons-extended
 In your component:
 
 ```typescript
-import { Component, OnInit } from "@angular/core";
-import { IgxIconService } from "igniteui-angular";
-import { github } from "@igniteui/material-icons-extended";
+import { Component, OnInit } from '@angular/core';
+import { IgxIconService } from 'igniteui-angular';
+import { github } from '@igniteui/material-icons-extended';
 // ...
 export class SampleComponent implements OnInit {
   constructor(private iconService: IgxIconService) {}
 
   ngOnInit(): void {
     // Register a single icon
-    this.iconService.addSvgIconFromText(github.name, github.value, "imx-icons");
+    this.iconService.addSvgIconFromText(github.name, github.value, 'imx-icons');
   }
 }
 ```
@@ -54,13 +55,13 @@ Or to register multiple icons/categories:
 
 ```typescript
 //...
-import { github, health, programming } from "@igniteui/material-icons-extended";
+import { github, health, programming } from '@igniteui/material-icons-extended';
 
 export class SampleComponent implements OnInit {
   //...
   addIcons() {
     for (let icon of [...health, ...programming, github]) {
-      this.iconService.addSvgIconFromText(icon.name, icon.value, "imx-icons");
+      this.iconService.addSvgIconFromText(icon.name, icon.value, 'imx-icons');
     }
   }
 
@@ -70,7 +71,7 @@ export class SampleComponent implements OnInit {
 }
 ```
 
-In yout component template:
+In your component template:
 
 ```html
 <igx-icon fontSet="imx-icons" name="github"></igx-icon>
@@ -85,66 +86,98 @@ npm install svg-inline-react
 ```
 
 ```javascript
-import InlineSVG from "svg-inline-react";
-import { github } from "@igniteui/material-icons-extended";
+import InlineSVG from 'svg-inline-react';
+import { github } from '@igniteui/material-icons-extended';
 
 const App = () => (
-  <InlineSVG src={github.value} style={{ width: "24px", height: "24px" }} />
+  <InlineSVG src={github.value} style={{ width: '24px', height: '24px' }} />
 );
 ```
 
 #### With SVG sprites
 
-##### CSS Sprite Map
+##### CSS Sprite Maps
+
+We include CSS that associate each icon with a CSS class. This file can be quite large and you may not use all icons included in it. If you want to cherry-pick only the icons that will ever be used in your project, we include Sass, Less, and Stylus mixins that allow you to only add one icon at a time to the compiled CSS.
+
+To use the CSS classes, import the main the CSS sprite file in your app (verify the path to the stylesheet based on your project structure):
+
+```html
+<link
+  href="../node_modules/@igniteui/material-icons-extended/styles/sprite.css"
+  rel="stylesheet"
+/>
+```
+
+Then you can simply use any of the icons in the following manner:
+
+Include the GitHub icon.
+
+```html
+<i class="imx-icon imx-github"></i>
+```
 
-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.
+To take advantage of the included mixins, import the corresponding sprite.(scss|less|styl) file.
 
-For instance, with Sass, in your main Sass file import:
+With Sass, in your main Sass file import:
 
 ```scss
-@import "~@igniteui/material-icons-extended/sprites/styles/sprite";
+@use '@igniteui/material-icons-extended/styles/sprite.scss' as *;
 
-.imx-icon {
-  width: 24px;
-  height: 24px;
-  background-size: auto 100%;
+.github-icon {
+  @include imx-icon('github');
 }
 ```
 
-Then in your HTML file:
+With Less:
 
-```html
-<i class="imx-icon imx-github"></i>
+```less
+@import '@igniteui/material-icons-extended/styles/sprite.less';
+
+.github-icon {
+  .imx-icon('github');
+}
 ```
 
-We also include a Less and Sass mixin called `igx-icon`. This mixins includes the `background-image` and `background-position`.
+With Stylus:
+
+```stylus
+@import '@igniteui/material-icons-extended/styles/sprite.styl'
+
+.github-icon
+    imx-icon('github')
+```
+
+Then in an HTML file:
+
+```html
+<i class="github-icon"></i>
+```
 
-##### Symbols
+#### 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`;
+The package also includes an SVG sprite with all icons listed as `<symbol>` elements. This sprite can be imported from `@igniteui/material-icons-extended/assets/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>
+  <use xlink:href="sprite.symbol.svg#imx-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/src/svgs`;
+All SVG icons can be found in `@igniteui/material-icons-extended/assets/svgs`;
 
 ### Requests
 
@@ -153,4 +186,4 @@ Feel free to use the issue tracker to request new icons.
 ### Where is the web font?
 
 After some internal discussions and research, we've decided not to include a web font.
-There are various reasons for this decision, the main one being accesibility. SVG should be well supported across all modern browsers.
+There are various reasons for this decision, the main one being accessibility. SVG should be well supported across all modern browsers.

_package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@igniteui/material-icons-extended",
+  "description": "A subset of Material Icons that extend the official Material Design Icons by Google.",
+  "author": "Infragistics",
+  "license": "MIT",
+  "version": "3.0.0",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./migrations/*": {
+      "default": "./migrations/*"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "types": "index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/IgniteUI/material-icons-extended.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "icons",
+    "material",
+    "infragistics",
+    "igniteui"
+  ],
+  "bugs": {
+    "url": "https://github.com/IgniteUI/material-icons-extended/issues"
+  },
+  "homepage": "https://github.com/IgniteUI/material-icons-extended#readme",
+  "ng-update": {
+    "migrations": "./migrations/migration.json"
+  }
+}

migrations/migration.json

@@ -1,8 +1,7 @@
 {
-  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
     "migration-01": {
-      "version": "2.0.0-beta",
+      "version": "3.0.0",
       "description": "Updates IgniteUI Material Icons Extended to the latest version.",
       "factory": "./base-migration"
     }

migrations/tsconfig.json

@@ -4,6 +4,6 @@
     "module": "CommonJS",
     "sourceMap": false,
     "declaration": true,
-    "outDir": "../build/migrations/base-migration/"
+    "outDir": "../dist/migrations/base-migration/"
   }
 }