fr-icon-bone.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <fr-svg @click="onClick" :uuid="`fr-icon-bone-${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="M43.5229 17.3147C43.5228 13.072 39.9873 13.072 37.5125 10.5972C35.0376 8.1223 35.0375 4.58669 30.795 4.58674C27.9665 4.58672 25.4916 7.7687 25.4917 9.89005C25.4917 12.0114 26.1988 13.4256 27.613 14.8398L14.8851 27.5677C13.4709 26.1536 12.0566 25.4464 9.93531 25.4464C7.81402 25.4464 4.63195 27.9212 4.632 30.7497C4.2784 35.3458 8.52116 35.3459 10.6424 37.4672C12.7637 39.5885 12.7637 43.8311 17.3599 43.4776C20.1883 43.4776 22.6633 40.2957 22.6632 38.1743C22.6632 36.0529 21.9562 34.6388 20.5419 33.2246L33.2698 20.4966C34.684 21.9109 36.0983 22.618 38.2196 22.618C40.3409 22.618 43.5229 20.143 43.5229 17.3147Z" stroke="${this.colors(0)}" stroke-width="${this.strokeWidth}" stroke-linejoin="${this.strokeLinejoin}"/></svg>`
  32. }
  33. }
  34. }
  35. </script>