Add more icons and export the shapes so they can be accessed individu…

…ally (#806)

* Add more icons and export the shapes so they can be accessed individually

* Add VW icon

* Remove service and load icons via function directly.
Add even more Icons

Co-authored-by: Manuel Andres <Manuel.Andres@cloudflight.io>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clr-addons",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "private": true,
   "scripts": {
     "build:ui:css": "sass --source-map --precision=8 ./src/clr-addons/themes/clr-ui/clr-ui.scss ./dist/clr-addons/styles/clr-ui.css && sass --source-map --precision=8 ./src/clr-addons/themes/clr-ui-dark/clr-ui-dark.scss ./dist/clr-addons/styles/clr-ui-dark.css && sass --source-map --precision=8 ./src/clr-addons/themes/phs/phs-theme.scss ./dist/clr-addons/styles/clr-addons-phs.css",

src/clr-addons/icons/icons.module.ts

@@ -8,18 +8,26 @@ import { CommonModule } from '@angular/common';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ClarityModule } from '@clr/angular';
-import { ClrIconsService } from './icons.service';
+import { ClarityIcons } from '@clr/icons';
+import { ClrAddonsIconShapes } from './shapes';
+
+/**
+ * Adds custom icons to the ClarityIcons Api
+ *
+ * @see {@link https://clarity.design/icons/api}
+ */
+export function loadIcons() {
+  return () => ClarityIcons.add(ClrAddonsIconShapes);
+}
 
 @NgModule({
   imports: [CommonModule, ClarityModule, FormsModule],
   declarations: [],
   exports: [],
   providers: [
-    ClrIconsService,
     {
       provide: APP_INITIALIZER,
-      useFactory: (service: ClrIconsService) => () => service.loadIcons(),
-      deps: [ClrIconsService],
+      useFactory: loadIcons,
       multi: true,
     },
   ],

src/clr-addons/icons/index.ts

@@ -4,5 +4,6 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-export * from './icons.service';
+export * from './shapes';
+export * from './svg-tag-generator';
 export * from './icons.module';

src/clr-addons/icons/svg-tag-generator.ts

@@ -13,8 +13,9 @@ const SOLID_CLASS = 'clr-i-solid';
  *
  * @see {@link https://github.com/vmware/clarity/blob/0afa75bf6bf183bb76474f7c3b20ebc7dcf89263/packages/icons/src/utils/svg-tag-generator.ts}
  * @param content content of the SVG
+ * @param viewBox viewBox of the SVG
  */
-export function clrIconSVG(content: string): string {
+export function clrIconSVG(content: string, viewBox = '0 0 24 24'): string {
   let classes = '';
 
   if (content.indexOf(BADGED_CLASS_SUBSTRING) > -1) {
@@ -31,10 +32,10 @@ export function clrIconSVG(content: string): string {
 
   let openingTag;
   if (classes) {
-    openingTag = `<svg version="1.1" class="${classes}" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"
+    openingTag = `<svg version="1.1" class="${classes}" viewBox="${viewBox}" preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg" focusable="false" role="img">`;
   } else {
-    openingTag = `<svg version="1.1" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"
+    openingTag = `<svg version="1.1" viewBox="${viewBox}" preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg" focusable="false" role="img">`;
   }
   const closingTag = `</svg>`;

src/clr-addons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porscheinformatik/clr-addons",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "Addon components for Clarity Angular",
   "es2015": "esm2015/clr-addons.js",
   "homepage": "https://porscheinformatik.github.io/clarity-addons/",

src/dev/src/app/icons/icons-demo.component.html

@@ -8,21 +8,9 @@ <h2>Icons</h2>
 
 <div class="clr-example">
   <div class="clr-row">
-    <div class="clr-col-3">
-      <clr-icon shape="new-car-commercial" size="24"></clr-icon>
-      <span>new-car-commercial</span>
-    </div>
-    <div class="clr-col-3">
-      <clr-icon shape="new-car-private" size="24"></clr-icon>
-      <span>new-car-private</span>
-    </div>
-    <div class="clr-col-3">
-      <clr-icon shape="used-car-commercial" size="24"></clr-icon>
-      <span>used-car-commercial</span>
-    </div>
-    <div class="clr-col-3">
-      <clr-icon shape="used-car-private" size="24"></clr-icon>
-      <span>used-car-private</span>
+    <div class="clr-col-2" *ngFor="let shape of shapes" style="margin-top: 1rem;">
+      <clr-icon [attr.shape]="shape" size="24"></clr-icon>
+      <span>{{ shape }}</span>
     </div>
   </div>
 </div>

src/dev/src/app/icons/icons-demo.component.ts

@@ -4,9 +4,12 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 import { Component } from '@angular/core';
+import { ClrAddonsIconShapes } from '@porscheinformatik/clr-addons';
 
 @Component({
   selector: 'clr-icons-demo',
   templateUrl: './icons-demo.component.html',
 })
-export class IconsDemo {}
+export class IconsDemo {
+  shapes: string[] = Object.keys(ClrAddonsIconShapes);
+}