[TOC] #### Vue icon 组件 ~~~ <template> <span class="support-ico" :class="iconCls"></span> </template> <script type="text/ecmascript-6"> export default { name: "SupportIco", props: { size: String, type: String }, computed: { iconCls() { const classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'] return `icon-${this.size} ${classMap[this.type]}` } } } </script> <style lang="stylus" rel="stylesheet/stylus" scoped> .support-ico display inline-block &.icon-1 width 12px height 12px &.decrease background url('decrease_1@2x.png') no-repeat center center / 12px 12px &.discount background url('discount_1@2x.png') no-repeat center center / 12px 12px &.special background url('special_1@2x.png') no-repeat center center / 12px 12px &.invoice background url('invoice_1@2x.png') no-repeat center center / 12px 12px &.guarantee background url('guarantee_1@2x.png') no-repeat center center / 12px 12px &.icon-2 width 16px height 16px &.decrease background url('decrease_2@2x.png') no-repeat center center / 16px 16px &.discount background url('discount_2@2x.png') no-repeat center center / 16px 16px &.special background url('special_2@2x.png') no-repeat center center / 16px 16px &.invoice background url('invoice_2@2x.png') no-repeat center center / 16px 16px &.guarantee background url('guarantee_2@2x.png') no-repeat center center / 16px 16px &.icon-3 width 12px height 12px &.decrease background url('decrease_3@2x.png') no-repeat center center / 12px 12px &.discount background url('discount_3@2x.png') no-repeat center center / 12px 12px &.special background url('special_3@2x.png') no-repeat center center / 12px 12px &.invoice background url('invoice_3@2x.png') no-repeat center center / 12px 12px &.guarantee background url('guarantee_3@2x.png') no-repeat center center / 12px 12px </style> ~~~