icon: add support for inline svg/img (close #523)

bem · Jul 1, 2014 · f422f67 · f422f67
1 parent 7230107
commit f422f67
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 9 deletions.
diff --git a/common.blocks/button/button.tests/simple.bemjson.js b/common.blocks/button/button.tests/simple.bemjson.js
@@ -197,6 +197,16 @@
                 icon : { block : 'icon', mods : { action : 'download' } }
             },
             ' ',
+            {
+                block : 'button',
+                text : 'layers',
+                mods : { theme : 'normal', size : 's' },
+                icon : {
+                    block : 'icon',
+                    content : '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 16 16" class="image"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg>'
+                }
+            },
+            ' ',
             {
                 block : 'button',
                 mods : { theme : 'normal', size : 's' },
@@ -249,6 +259,16 @@
                 icon : { block : 'icon', mods : { action : 'download' } }
             },
             ' ',
+            {
+                block : 'button',
+                text : 'layers',
+                mods : { theme : 'normal', size : 'm' },
+                icon : {
+                    block : 'icon',
+                    content : '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="-5 -5 26 26" class="image"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg>'
+                }
+            },
+            ' ',
             {
                 block : 'button',
                 mods : { theme : 'normal', size : 'm' },
@@ -266,6 +286,16 @@
                 icon : { block : 'icon', mods : { action : 'download' } }
             },
             ' ',
+            {
+                block : 'button',
+                text : 'layers',
+                mods : { theme : 'normal', size : 'l' },
+                icon : {
+                    block : 'icon',
+                    content : '<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="1 1 14 14" class="image"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg>'
+                }
+            },
+            ' ',
             {
                 block : 'button',
                 mods : { theme : 'normal', size : 'l' },
@@ -283,6 +313,19 @@
                 icon : { block : 'icon', mods : { action : 'download' } }
             },
             ' ',
+            {
+                block : 'button',
+                text : 'layers',
+                mods : { theme : 'normal', size : 'xl' },
+                icon : {
+                    block : 'icon',
+                    content : {
+                        block : 'image',
+                        url : '../../../test.blocks/icon/_action/download.svg'
+                    }
+                }
+            },
+            ' ',
             {
                 block : 'button',
                 mods : { theme : 'normal', size : 'xl' },

diff --git a/common.blocks/icon/icon.tests/simple.bemjson.js b/common.blocks/icon/icon.tests/simple.bemjson.js
@@ -9,18 +9,49 @@
         { tag : 'h2', content : 'icon' },
         {
             block : 'test',
-            content : {
-                block : 'icon',
-                url : '../../../test.blocks/icon/_action/download.svg'
-            }
+            content : [
+                'Style background: ',
+                {
+                    block : 'icon',
+                    url : '../../../test.blocks/icon/_action/download.svg'
+                }
+            ]
         },
         { tag : 'br' },
         {
             block : 'test',
-            content : {
-                block : 'icon',
-                mods : { social : 'twitter' }
-            }
+            content : [
+                'CSS background: ',
+                {
+                    block : 'icon',
+                    mods : { action : 'download' }
+                }
+            ]
+        },
+        { tag : 'br' },
+        {
+            block : 'test',
+            content : [
+                'Source content: ',
+                {
+                    block : 'icon',
+                    content : {
+                        block : 'image',
+                        url : '../../../test.blocks/icon/_action/download.svg'
+                    }
+                }
+            ]
+        },
+        { tag : 'br' },
+        {
+            block : 'test',
+            content : [
+                'Inline content: ',
+                {
+                    block : 'icon',
+                    content : '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M1 13v2h14v-2h-14zm13-7h-3v-5h-6v5.031l-3-.031 6 6 6-6z"/></svg>'
+                }
+            ]
         }
     ]
 });
diff --git a/design/common.blocks/button/_theme/button_theme_normal.roo b/design/common.blocks/button/_theme/button_theme_normal.roo
@@ -49,6 +49,17 @@ $ctx
         display: inline-block;
     }
 
+    .icon .image
+    {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        margin: auto;
+    }
+
     &.button_type_link
     {
         text-decoration: none;

diff --git a/design/common.blocks/button/_theme/button_theme_normal.styl b/design/common.blocks/button/_theme/button_theme_normal.styl
@@ -48,6 +48,17 @@ ctx = '.button_theme_normal'
         display: inline-block;
     }
 
+    .icon .image
+    {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        margin: auto;
+    }
+
     &.button_type_link
     {
         text-decoration: none;

diff --git a/test.blocks/icon/icon.roo b/test.blocks/icon/icon.roo
@@ -1,4 +1,4 @@
 .icon
 {
-    width: 1em;
+    min-width: 1em;
 }