FFE-31 Revert icon changes. Unable to create background circle by emb…

…edding ffe-icon-react in a svg. ffe-icons-react exports a svg with hardcoded values for x and y. This becomes a problem when embedding a ffe-icon in an other svg as the icons coordinates are relative to the parents coordinate system
SpareBank1 · Nov 15, 2016 · 0ef4a50 · 0ef4a50
1 parent 0196302
commit 0ef4a50
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/examples/ffe-context-message.html b/examples/ffe-context-message.html
@@ -10,13 +10,12 @@
 <body>
 <h1 class='ffe-h1' style="text-align: center">info</h1>
 <div class="ffe-context-message ffe-context-message--info">
-    <svg class="ffe-context-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
-        <circle r="100" cx="100" cy="100" fill="white" />
-        <g transform="scale(0.5) translate(100, 100)">
-          <path d="m96.19,199.99h7.846c7.1536,0,11.308-4.398,11.308-11.805v-102.99c0-7.407-4.1537-11.805-11.308-11.805h-7.846c-7.3844,0-11.769,4.3979-11.769,11.805v103c0.227,7.4054,4.38,11.805,11.765,11.805z"/>
-          <path d="M116.5,11.805c0-7.4072-4.15-11.805-11.31-11.805h-10.382c-7.1577,0-11.308,4.3978-11.308,11.805v15.045c0,7.407,3.923,11.342,11.308,11.342h10.385c7.3844,0,11.308-3.935,11.308-11.342v-15.045z"/>
-        </g>
-    </svg>
+    <div class="ffe-context-message__icon">
+        <svg class="ffe-context-message__icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+            <path d="m96.19,199.99h7.846c7.1536,0,11.308-4.398,11.308-11.805v-102.99c0-7.407-4.1537-11.805-11.308-11.805h-7.846c-7.3844,0-11.769,4.3979-11.769,11.805v103c0.227,7.4054,4.38,11.805,11.765,11.805z"/>
+            <path d="M116.5,11.805c0-7.4072-4.15-11.805-11.31-11.805h-10.382c-7.1577,0-11.308,4.3978-11.308,11.805v15.045c0,7.407,3.923,11.342,11.308,11.342h10.385c7.3844,0,11.308-3.935,11.308-11.342v-15.045z"/>
+        </svg>
+    </div>
     <div>
         <header class="ffe-h5">Informasjon</header>
         <div class="ffe-body-text">
@@ -50,10 +49,12 @@ <h1 class='ffe-h1' style="text-align: center">info</h1>
 
 <h1 class='ffe-h1' style="text-align: center">tips</h1>
 <div class="ffe-context-message ffe-context-message--tip">
-    <svg class="ffe-context-message__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
-        <circle r="100" cx="100" cy="100" fill="white" />
-        <path transform="scale(0.5) translate(100, 100)" d="M191 90.2c.8-2 1.3-4.4 1.3-6.6V80c0-10.6-8.5-19-19-19h-35.7c1.3-7.3 3-18 3.3-27.2 0-8.8-3-16.7-9-22.4-5-5-12-7.8-19-7.8-9 0-15 6-16 15.7v.7c0 .2 0 11-4 26.4-7 23.6-24 35.2-34 40V86c0-3.5-3-6-6-6H13C6.3 80 .7 85.3.7 92.3V182c0 7 5.5 12.6 12.5 12.6h34c7 0 12.5-5.5 12.5-12.5v-4c7.5 2 18.4 5 29 5H164c12 0 21.3-9 21.3-21v-7c5.5-3.3 9.2-9.2 9.2-16.2V136c0-3.4-1-6.5-2.4-9.3 6-3.5 9-9.4 9-16.2V107c0-7.5-4-13.7-10-16.7zM46.4 181.4H13.8V93h32.6v88.4zM172.2 161c0 4.4-3.7 8-8 8h-76c-10.6 0-22.6-3-29-5v-63c13.4-5 38-19.8 46.6-51 4-15.6 4.5-27.2 4.5-29.6.4-3.7 2.2-3.7 2.8-3.7 4 0 8 1.3 10 4 3 3 5 7.4 5 12.6 0 13.6-4.2 32.2-4.2 32.4l-2 8h52c3.3 0 6 2.7 6 6v3.7c0 2.6-2 4.6-4.6 4.6h-32v13h39.5c3 0 5.5 2.5 5.5 5.6v3.5c0 4-3 7-7 7h-39v13h33c3.2 0 6 3 6 6v3c0 3.7-3 6-6 6h-32v13h29v4z"/>
-    </svg>
+    <div class="ffe-context-message__icon">
+        <svg class="ffe-context-message__icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+            <path d="m96.19,199.99h7.846c7.1536,0,11.308-4.398,11.308-11.805v-102.99c0-7.407-4.1537-11.805-11.308-11.805h-7.846c-7.3844,0-11.769,4.3979-11.769,11.805v103c0.227,7.4054,4.38,11.805,11.765,11.805z"/>
+            <path d="M116.5,11.805c0-7.4072-4.15-11.805-11.31-11.805h-10.382c-7.1577,0-11.308,4.3978-11.308,11.805v15.045c0,7.407,3.923,11.342,11.308,11.342h10.385c7.3844,0,11.308-3.935,11.308-11.342v-15.045z"/>
+        </svg>
+    </div>
     <div>
         <header class="ffe-h5">Tips</header>
         <div class="ffe-body-text">

diff --git a/less/ffe-context-message.less b/less/ffe-context-message.less
@@ -22,11 +22,20 @@
   }
 
   &__icon {
-    margin-right: 2.2em;
+    display: flex;
     flex-shrink: 0;
-    width: 4em;
+    margin-right: 2.2em;
+    align-items: center;
+    justify-content: center;
+    background-color: @ffe-white;
+    border-radius: 50%;
     height: 4em;
-    fill: @ffe-blue-royal;
+    width: 4em;
+    &-svg {
+      height: 3em;
+      width: 3em;
+      fill: @ffe-blue-royal;
+    }
   }
 
   &__close-button {