Newer
Older
KaiFengPC / src / components / SvgIcon / index.vue
@zhangdeliang zhangdeliang on 23 May 912 bytes 初始化项目
  1. <template>
  2. <svg :class="svgClass" aria-hidden="true">
  3. <use :xlink:href="iconName" :fill="color" />
  4. </svg>
  5. </template>
  6.  
  7. <script>
  8. export default defineComponent({
  9. props: {
  10. iconClass: {
  11. type: String,
  12. required: true,
  13. },
  14. className: {
  15. type: String,
  16. default: '',
  17. },
  18. color: {
  19. type: String,
  20. default: '',
  21. },
  22. },
  23. setup(props) {
  24. return {
  25. iconName: computed(() => `#icon-${props.iconClass}`),
  26. svgClass: computed(() => {
  27. if (props.className) {
  28. return `svg-icon ${props.className}`;
  29. }
  30. return 'svg-icon';
  31. }),
  32. };
  33. },
  34. });
  35. </script>
  36.  
  37. <style scope lang="scss">
  38. .sub-el-icon,
  39. .nav-icon {
  40. display: inline-block;
  41. font-size: 15px;
  42. margin-right: 12px;
  43. position: relative;
  44. }
  45.  
  46. .svg-icon {
  47. width: 1em;
  48. height: 1em;
  49. position: relative;
  50. fill: currentColor;
  51. vertical-align: -2px;
  52. }
  53. </style>