| huibing.xie | 1f1606f | 2018-08-20 15:46:55 +0800 | [diff] [blame^] | 1 | <template> |
| 2 | <svg :class="svgClass" aria-hidden="true"> | ||||
| 3 | <use :xlink:href="iconName"></use> | ||||
| 4 | </svg> | ||||
| 5 | </template> | ||||
| 6 | |||||
| 7 | <script> | ||||
| 8 | export default { | ||||
| 9 | name: 'svg-icon', | ||||
| 10 | props: { | ||||
| 11 | iconClass: { | ||||
| 12 | type: String, | ||||
| 13 | required: true | ||||
| 14 | }, | ||||
| 15 | className: { | ||||
| 16 | type: String | ||||
| 17 | } | ||||
| 18 | }, | ||||
| 19 | computed: { | ||||
| 20 | iconName() { | ||||
| 21 | return `#icon-${this.iconClass}` | ||||
| 22 | }, | ||||
| 23 | svgClass() { | ||||
| 24 | if (this.className) { | ||||
| 25 | return 'svg-icon ' + this.className | ||||
| 26 | } else { | ||||
| 27 | return 'svg-icon' | ||||
| 28 | } | ||||
| 29 | } | ||||
| 30 | } | ||||
| 31 | } | ||||
| 32 | </script> | ||||
| 33 | |||||
| 34 | <style scoped> | ||||
| 35 | .svg-icon { | ||||
| 36 | width: 1em; | ||||
| 37 | height: 1em; | ||||
| 38 | vertical-align: -0.15em; | ||||
| 39 | fill: currentColor; | ||||
| 40 | overflow: hidden; | ||||
| 41 | } | ||||
| 42 | </style> | ||||