fr-icon-mask-one.vue 2.6 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <fr-svg @click="onClick" :uuid="`fr-icon-mask-one-${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="M7.36573 16.3443C6.48571 18.7024 6 21.2881 6 23.9998C6 26.7115 6.48571 29.2971 7.36573 31.6552M11.2721 38.1419C12.9301 39.9841 14.91 41.4686 17.1101 42.4823C19.2324 43.4601 21.5595 43.9998 24 43.9998C26.4405 43.9998 28.7676 43.4601 30.8899 42.4823C33.09 41.4686 35.0699 39.9841 36.7279 38.1419M40.6343 31.6552C41.5143 29.2971 42 26.7115 42 23.9998C42 21.2881 41.5143 18.7024 40.6343 16.3443M36.7279 9.85762C35.0699 8.01539 33.09 6.53089 30.8899 5.51723C28.7676 4.53943 26.4405 3.99976 24 3.99976C19.0294 3.99976 14.5294 6.23833 11.2721 9.85762" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linecap="${this.strokeLinecap}"/><path d="M18 22.9998C19.6569 22.9998 21 21.6566 21 19.9998C21 18.3429 19.6569 16.9998 18 16.9998C16.3431 16.9998 15 18.3429 15 19.9998C15 21.6566 16.3431 22.9998 18 22.9998Z" fill="${this.colors(1)}" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}"/><path d="M30 22.9998C31.6569 22.9998 33 21.6566 33 19.9998C33 18.3429 31.6569 16.9998 30 16.9998C28.3431 16.9998 27 18.3429 27 19.9998C27 21.6566 28.3431 22.9998 30 22.9998Z" fill="${this.colors(1)}" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}"/><path d="M24 34.9998C26.7614 34.9998 29 33.6566 29 31.9998C29 30.3429 26.7614 28.9998 24 28.9998C21.2386 28.9998 19 30.3429 19 31.9998C19 33.6566 21.2386 34.9998 24 34.9998Z" fill="${this.colors(1)}" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}"/></svg>`
  32. }
  33. }
  34. }
  35. </script>