build(deps): bump loader-utils and @angular-devkit/build-angular

Bumps [loader-utils](https://github.com/webpack/loader-utils) to 1.4.2 and updates ancestor dependencies [loader-utils](https://github.com/webpack/loader-utils), [loader-utils](https://github.com/webpack/loader-utils) and [@angular-devkit/build-angular](https://github.com/angular/angular-cli). These dependencies need to be updated together.


Updates `loader-utils` from 1.1.0 to 1.4.2
- [Release notes](https://github.com/webpack/loader-utils/releases)
- [Changelog](https://github.com/webpack/loader-utils/blob/v1.4.2/CHANGELOG.md)
- [Commits](https://github.com/webpack/loader-utils/compare/v1.1.0...v1.4.2)

Updates `loader-utils` from 1.2.3 to 1.4.2
- [Release notes](https://github.com/webpack/loader-utils/releases)
- [Changelog](https://github.com/webpack/loader-utils/blob/v1.4.2/CHANGELOG.md)
- [Commits](https://github.com/webpack/loader-utils/compare/v1.1.0...v1.4.2)

Updates `@angular-devkit/build-angular` from 0.7.5 to 15.0.0
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Changelog](https://github.com/angular/angular-cli/blob/main/CHANGELOG.md)
- [Commits](https://github.com/angular/angular-cli/commits/15.0.0)

---
updated-dependencies:
- dependency-name: loader-utils
  dependency-type: indirect
- dependency-name: loader-utils
  dependency-type: indirect
- dependency-name: "@angular-devkit/build-angular"
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

README.md

@@ -1,12 +1,12 @@
 <h1><img src="https://i.imgur.com/cXYo5bi.png"> Eva Icons</h1>
 <img src="https://i.imgur.com/oDmqDkE.jpg">
 
-**Eva Icons** is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally Eva Icons supports 4 animation types: `zoom`, `pulse`, `shake` and `flip`.  Download on desktop to use them in your digital products for Web, iOS and Android. Icons are provided in two visual types: `Fill` and `Outline` and in several formats, including `PNG`, `SVG`, `font`, `Sketch`, etc.
+**Eva Icons** is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4 animation types: `zoom`, `pulse`, `shake` and `flip`.  Download on desktop to use them in your digital products for Web, iOS and Android. Icons are provided in two visual types: `Fill` and `Outline` and in several formats, including `PNG`, `SVG`, `font`, `Sketch`, etc.
 
 ## Download
 - [Complete Eva Icons Package](https://akveo.github.io/eva-icons/eva-icons.zip)
 - [NPM Package](https://www.npmjs.com/package/eva-icons)
-- you also can download icons one by one in `PNG` and `SVG` formats from [Eva Icons Website](https://akveo.github.io/eva-icons/).
+- you also can download icons one by one in `PNG` and `SVG` formats from [Eva Icons Website](https://akveo.github.io/eva-icons/?utm_campaign=eva_icons%20-%20home%20-%20eva_icons%20github%20readme&utm_source=eva_icons&utm_medium=referral&utm_content=github_readme_download_eva_icons).
 
 ### CDN
 
@@ -132,9 +132,9 @@ Replaces all elements that have a `data-eva` attribute with SVG markup.
 
 ```js
 eva.replace({
-  aniamtion: {
+  animation: {
     type: string, // zoom, pulse, shake, flip
-    hover: booleam, // default true
+    hover: boolean, // default true
     infinite: boolean, // default false
   }
 });
@@ -146,16 +146,21 @@ eva.replace({
 ```html
 <div class="eva-parent-hover">
   <i data-eva="github" data-eva-animation="zoom"></i>
-  Zoom aniamtion
+  Zoom animation
 </div>
 ```
 
+## 3rd party implementations
+
+- [React Native](https://github.com/artyorsh/react-native-eva-icons)
+- [Flutter](https://github.com/piyushmaurya23/eva_icons_flutter)
+
 ## License
 [MIT](LICENSE.txt) license.
 
 ## More from Akveo
 
-- [Nebular](https://github.com/akveo/nebular) - Angular Component, Auth and Security
+- [Nebular](https://github.com/akveo/nebular) - Angular Components, Auth and Security
 - [ngx-admin](https://github.com/akveo/ngx-admin) - the best Angular admin template
 
 ## How can I support the developers?
@@ -165,5 +170,5 @@ eva.replace({
 - Like our page on [Facebook](https://www.facebook.com/akveo/) :thumbsup:
 
 ## From Developers
-Made with :heart: by [Akveo team](http://akveo.com?utm_source=github&utm_medium=nebular_readme). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
+Made with :heart: by [Akveo team](https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20github%20readme&utm_source=eva_icons&utm_medium=referral&utm_content=readme_made_with_heart). Follow us on [Twitter](https://twitter.com/akveo_inc) to get the latest news first!
 We're always happy to receive your feedback!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eva-icons-landing",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "browserslist": [
     "> 1%",
     "last 2 versions",
@@ -22,7 +22,7 @@
     "build:icons": "node ./scripts/index.js",
     "icons:prepare": "npm run build:icons && webpack",
     "publish": "npm publish --access=public package-build",
-    "gh-pages": "npm run build:prod && npm run ngh -- --dir ./dist"
+    "gh-pages": "npm run build:prod && npm run ngh -- --dir ./dist --no-silent"
   },
   "private": true,
   "dependencies": {
@@ -43,7 +43,7 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.7.0",
+    "@angular-devkit/build-angular": "~15.0.0",
     "@angular/cdk": "^6.4.7",
     "@angular/cli": "~6.1.4",
     "@angular/compiler-cli": "^6.1.0",
@@ -68,6 +68,7 @@
     "globby": "^8.0.1",
     "gm": "^1.23.1",
     "html-minifier": "^3.5.20",
+    "isomorphic-style-loader": "^5.1.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~1.7.1",

package/icons/fill/svg/smiling-face.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fff;opacity:0;}.cls-2{fill:#231f20;}</style></defs><title>slash</title><g id="Layer_2" data-name="Layer 2"><g id="smiling-face"><g id="smiling-face" data-name="smiling-face"><rect class="cls-1" width="24" height="24"/>            <path d="M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 Z M17,13 C17,15.7614237 14.7614237,18 12,18 C9.23857625,18 7,15.7614237 7,13 L7,13 Z" id="🎨-Icon-Сolor"></path></g></g></g></svg>

package/icons/outline/svg/smiling-face-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fff;opacity:0;}.cls-2{fill:#231f20;}</style></defs><title>slash</title><g id="Layer_2" data-name="Layer 2"><g id="smiling-face"><g id="smiling-face" data-name="smiling-face"><rect class="cls-1" width="24" height="24"/>            <path d="M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 Z M17,13 C17,15.7614237 14.7614237,18 12,18 C9.23857625,18 7,15.7614237 7,13 L7,13 Z" id="🎨-Icon-Сolor"></path></g></g></g></svg>

package/src/index.js

@@ -6,7 +6,10 @@
 
 import icons from './icons';
 import replace from './replace';
+import style from './animation.scss';
 
-import './animation.scss';
+if (typeof window !== 'undefined') {
+  style._insertCss();
+}
 
 export { icons, replace };

scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eva-icons",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "Eva Icons - beautifully crafted Open Source UI icons for common actions and items.",
   "main": "eva.js",
   "unpkg": "eva.min.js",

src/app/@core/data/service/icons/fill-icons-order.ts

@@ -159,7 +159,7 @@ export const fillOrder = {
   'minus': 14700,
   'monitor': 14800,
   'moon': 14900,
-  'more-horizotnal': 15000,
+  'more-horizontal': 15000,
   'more-vertical': 15100,
   'move': 15200,
   'music': 15300,
@@ -218,6 +218,7 @@ export const fillOrder = {
   'skip-forward': 20500,
   'slash': 20600,
   'smartphone': 20700,
+  'smiling-face': 20750,
   'speaker': 20800,
   'square': 20900,
   'star': 21000,

src/app/@core/data/service/icons/icons-tags.ts

@@ -157,7 +157,7 @@ export const iconsTags = {
   'minus': [],
   'monitor': ['tv'],
   'moon': ['dark', 'night'],
-  'more-horizotnal': ['ellipsis'],
+  'more-horizontal': ['ellipsis'],
   'more-vertical': ['ellipsis'],
   'move': ['arrows'],
   'music': ['melody', 'song'],
@@ -216,6 +216,7 @@ export const iconsTags = {
   'skip-forward': ['music'],
   'slash': ['ban', 'no'],
   'smartphone': ['mobile'],
+  'smiling-face': ['smiling', 'face', 'stickers', 'memes'],
   'speaker': ['music'],
   'square': ['figure'],
   'star': ['bookmark', 'favorite', 'like'],

src/app/@core/data/service/icons/outline-icons-order.ts

@@ -157,7 +157,7 @@ export const outlineOrder = {
   'minus-square-outline': 14600,
   'monitor-outline': 14700,
   'moon-outline': 14800,
-  'more-horizotnal-outline': 14900,
+  'more-horizontal-outline': 14900,
   'more-vertical-outline': 15000,
   'move-outline': 15100,
   'music-outline': 15200,
@@ -216,6 +216,7 @@ export const outlineOrder = {
   'skip-forward-outline': 20300,
   'slash-outline': 20400,
   'smartphone-outline': 20500,
+  'smiling-face-outline': 20550,
   'speaker-outline': 20600,
   'square-outline': 20700,
   'star-outline': 20800,

src/app/@theme/components/footer/footer.component.html

@@ -1,15 +1,19 @@
 <div class="logo">
-  <a href="http://akveo.com" target="_blank">
+  <a href="https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=banner&utm_content=footer_logo" target="_blank">
     <img src="assets/img/akveo-logo.png">
   </a>
 </div>
 <div class="company-info">
   <ul>
     <li class="title">More from Akveo</li>
-    <li><a href="http://akveo.com?utm_source=eva_documentation&utm_medium=footer" target="_blank">Homepage</a></li>
-    <li><a href="https://akveo.github.io/nebular?utm_source=eva_documentation&utm_medium=footer" target="_blank">Nebular</a></li>
-    <li><a href="http://akveo.com/ngx-admin?utm_source=eva_documentation&utm_medium=footer"
-           target="_blank">ngx-admin</a></li>
+    <li><a href="https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=home_footer_homepage" target="_blank">Homepage</a></li>
+    <li><a href="https://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=footer_link_nebular" target="_blank">Nebular</a></li>
+    <li><a href="https://akveo.github.io/ngx-admin?utm_campaign=ngx_admin%20-%20home%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=footer_link_ngx_admin" target="_blank">ngx-admin</a></li>
+    <li>
+      <a href="https://eva.design?utm_campaign=eva_design%20-%20home%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=footer_link_eva" target="_blank">
+        Eva Design System
+      </a>
+    </li>
   </ul>
 </div>
 <div class="social-container">
@@ -30,7 +34,7 @@
       </a>
     </li>
     <li class="copy">
-      &copy; 2015-2018 <a href="http://akveo.com?utm_source=eva_documentation&utm_medium=footer" target="_blank">Akveo LLC</a><br>
+      &copy; 2015-2018 <a href="https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=footer_akveo_llc" target="_blank">Akveo LLC</a><br>
       Documentation licensed under CC BY 4.0.
     </li>
   </ul>

src/app/@theme/components/header/header.component.ts

@@ -27,6 +27,6 @@ export class HeaderComponent {
   clickOnDownloadPack() {
     const version = this.versionService.getEvoVersion();
 
-    this.analytics.trackEvent('download-pack', `download pack version: ${version}`);
+    this.analytics.trackEvent('downloadPack', `download pack version: ${version}`);
   }
 }

src/app/@theme/components/modals/download-icon/download-icon.component.ts

@@ -40,6 +40,6 @@ export class DownloadIconComponent implements AfterViewInit {
   }
 
   clickOnDownloadIcon(icon: { format: string; title: string }) {
-    this.analytics.trackEvent('download-icon', `${this.selectedIcon}.${icon.format}`);
+    this.analytics.trackEvent('downloadIcon', `${this.selectedIcon}.${icon.format}`);
   }
 }

src/app/@theme/components/page-container/page-container.component.html

@@ -8,7 +8,8 @@
 </div>
 <p class="description">
   Eva Icons is a pack of more than <span>480</span> beautifully crafted Open Source icons for common actions and items.<br/>
-  Download our set on the desktop to use them in your digital products for Web, iOS and Android.
+  Download our set on the desktop to use them in your digital products for Web, iOS and Android.<br/>
+  Compatible with <a class="eva-ds-link" href="https://eva.design?utm_campaign=eva_design%20-%20home%20-%20eva_icons%20website&utm_source=eva_icons&utm_medium=referral&utm_content=top_description_link">Eva Design System</a>.
 </p>
 
 <div class="search" [class.search-focus]="isInputFocus">

src/app/@theme/components/page-container/page-container.component.scss

@@ -55,10 +55,14 @@
     font-size: nb-theme(font-size-lg);
     line-height: 1.625;
     margin-bottom: 2rem;
-    
+
     span {
       font-weight: nb-theme(font-weight-ultra-bold);
     }
+
+    .eva-ds-link {
+      color: nb-theme(color-primary);
+    }
   }
 
   // search
@@ -198,7 +202,7 @@
       padding-left: 0;
       font-size: 4rem;
     }
-    
+
     .description {
       margin-bottom: 4rem;
       font-size: nb-theme(font-size);

src/app/@theme/components/page-container/page-container.component.ts

@@ -135,7 +135,7 @@ export class PageContainerComponent implements AfterViewInit, OnDestroy {
   }
 
   clickIcon(icon) {
-    this.analytics.trackEvent('open-icon-dialog', icon);
+    this.analytics.trackEvent('openIconDialog', icon);
 
     if (this.isMobileMode) {
       return;

src/app/@theme/services/analytics.service.ts

@@ -6,7 +6,6 @@
 
 import { Injectable, Inject } from '@angular/core';
 import { NB_WINDOW } from '@nebular/theme';
-declare const ga: any;
 
 @Injectable()
 export class EvaAnalytics {
@@ -18,7 +17,12 @@ export class EvaAnalytics {
 
   trackEvent(eventName: string, eventVal: string = '') {
     if (this.enabled) {
-      ga('send', 'event', eventName, eventVal);
+      this.gtmPushToDataLayer({ event: eventName, eventValue: eventVal });
     }
   }
+
+  // Push to 'dataLayer' Google Tag Manager array
+  private gtmPushToDataLayer(params) {
+    this.window.dataLayer.push(params);
+  }
 }

src/app/@theme/styles/themes.scss

@@ -75,5 +75,4 @@ $nb-themes: nb-register-theme((
   info-fg: #ff3d71,
 
   custiom-radius: 0.625rem,
-
 ), eva, corporate);

src/index.html

@@ -1,15 +1,9 @@
 <!doctype html>
 <html lang="en">
 <head>
-
-  <!-- Google Tag Manager -->
-  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-  })(window,document,'script','dataLayer','GTM-PBDR8ND');</script>
-  <!-- End Google Tag Manager -->
-
+  <script>
+    dataLayer = [];
+  </script>
   <meta charset="utf-8">
   <title>Eva Icons - beautifully crafted Open Source UI icons for common actions and items.</title>
 
@@ -19,14 +13,20 @@
   <meta name='apple-mobile-web-app-capable' content='yes' />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+  <!-- Google Tag Manager -->
+  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','GTM-K8MXX5F');</script>
+  <!-- End Google Tag Manager -->
 </head>
 <body>
-
   <!-- Google Tag Manager (noscript) -->
-  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBDR8ND"
-                    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K8MXX5F"
+  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   <!-- End Google Tag Manager (noscript) -->
-
   <eva-app></eva-app>
 </body>
 </html>

webpack.config.js

@@ -43,7 +43,7 @@ module.exports = {
       {
         test: /\.scss$/,
         use: [
-          "style-loader",
+          "isomorphic-style-loader",
           "css-loader",
           "sass-loader"
         ]