feat: CRMMON-8261 add error-octagon icon

Signed-off-by: Herve Ntubi <[email protected]>
VilledeMontreal · Jan 21, 2025 · 750550c · 750550c
1 parent e727d0d
commit 750550c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/projects/angular-ui/src/lib/icon/bao-icon-registry.ts b/projects/angular-ui/src/lib/icon/bao-icon-registry.ts
@@ -6,7 +6,7 @@
 import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable, SecurityContext } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { ICONS_DCT } from './icons-dictionary';
+import { ICONS_DCT, ILLUSTRIVE_ICONS } from './icons-dictionary';
 
 const SVG_PREFIX = `<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img">`;
 const SVG_SUFFIX = `</svg>`;
@@ -27,7 +27,8 @@ export class BaoIconDictionary {
 
   private getRawIconStringFromIconName(iconName: string) {
     const iconSvgPath = ICONS_DCT[iconName] || '';
-    return `${SVG_PREFIX}${iconSvgPath}${SVG_SUFFIX}`;
+    const iconSvgPrefix = ILLUSTRIVE_ICONS.includes(iconName) ? SVG_PREFIX.replace('0 0 24 24', '0 0 40 40') : SVG_PREFIX;
+    return `${iconSvgPrefix}${iconSvgPath}${SVG_SUFFIX}`;
   }
 
   private svgElementFromString(svgString: string): SVGElement {

diff --git a/projects/angular-ui/src/lib/icon/icons-dictionary.ts b/projects/angular-ui/src/lib/icon/icons-dictionary.ts
@@ -235,5 +235,10 @@ export const ICONS_DCT: { [iconName: string]: string } = {
   'icon-spinner':
     "<path d='M24 12C24 14.3734 23.2962 16.6935 21.9776 18.6668C20.6591 20.6402 18.7849 22.1783 16.5922 23.0866C14.3995 23.9948 11.9867 24.2324 9.65892 23.7694C7.33114 23.3064 5.19295 22.1635 3.51472 20.4853C1.83649 18.8071 0.693599 16.6689 0.230577 14.3411C-0.232446 12.0133 0.00519403 9.60051 0.913446 7.4078C1.8217 5.21509 3.35977 3.34094 5.33316 2.02236C7.30655 0.703788 9.62662 -2.83022e-08 12 0L12 3C10.22 3 8.47991 3.52784 6.99987 4.51677C5.51983 5.50571 4.36627 6.91131 3.68508 8.55585C3.0039 10.2004 2.82567 12.01 3.17293 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89471 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12H24Z'/>",
   'icon-emergency':
-    "<path fill-rule='evenodd' clip-rule='evenodd' d='M11.067 7.87a.957.957 0 011.914 0v4.786a.957.957 0 11-1.914 0V7.87zM12.024 15.527a.958.958 0 10.001 1.916.958.958 0 00-.001-1.916z M9.878 1.879a3 3 0 014.243 0l8 7.999a3 3 0 010 4.242l-7.999 8.001a3 3 0 01-4.242 0l-8.001-7.999a3 3 0 010-4.242l7.999-8.001zm2.829 1.414a1 1 0 00-1.415 0l-8 8a1 1 0 00.001 1.415l8 8a1 1 0 001.415 0l8-8.002a1 1 0 000-1.414l-8.001-8z'/>"
+    "<path fill-rule='evenodd' clip-rule='evenodd' d='M11.067 7.87a.957.957 0 011.914 0v4.786a.957.957 0 11-1.914 0V7.87zM12.024 15.527a.958.958 0 10.001 1.916.958.958 0 00-.001-1.916z M9.878 1.879a3 3 0 014.243 0l8 7.999a3 3 0 010 4.242l-7.999 8.001a3 3 0 01-4.242 0l-8.001-7.999a3 3 0 010-4.242l7.999-8.001zm2.829 1.414a1 1 0 00-1.415 0l-8 8a1 1 0 00.001 1.415l8 8a1 1 0 001.415 0l8-8.002a1 1 0 000-1.414l-8.001-8z'/>",
+  'icon-error-octagon':
+    "<path fill-rule='evenodd' clip-rule='evenodd' d='M34.9 27C35.3971 27 35.8 26.597 35.8 26.1C35.8 25.6029 35.3971 25.2 34.9 25.2C34.4029 25.2 34 25.6029 34 26.1C34 26.597 34.4029 27 34.9 27Z' /><path fill-rule='evenodd' clip-rule='evenodd' d='M13.493 13.4928C13.8835 13.1023 14.5167 13.1023 14.9072 13.4928L26.5072 25.0928C26.8977 25.4834 26.8977 26.1165 26.5072 26.5071C26.1167 26.8976 25.4835 26.8976 25.093 26.5071L13.493 14.9071C13.1024 14.5165 13.1024 13.8834 13.493 13.4928Z' /><path fill-rule='evenodd' clip-rule='evenodd' d='M26.5072 13.4928C26.8977 13.8834 26.8977 14.5165 26.5072 14.9071L14.8072 26.6071C14.4167 26.9976 13.7835 26.9976 13.393 26.6071C13.0025 26.2165 13.0025 25.5834 13.393 25.1928L25.093 13.4928C25.4835 13.1023 26.1167 13.1023 26.5072 13.4928Z' /><path fill-rule='evenodd' clip-rule='evenodd' d='M12.7929 3.59294C12.9805 3.40541 13.2348 3.30005 13.5 3.30005H26.5C26.7653 3.30005 27.0196 3.40541 27.2072 3.59294L36.4072 12.7929C36.5947 12.9805 36.7001 13.2348 36.7001 13.5V23.5C36.7001 24.0523 36.2523 24.5 35.7001 24.5C35.1478 24.5 34.7001 24.0523 34.7001 23.5V13.9143L26.0858 5.30005H13.9143L5.30005 13.9143V26.0858L13.9143 34.7001H26.0858L32.8929 27.8929C33.2835 27.5024 33.9166 27.5024 34.3072 27.8929C34.6977 28.2835 34.6977 28.9166 34.3072 29.3072L27.2072 36.4072C27.0196 36.5947 26.7653 36.7001 26.5 36.7001H13.5C13.2348 36.7001 12.9805 36.5947 12.7929 36.4072L3.59294 27.2072C3.40541 27.0196 3.30005 26.7653 3.30005 26.5V13.5C3.30005 13.2348 3.40541 12.9805 3.59294 12.7929L12.7929 3.59294Z'/>"
 };
+
+/* 40x40 illlustrative icons - https://zeroheight.com/575tugn0n/v/0/p/39c76f-icones-illustratives/t/page-39c76f-32902091-13 */
+export const ILLUSTRIVE_ICONS = ['icon-error-octagon'];
diff --git a/projects/storybook-angular/src/stories/Icon/Icon.stories.ts b/projects/storybook-angular/src/stories/Icon/Icon.stories.ts
@@ -200,6 +200,7 @@ const Template: StoryFn = (args: BaoIconComponent) => ({
   <bao-icon [color]="color" [size]="size" title="x" svgIcon="icon-x"></bao-icon>
   <bao-icon [color]="color" [size]="size" title="spinner" svgIcon="icon-spinner"></bao-icon>
   <bao-icon [color]="color" [size]="size" title="emergency" svgIcon="icon-emergency"></bao-icon>
+  <bao-icon [color]="color" [size]="size" title="error-octagon" svgIcon="icon-error-octagon"></bao-icon>
 </div>
  `,
   props: args