app-icon.tsx 2.0 KB
Newer Older
1 2 3 4
import { IPSSysImage } from '@ibiz-template/model';
import { useNamespace } from '@ibiz-template/vue-util';
import { defineComponent, PropType, VNode, computed } from 'vue';
import '@ibiz-template/theme/style/components/common/app-icon/app-icon.scss';
5
import { renderCompatibleIE } from '../../../ie-util';
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

export const AppIcon = defineComponent({
  name: 'AppIcon',
  props: {
    icon: {
      type: Object as PropType<IPSSysImage>,
    },
    size: {
      type: String as PropType<'small' | 'medium' | 'large'>,
    },
  },
  setup(props) {
    const ns = useNamespace('icon');
    const BaseUrl = `${ibiz.env.assetsUrl}/img/`;

    function getContent(icon?: IPSSysImage): VNode | null {
      if (icon) {
        if (icon.cssClass) {
          if (icon.cssClass.indexOf('fa-') !== -1) {
            return <i class={[ns.b(), icon.cssClass]} />;
          }
27 28 29
          return renderCompatibleIE(() => {
            <ion-icon class={ns.b()} name={icon.cssClass}></ion-icon>;
          });
30 31
        }
        if (icon.imagePath) {
32 33 34 35
          const prefixUrl =
            icon.imagePath.startsWith('./') || icon.imagePath.startsWith('/')
              ? ''
              : BaseUrl;
36 37
          if (icon.imagePath.endsWith('svg')) {
            if (icon.imagePath.startsWith('http')) {
38 39 40
              return renderCompatibleIE(() => {
                <ion-icon class={ns.b()} src={icon.imagePath}></ion-icon>;
              });
41
            }
42 43

            return renderCompatibleIE(() => (
44
              <ion-icon
45
                src={prefixUrl + icon.imagePath}
46 47
                class={ns.b()}
              ></ion-icon>
48
            ));
49 50 51 52
          }
          if (icon.imagePath.startsWith('http')) {
            return <img class={ns.b()} src={icon.imagePath} />;
          }
53
          return <img class={ns.b()} src={prefixUrl + icon.imagePath} />;
54 55 56 57 58 59 60 61 62 63 64 65 66
        }
      }
      return null;
    }

    const content = computed<VNode | null>(() => {
      return getContent(props.icon);
    });

    return () => content.value;
  },
});
export default AppIcon;