7 files changed, 66 insertions, 2 deletions

diff --git a/src/_objects.scss b/src/_objects.scss
index 3e09104..f054c53 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -1,4 +1,5 @@
 @use 'objects/icon';
+@use 'objects/emoji';
 @use 'objects/heading';
 @use 'objects/divider';
 @use 'objects/badge';
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
new file mode 100644
index 0000000..82c415e
--- /dev/null
+++ b/src/objects/_emoji.scss
@@ -0,0 +1,39 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('emoji') {
+    @include iro.props-store((
+        --dims: (
+            --size:     1.4em,
+            --pad:      .2em,
+            --rounding: 3px,
+            --zoom:     2,
+        )
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --bg: fn.global-color(--obj-hi),
+        )
+    ), 'colors');
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        inline;
+        position:       relative;
+        top:            calc(-.5em * fn.global-dim(--font --standard --line-height) + fn.dim(--rounding));
+        width:          fn.dim(--size);
+        height:         fn.dim(--size);
+        margin:         calc(-.5 * fn.dim(--size)) 0;
+        padding:        fn.dim(--pad);
+        transition:     transform .2s ease, background-color .2s ease;
+        border-radius:  calc(fn.dim(--rounding) / fn.dim(--zoom));
+        vertical-align: bottom;
+
+        @include iro.bem-modifier('zoomable') {
+            &:hover {
+                transform:        scale(fn.dim(--zoom));
+                background-color: fn.color(--bg);
+            }
+        }
+    }
+}
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 12baeba..5a543ab 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -10,13 +10,13 @@
     ), 'dims');
 
     @include iro.bem-object(iro.props-namespace()) {
-        display:         inline-block;
+        display:         inline;
         width:           fn.dim(--size);
         height:          fn.dim(--size);
         stroke-width:    fn.dim(--stroke);
         stroke-linecap:  round;
         stroke-linejoin: round;
-        vertical-align:  -.12em;
+        vertical-align:  -.18em;
 
         @include iro.bem-modifier('block') {
             display: block;
diff --git a/static/drgn.png b/static/drgn.png
new file mode 100755
index 0000000..b8cde00
--- /dev/null
+++ b/static/drgn.png
diff --git a/tpl/index.pug b/tpl/index.pug
index 854cb4b..1f4f522 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -22,6 +22,7 @@ include objects/avatar.pug
 include objects/action-menu.pug
 include objects/menu.pug
 include objects/icon-nav.pug
+include objects/emoji.pug
 include objects/backdrop.pug
 include objects/dialog.pug
 include objects/lightbox.pug
@@ -77,6 +78,7 @@ include views/table.pug
 include views/alert.pug
 include views/bubble.pug
 include views/bubble-group.pug
+include views/emoji.pug
 
 
 doctype html
@@ -96,6 +98,7 @@ html
             +view-code
             +view-blockquote
             +view-list
+            +view-emoji
             +view-badge
             +view-button
             +view-text-field
diff --git a/tpl/objects/emoji.pug b/tpl/objects/emoji.pug
new file mode 100644
index 0000000..5bf3a3b
--- /dev/null
+++ b/tpl/objects/emoji.pug
@@ -0,0 +1,13 @@
+mixin emoji(id)
+    -
+        let classes = {
+            'o-emoji': true,
+            'o-emoji--zoomable': attributes.zoomable,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+        src = id + '.png'
+
+    img(src=src, class=classes)
diff --git a/tpl/views/emoji.pug b/tpl/views/emoji.pug
new file mode 100644
index 0000000..70c13a4
--- /dev/null
+++ b/tpl/views/emoji.pug
@@ -0,0 +1,8 @@
+mixin view-emoji 
+    +view('emoji', 'Emoji')
+        .c-box
+            =loremIpsum
+            +emoji('drgn')
+            =loremIpsum
+            +emoji('drgn')(zoomable=true)
+            =loremIpsum