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

bem · Jul 1, 2014 · f9e816e · f9e816e
1 parent 5ed648a
commit f9e816e
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 11 deletions.
diff --git a/common.blocks/button/button.tests/simple.bemjson.js b/common.blocks/button/button.tests/simple.bemjson.js
@@ -197,6 +197,19 @@
                 icon : { block : 'icon', mods : { action : 'download' } }
             },
             ' ',
+            {
+                block : 'button',
+                text : 'layers',
+                mods : { theme : 'normal', size : 's' },
+                icon : {
+                    block : 'icon',
+                    content : {
+                        block : 'image',
+                        url : '../../../test.blocks/icon/_action/download.svg'
+                    }
+                }
+            },
+            ' ',
             {
                 block : 'button',
                 mods : { theme : 'normal', size : 's' },
@@ -249,6 +262,19 @@
                 icon : { block : 'icon', mods : { action : 'download' } }
             },
             ' ',
+            {
+                block : 'button',
+                text : 'layers',
+                mods : { theme : 'normal', size : 'm' },
+                icon : {
+                    block : 'icon',
+                    content : {
+                        block : 'image',
+                        url : '../../../test.blocks/icon/_action/download.svg'
+                    }
+                }
+            },
+            ' ',
             {
                 block : 'button',
                 mods : { theme : 'normal', size : 'm' },
@@ -266,6 +292,19 @@
                 icon : { block : 'icon', mods : { action : 'download' } }
             },
             ' ',
+            {
+                block : 'button',
+                text : 'layers',
+                mods : { theme : 'normal', size : 'l' },
+                icon : {
+                    block : 'icon',
+                    content : {
+                        block : 'image',
+                        url : '../../../test.blocks/icon/_action/download.svg'
+                    }
+                }
+            },
+            ' ',
             {
                 block : 'button',
                 mods : { theme : 'normal', size : 'l' },
@@ -283,6 +322,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.roo b/common.blocks/icon/icon.roo
@@ -5,7 +5,7 @@
     background: 50% no-repeat;
 
     /* Hack for correct baseline positioning */
-    &:after
+    &:empty:after
     {
         visibility: hidden;
 

diff --git a/common.blocks/icon/icon.styl b/common.blocks/icon/icon.styl
@@ -5,7 +5,7 @@
     background: 50% no-repeat;
 
     /* Hack for correct baseline positioning */
-    &:after
+    &:empty:after
     {
         visibility: hidden;
 

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/test.blocks/icon/icon.roo b/test.blocks/icon/icon.roo
@@ -1,4 +1,4 @@
 .icon
 {
-    width: 1em;
+    min-width: 1em;
 }