fr-icon-spanner.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <fr-svg @click="onClick" :uuid="`fr-icon-spanner-${size}${strokeWidth}${theme}${fill}${strokeLinecap}${strokeLinejoin}`" :width="size" :height="size" :isCache="true" :src="iconSvg" />
  3. </template>
  4. <script>
  5. // #ifdef UNI-APP-X
  6. import icons from "../../mixins/icons.uts";
  7. // #endif
  8. // #ifndef UNI-APP-X
  9. import icons from "../../mixins/icons.js";
  10. // #endif
  11. /**
  12. * @description 《扳手》图标
  13. * @tutorial https://www.flowerui.com/documents/flower-icons/icons.html
  14. * @property {Number} size 图标大小
  15. * @property {Number} strokeWidth 线段粗细
  16. * @property {String} theme 图标大小
  17. * @property {Array} fill 图标颜色,["外部描边颜色","外部填充颜色","内部描边颜色","内部填充颜色"]
  18. * @property {String} strokeLinecap 图标大小
  19. * @property {String} strokeLinejoin 图标大小
  20. * @event {Function} click 图标点击事件
  21. */
  22. export default {
  23. mixins: [icons],
  24. computed: {
  25. // #ifdef UNI-APP-X
  26. iconSvg(): string {
  27. // #endif
  28. // #ifndef UNI-APP-X
  29. iconSvg() {
  30. // #endif
  31. return `<?xml version="1.0" encoding="UTF-8"?><svg width="${this.size}" height="${this.size}" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.4417 5C32.406 5 34.265 5.44776 35.9207 6.24607L32.7172 9.42668C30.8706 11.2601 30.8706 14.2327 32.7172 16.0661C34.5638 17.8995 37.5578 17.8995 39.4044 16.0661L42.2571 13.2337C42.7379 14.5558 43 15.9818 43 17.4685C43 24.3547 37.3775 29.937 30.4417 29.937C28.7825 29.937 27.1985 29.6176 25.7486 29.0373L13.07 41.6253C11.2238 43.4582 8.2307 43.4582 6.38459 41.6253C4.53847 39.7924 4.53847 36.8207 6.38459 34.9877L18.9523 22.5099C18.2651 20.9684 17.8834 19.2627 17.8834 17.4685C17.8834 10.5823 23.5059 5 30.4417 5Z" fill="${this.colors(1)}" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linejoin="${this.strokeLinejoin}"/></svg>`
  32. }
  33. }
  34. }
  35. </script>