fr-icon-round-caliper.vue 3.0 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <fr-svg @click="onClick" :uuid="`fr-icon-round-caliper-${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="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}" stroke-linejoin="${this.strokeLinejoin}"/><path d="M24 28C26.2091 28 28 26.2091 28 24C28 21.7909 26.2091 20 24 20C21.7909 20 20 21.7909 20 24C20 26.2091 21.7909 28 24 28Z" fill="${this.colors(1)}" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}" stroke-linejoin="${this.strokeLinejoin}"/><path d="M43.9998 24C43.9998 27.3688 43.1489 30.683 41.5259 33.6351C39.903 36.5872 37.5607 39.0815 34.7163 40.8866L30.4297 34.1319C32.1363 33.0489 33.5417 31.5523 34.5155 29.781C35.4892 28.0098 35.9998 26.0213 35.9998 24H43.9998Z" fill="${this.colors(1)}" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}" stroke-linejoin="${this.strokeLinejoin}"/><path d="M13.4231 40.9745C10.5639 39.193 8.20111 36.7181 6.55386 33.7795C4.90661 30.8409 4.02832 27.5339 4.00049 24.1652L12.0002 24.0991C12.0169 26.1203 12.5439 28.1046 13.5322 29.8677C14.5206 31.6309 15.9383 33.1158 17.6538 34.1847L13.4231 40.9745Z" fill="${this.colors(1)}" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}" stroke-linejoin="${this.strokeLinejoin}"/><path d="M14.4424 6.43161C17.4016 4.8217 20.7195 3.98536 24.0883 4.00019C27.457 4.01503 30.7674 4.88055 33.7123 6.51646L29.8275 13.5099C28.0605 12.5283 26.0743 12.009 24.053 12.0001C22.0318 11.9912 20.041 12.493 18.2655 13.459L14.4424 6.43161Z" fill="${this.colors(1)}" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}" stroke-linejoin="${this.strokeLinejoin}"/></svg>`
  32. }
  33. }
  34. }
  35. </script>