apply-assistant-v3/pages/NEUIKit/components/Icon.vue

<template>
  <view :class="className" :style="iconStyle">
    <!-- #ifdef APP-PLUS -->
    <image
      :src="_url"
      :style="{
        width: (width || size) + 'px',
        height: (height || size) + 'px',
      }"
      class="icon"
    />
    <!-- #endif -->
    <!-- #ifndef APP-PLUS -->
    <img
      :src="_url"
      :style="{
        width: (width || size) + 'px',
        height: (height || size) + 'px',
      }"
      class="icon"
    />
    <!-- #endif -->
  </view>
</template>

<script lang="ts" setup>
// svg 解决方案参考：https://github.com/iconfont-cli/mini-program-iconfont-cli/tree/master
import { computed, defineProps, withDefaults } from '../utils/transformVue'
const props = withDefaults(
  defineProps<{
    type: string
    size?: number
    width?: number
    height?: number
    iconClassName?: string
    iconStyle?: any
  }>(),
  {
    size: 16,
  }
)
const urlMap = {
  'icon-yanzheng':
  'https://yx-web-nosdn.netease.im/common/5a0c2769626284ff646298a7ef1f66c2/icon-yanzheng.png',
  'icon-lahei2':
  'https://yx-web-nosdn.netease.im/common/1ee2a3bffb33b81727583189a2562658/icon-lahei2.png',
  'icon-xiaoximiandarao':
  'https://yx-web-nosdn.netease.im/common/1c92731bb3fa91fa3fc5ff45bf9e4dbe/icon-xiaoximiandarao.png',
  'icon-read':
  'https://matripe-cms.oss-cn-beijing.aliyuncs.com/bocaigongyinglian/wyyx_check_0514.svg',
}

//以上链接访问有频率控制，建议您将静态放到您服务器上，然后修改上面的链接即可

const _url = computed(() => {
  // @ts-ignore
  return urlMap[props.type]
})

// const prefix = 'https://yiyong-qa.netease.im/yiyong-static/statics/uniapp-vue2-h5'
// const url = computed(() => {
//   return `${prefix}/static/icons/${props.type}.png`
// })

const className = `${props.iconClassName || ''} icon-wrapper`
</script>

<style scoped lang="scss">
.icon-wrapper {
  display: inline-block;
  line-height: 0;
}

.icon {
  display: inline-block;
  vertical-align: middle;
}
</style>