cl-icon.vue 720 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <text
  3. :class="['cl-icon', `cl-icon-${name2}`]"
  4. :style="{
  5. fontSize: parseRpx(size),
  6. color,
  7. }"
  8. ></text>
  9. </template>
  10. <script>
  11. import { isNumber, parseRpx } from "../../utils";
  12. /**
  13. * icon 图标
  14. * @description 字体图标
  15. * @tutorial https://docs.cool-js.com/uni/components/basic/icon.html
  16. * @property {String} name 图标名称
  17. * @property {String, Number} size 图标大小
  18. * @property {String} color 图标颜色
  19. * @example <cl-icon name="search" />
  20. */
  21. export default {
  22. name: "cl-icon",
  23. props: {
  24. name: String,
  25. size: [String, Number],
  26. color: String,
  27. },
  28. computed: {
  29. name2() {
  30. return this.name.replace("cl-icon-", "");
  31. },
  32. },
  33. methods: {
  34. parseRpx,
  35. },
  36. };
  37. </script>