当前位置:   article > 正文

字体图标转换(芋道框架自带)_iconify.rendersvg

iconify.rendersvg
  1. <script setup lang="ts">
  2. import { computed, unref, ref, watch, nextTick } from 'vue'
  3. import { ElIcon } from 'element-plus'
  4. import { propTypes } from '@/utils/propTypes'
  5. import Iconify from '@purge-icons/generated'
  6. import { useDesign } from '@/hooks/web/useDesign'
  7. const { getPrefixCls } = useDesign()
  8. const prefixCls = getPrefixCls('icon')
  9. const props = defineProps({
  10. // icon name
  11. icon: propTypes.string,
  12. // icon color
  13. color: propTypes.string,
  14. // icon size
  15. size: propTypes.number.def(16)
  16. })
  17. console.log(props, 'propspropspropspropspropsprops')
  18. const elRef = ref<ElRef>(null)
  19. const isLocal = computed(() => props.icon.startsWith('svg-icon:'))
  20. const symbolId = computed(() => {
  21. return unref(isLocal)
  22. ? `#icon-${props.icon.split('svg-icon:')[1]}`
  23. : props.icon.replace('fa-', 'fa:')
  24. })
  25. console.log(isLocal.value, 'isLocal1111')
  26. console.log(symbolId.value, 'symbolId1111')
  27. const getIconifyStyle = computed(() => {
  28. const { color, size } = props
  29. return {
  30. fontSize: `${size}px`,
  31. color
  32. }
  33. })
  34. const updateIcon = async (icon: string) => {
  35. if (unref(isLocal)) return
  36. const el = unref(elRef)
  37. if (!el) return
  38. await nextTick()
  39. if (!icon) return
  40. const svg = Iconify.renderSVG(icon, {})
  41. if (svg) {
  42. el.textContent = ''
  43. el.appendChild(svg)
  44. } else {
  45. const span = document.createElement('span')
  46. span.className = 'iconify'
  47. span.dataset.icon = icon
  48. el.textContent = ''
  49. el.appendChild(span)
  50. }
  51. }
  52. watch(
  53. () => props.icon,
  54. (icon: string) => {
  55. consoel.log(icon, 'iconWatch')
  56. updateIcon(icon)
  57. }
  58. )
  59. </script>
  60. <template>
  61. <ElIcon :class="prefixCls" :size="size" :color="color">
  62. <svg v-if="isLocal" aria-hidden="true">
  63. <use :xlink:href="symbolId" />
  64. </svg>
  65. <span v-else ref="elRef" :class="$attrs.class" :style="getIconifyStyle">
  66. <span class="iconify" :data-icon="symbolId"></span>
  67. </span>
  68. </ElIcon>
  69. </template>
  70. <style scoped>
  71. .el-icon {
  72. vertical-align: middle;
  73. }
  74. </style>

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号