fix: Icons rendering to the alert

Pearson-Higher-Ed · Dec 5, 2016 · e3511a0 · e3511a0
1 parent bd3a43f
commit e3511a0
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 16 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,6 @@
     <title>Alerts Demo</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="elements.css">
-
 </head>
 <body>
     <!-- Customize the demo for your component -->
@@ -17,7 +16,7 @@ <h1>Alerts Demo</h1>
     <script>
       if (document.body.children[0].nodeName != 'svg') {
         var pe_ajax = new XMLHttpRequest();
-        pe_ajax.open("GET", "/icons/p-icons-sprite-1.1.svg", true);
+        pe_ajax.open("GET", "../node_modules/pearson-elements/dist/icons/p-icons-sprite-1.1.svg", true);
         pe_ajax.responseType = "document";
         pe_ajax.onload = function(e) {
           document.body.insertBefore(

diff --git a/src/js/alert.js b/src/js/alert.js
@@ -1,19 +1,6 @@
 import React from 'react';
 
-const Icon = (props) => {
-
-  const icon_class = 'pe-icon--' + props.name;
-
-  return(
-    <svg version = "1.1"
-         xmlns = "http://www.w3.org/2000/svg"
-         xmlnsXlink = "http://www.w3.org/1999/xlink"
-         aria-hidden = "true"
-         className = {icon_class}>
-      <use xlinkHref = {'#' + props.name}></use>
-    </svg>
-  );
-}
+import Icon from './icon';
 
 const Alert = (props) => (
   <span className={`alert-span ${props.closeTitleProp}`} id={`${props.whichAlertProp}`} role="alert" style={{opacity: props.opacity}}>

diff --git a/src/js/icon.js b/src/js/icon.js
@@ -0,0 +1,16 @@
+const Icon = (props) => {
+
+  const icon_class = 'pe-icon--' + props.name;
+
+  return(
+    <svg version = "1.1"
+         xmlns = "http://www.w3.org/2000/svg"
+         xmlnsXlink = "http://www.w3.org/1999/xlink"
+         aria-hidden = "true"
+         className = {icon_class}>
+      <use xlinkHref = {'#' + props.name}></use>
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/src/scss/component-specific.scss b/src/scss/component-specific.scss
@@ -7,6 +7,10 @@
   animation-name: openAlert;
   animation-duration: .3s;
 }
+.pe-icon--remove-lg-18 {
+  height: 0;
+  width: 0;
+}
 #Error {
   border-top: $alert-top-border $pe-color-strawberry-red;
 }