index.vue 777 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <svg :class="svgClass" :style="style2" aria-hidden="true">
  3. <use :xlink:href="iconName"></use>
  4. </svg>
  5. </template>
  6. <script>
  7. import { isNumber } from "cl-admin/utils";
  8. export default {
  9. name: "icon-svg",
  10. props: {
  11. name: {
  12. type: String
  13. },
  14. className: {
  15. type: String
  16. },
  17. size: {
  18. type: [String, Number]
  19. }
  20. },
  21. data() {
  22. return {
  23. style2: {}
  24. };
  25. },
  26. computed: {
  27. iconName() {
  28. return `#${this.name}`;
  29. },
  30. svgClass() {
  31. return ["icon-svg", `icon-svg__${this.name}`, this.className];
  32. }
  33. },
  34. mounted() {
  35. this.style2 = {
  36. fontSize: isNumber(this.size) ? this.size + "px" : this.size
  37. };
  38. }
  39. };
  40. </script>
  41. <style>
  42. .icon-svg {
  43. width: 1em;
  44. height: 1em;
  45. vertical-align: -0.15em;
  46. fill: currentColor;
  47. overflow: hidden;
  48. }
  49. </style>