函数式svg-icon

vue/src/assets/icons/index.js

@@ -1,7 +1,6 @@
 import Vue from 'vue'
-import SvgIcon from '@/components/SvgIcon' // svg component
+import SvgIcon from '@/components/SvgIcon'
 
-// register globally
 Vue.component('svg-icon', SvgIcon)
 
 const req = require.context('./svg', false, /\.svg$/)

vue/src/components/SvgIcon/index.vue

@@ -1,15 +1,9 @@
-<template>
+<script type="text/jsx">
-    <div v-if="isExternal" v-on="$listeners" class="svg-external-icon svg-icon" :style="styleExternalIcon"/>
-    <svg v-else v-on="$listeners" :class="className" class="svg-icon" aria-hidden="true">
-        <use :href="iconName"/>
-    </svg>
-</template>
-
-<script>
     import {isExternal} from '@/utils/validate'
 
     export default {
         name: 'SvgIcon',
+        functional: true,
         props: {
             icon: {
                 type: String,
@@ -20,20 +14,26 @@
                 default: ''
             }
         },
-        computed: {
+        render(h, context) {
-            isExternal() {
+            const {listeners} = context
-                return isExternal(this.icon)
+            const {icon, className} = context.props
-            },
+            const c = 'svg-icon ' + (className || '')
-            iconName() {
+            if (isExternal(icon)) {
-                return `#icon-${this.icon}`
+                const style = {
-            },
-            styleExternalIcon() {
-                return {
                     mask: `url(${this.icon}) no-repeat 50% 50%`,
                     '-webkit-mask': `url(${this.icon}) no-repeat 50% 50%`
                 }
+                return <div {...{on: listeners}} class={'svg-external-icon ' + c} style={style}/>
+            }
+            else {
+                const iconName = `#icon-${icon}`
+                return (
+                    <svg {...{on: listeners}} class={c} aria-hidden="true">
+                        <use href={iconName}/>
+                    </svg>
+                )
+            }
         }
-        },
     }
 </script>
 

vue/src/views/index/components/PanelGroup/PanelGroupItem.scss

@@ -1,63 +0,0 @@
-.card-panel {
-    height: 108px;
-    cursor: pointer;
-    font-size: 12px;
-    position: relative;
-    overflow: hidden;
-    color: #666;
-    background: #fff;
-    border-radius: 4px;
-    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
-    border-color: rgba(0, 0, 0, .05);
-
-    &:hover .card-panel-icon-wrapper {
-        color: #fff;
-    }
-
-    .card-panel-icon-wrapper {
-        margin: 14px 0 14px 14px;
-        padding: 16px;
-        transition: all 0.38s ease-out;
-        border-radius: 6px;
-    }
-
-    .card-panel-icon {
-        font-size: 48px;
-    }
-
-    .card-panel-description {
-        font-weight: bold;
-        margin: 26px 20px 0 26px;
-
-        .card-panel-text {
-            line-height: 18px;
-            color: rgba(0, 0, 0, 0.45);
-            font-size: 16px;
-            margin-bottom: 12px;
-        }
-
-        .card-panel-num {
-            font-size: 20px;
-        }
-    }
-}
-
-@media (max-width: 550px) {
-    .card-panel-description {
-        display: none;
-    }
-
-    .card-panel-icon-wrapper {
-        float: none !important;
-        width: 100%;
-        height: 100%;
-        margin: 0 !important;
-
-        .svg-icon {
-            display: block;
-            margin: 14px auto !important;
-            float: none !important;
-        }
-    }
-}

vue/src/views/index/components/PanelGroup/PanelGroupItem.vue

@@ -44,4 +44,69 @@
     }
 </script>
 
-<style lang="scss" src="./PanelGroupItem.scss"></style>
+<style lang="scss">
+    .card-panel {
+        height: 108px;
+        cursor: pointer;
+        font-size: 12px;
+        position: relative;
+        overflow: hidden;
+        color: #666;
+        background: #fff;
+        border-radius: 4px;
+        -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+        border-color: rgba(0, 0, 0, .05);
+
+        &:hover .card-panel-icon-wrapper {
+            color: #fff;
+        }
+
+        .card-panel-icon-wrapper {
+            margin: 14px 0 14px 14px;
+            padding: 16px;
+            transition: all 0.38s ease-out;
+            border-radius: 6px;
+        }
+
+        .card-panel-icon {
+            font-size: 48px;
+        }
+
+        .card-panel-description {
+            font-weight: bold;
+            margin: 26px 20px 0 26px;
+
+            .card-panel-text {
+                line-height: 18px;
+                color: rgba(0, 0, 0, 0.45);
+                font-size: 16px;
+                margin-bottom: 12px;
+            }
+
+            .card-panel-num {
+                font-size: 20px;
+            }
+        }
+    }
+
+    @media (max-width: 550px) {
+        .card-panel-description {
+            display: none;
+        }
+
+        .card-panel-icon-wrapper {
+            float: none !important;
+            width: 100%;
+            height: 100%;
+            margin: 0 !important;
+
+            .svg-icon {
+                display: block;
+                margin: 14px auto !important;
+                float: none !important;
+            }
+        }
+    }
+
+</style>