feat(QIcon): [Proposal] SVG icon #2494 -- WIP

quasarframework · Mar 21, 2019 · 319cf5f · 319cf5f
1 parent ef04d37
commit 319cf5f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 14 deletions.
diff --git a/quasar/dev/components/components/icon.vue b/quasar/dev/components/components/icon.vue
@@ -33,6 +33,12 @@
         </div>
       </div>
     </div>
+
+    <div class="q-mt-xl">
+      <q-icon name="img:https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg" />
+      <q-icon size="100px" name="img:https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg" />
+      <q-input v-model="text" clearable clear-icon="img:https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg" />
+    </div>
   </div>
 </template>
 
@@ -64,7 +70,8 @@ function parseSet (setName, set) {
 export default {
   data () {
     return {
-      icon: 'cloud'
+      icon: 'cloud',
+      text: 'gigi'
     }
   },
   computed: {

diff --git a/quasar/src/components/icon/QIcon.js b/quasar/src/components/icon/QIcon.js
@@ -25,6 +25,19 @@ export default Vue.extend({
         }
       }
 
+      const commonCls = 'q-icon' +
+        (this.color !== void 0 ? ` text-${this.color}` : '') +
+        (this.left === true ? ' on-left' : '') +
+        (this.right === true ? ' on-right' : '')
+
+      if (icon.startsWith('img:')) {
+        return {
+          img: true,
+          cls: commonCls,
+          src: icon.substring(4)
+        }
+      }
+
       let content = ' '
 
       if (/^fa[s|r|l|b]{0,1} /.test(icon) || icon.startsWith('icon-') === true) {
@@ -57,9 +70,7 @@ export default Vue.extend({
       }
 
       return {
-        cls: cls + (this.color !== void 0 ? ` text-${this.color}` : '') +
-          (this.left === true ? ' on-left' : '') +
-          (this.right === true ? ' on-right' : ''),
+        cls: cls + ' ' + commonCls,
         content
       }
     },
@@ -72,15 +83,21 @@ export default Vue.extend({
   },
 
   render (h) {
-    return h('i', {
-      staticClass: 'q-icon',
-      class: this.type.cls,
-      style: this.style,
-      attrs: { 'aria-hidden': true },
-      on: this.$listeners
-    }, [
-      this.type.content,
-      slot(this, 'default')
-    ])
+    return this.type.img === true
+      ? h('img', {
+        staticClass: this.type.cls,
+        style: this.style,
+        on: this.$listeners,
+        attrs: { src: this.type.src }
+      })
+      : h('i', {
+        staticClass: this.type.cls,
+        style: this.style,
+        on: this.$listeners,
+        attrs: { 'aria-hidden': true }
+      }, [
+        this.type.content,
+        slot(this, 'default')
+      ])
   }
 })
diff --git a/quasar/src/css/critical.styl b/quasar/src/css/critical.styl
@@ -1,5 +1,7 @@
 .q-icon
   line-height 1
+  width 1em
+  height 1em
   letter-spacing normal
   text-transform none
   white-space nowrap