fr-icon-cell.vue 3.2 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <fr-svg @click="onClick" :uuid="`fr-icon-cell-${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="M28.4165 21.8466C28.2998 24.4327 28.9576 26.2456 30.3899 27.2851C32.5385 28.8445 37.8372 29.0273 42.0342 21.8466C46.2313 14.6658 42.1598 10.7653 40.6133 10.1148C39.5823 9.68111 38.546 9.51854 37.5044 9.62707" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}"/><path d="M31.0138 28.0061C29.7932 29.4196 29.6591 31.1176 30.6115 33.1C32.0401 36.0735 35.6988 35.5388 37.5277 38.0157C38.747 39.6671 39.2088 41.3285 38.9132 43" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.50434 23.6397C10.7641 26.6609 16.1663 27.0551 22.5 24.6306C25.0645 23.649 27.7817 22.2052 30.5049 20.2867C32.5577 18.8404 34.0451 17.3644 35.0919 15.92C38.8633 10.716 36.9159 5.92222 35.0919 4.40635C33.1156 2.76399 29.322 2.08888 22.5 5.03345C21.2777 5.56103 19.9582 6.20481 18.5345 6.98005C15.7374 8.50312 13.4336 10.2232 11.6622 11.9999C7.4997 16.1749 6.27733 20.6622 8.50434 23.6397Z" fill="${this.colors(1)}" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}"/><path d="M16.2451 8.83911C16.6842 11.7889 17.9165 14.368 19.9419 16.5764C21.9673 18.7848 24.3883 20.195 28 21.4999" stroke="${this.colors(2)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}"/><path d="M9.98149 24.9998C4.15571 30.6503 2.58552 34.9286 5.27092 37.8346C9.29902 42.1936 13.0878 36.6267 18.1666 36.6267C21.5524 36.6267 24.1636 38.751 26 42.9998" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}"/><path d="M35.0919 15.9199C34.0451 17.3643 32.5577 18.8403 30.5049 20.2866C27.7817 22.2052 25.0645 23.6489 22.5 24.6306" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}"/><path d="M22.4999 5.03345C21.2776 5.56103 19.9581 6.20481 18.5344 6.98004C15.7374 8.50312 13.4335 10.2232 11.6621 11.9999" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}"/></svg>`
  32. }
  33. }
  34. }
  35. </script>