Temporary fixes for Jochen

package.json

@@ -102,6 +102,7 @@
     "react-input-mask": "^2.0.4",
     "react-modal": "~3.5.1",
     "react-scripts": "^4.0.3",
+    "react-svg": "^12.1.0",
     "rollup-plugin-postcss": "^2.9.0",
     "rollup-plugin-sass": "^1.2.2",
     "rxjs": "^6.6.2",

packages/alert/Readme.md

@@ -7,7 +7,7 @@ import Icon from '../icon/src/Icon';
   title="This is a success box!"
   onClose={() => console.log('closed')}
   closable={true}>
-  This is my child <Icon name="alarm-bell" />
+  This is my child <Icon name="test3" style={{stroke:'green'}} />
   </Alert>
 ```
 

packages/icon/src/Icon.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { render } from 'react-dom';
+import { ReactSVG } from 'react-svg';
 import classNames from 'classnames';
 
 type Props = {
@@ -17,17 +19,28 @@ type Props = {
 const Icon = ({ name, style, className, ariaLabel, onClick, qa }: Props) => {
 
   const iconClass = classNames(className, 'ai');
-  const xlinkHref = `http://cdn.antwerpen.be/core_branding_scss/5.0.0-beta.2/assets/images/ai.svg#${name}`;
-
+  // const iconUrl = `https://cdn.antwerpen.be/core_branding_scss/5.0.0-beta.2/assets/icons/${name}.svg`; // Works
+  const iconUrl = `https://cdn.antwerpen.be/core_branding_scss/5.0.0-beta.2/assets/images/ai.svg#${name}`; // Doesn't work
   return (
+
+    // Option 1
     <span className={iconClass} style={style} data-qa={qa} onClick={onClick}>
-      <svg aria-hidden="true"><use xlinkHref={xlinkHref} /></svg>
-      {ariaLabel && <span className="u-screen-reader-only">{ariaLabel}</span>}
+      <ReactSVG src={iconUrl} wrapper="span" className={iconClass} style={style} data-qa={qa} onClick={onClick} />
     </span>
   )
 
-  // const iconClass = classNames(className, `fa fa-${name} ${name}`);
+  // Option 2
+  // const iconClass = classNames(className, 'ai');
+  // const xlinkHref = `https://cdn.antwerpen.be/core_branding_scss/5.0.0-beta.2/assets/images/ai.svg#${name}`;
+  // return (
+  //   <span className={iconClass} style={style} data-qa={qa} onClick={onClick}>
+  //     <svg aria-hidden="true"><use href={xlinkHref} /></svg>
+  //     {ariaLabel && <span className="u-screen-reader-only">{ariaLabel}</span>}
+  //   </span>
+  // );
 
+  // Option 3
+  // const iconClass = classNames(className, `fa fa-${name} ${name}`);
   // return (
   //   <React.Fragment>
   //     <span className={iconClass} style={style} data-qa={qa} aria-hidden="true" onClick={onClick}></span>