init

uni_modules/nutui-uni/components/icon/icon.ts

@@ -0,0 +1,44 @@
+import type { ExtractPropTypes } from 'vue'
+import { CLICK_EVENT } from '../_constants'
+import { commonProps, makeNumericProp, makeStringProp } from '../_utils'
+
+export const iconProps = {
+  ...commonProps,
+  popClass: { type: String, default: '' },
+  /**
+   * @description 图标宽度
+   */
+  width: makeNumericProp(''),
+  /**
+   * @description 图标高度
+   */
+  height: makeNumericProp(''),
+  /**
+   * @description 图标名称
+   */
+  name: makeStringProp(''),
+  /**
+   * @description 图标大小
+   */
+  size: makeNumericProp(''),
+  /**
+   * @description 自定义 `icon` 类名前缀，用于使用自定义图标
+   */
+  classPrefix: { type: String, default: 'nut-icon' },
+  /**
+   * @description  自定义 `icon` 字体基础类名
+   */
+  fontClassName: { type: String, default: 'nutui-iconfont' },
+  /**
+   * @description 图标颜色
+   */
+  customColor: { type: String, default: '' },
+}
+
+export type IconProps = ExtractPropTypes<typeof iconProps>
+
+export const iconEmits = {
+  [CLICK_EVENT]: (evt: Event) => evt instanceof Object,
+}
+
+export type IconEmits = typeof iconEmits

uni_modules/nutui-uni/components/icon/icon.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, defineComponent } from 'vue'
+import { CLICK_EVENT, PREFIX } from '../_constants'
+import { getMainClass, getMainStyle, pxCheck } from '../_utils'
+import { iconEmits, iconProps } from './icon'
+
+const props = defineProps(iconProps)
+const emits = defineEmits(iconEmits)
+
+function handleClick(event: unknown) {
+  emits(CLICK_EVENT, event as Event)
+}
+
+const isImage = computed(() => {
+  return props.name ? props.name.includes('/') : false
+})
+
+const classes = computed(() => {
+  const obj: Record<string, boolean> = {}
+  if (isImage.value) {
+    obj[`${componentName}__img`] = true
+  }
+  else {
+    obj[props.fontClassName] = true
+    obj[`${props.classPrefix}-${props.name}`] = true
+    obj[props.popClass] = true
+  }
+  return getMainClass(props, componentName, obj)
+})
+
+const getStyle = computed(() => {
+  const style = {
+    color: props.customColor,
+    fontSize: pxCheck(props.size),
+    width: pxCheck(props.width),
+    height: pxCheck(props.height),
+  }
+  return getMainStyle(props, style)
+})
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-icon`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <image
+    v-if="isImage"
+    :class="classes"
+    :style="getStyle"
+    :src="name"
+    @click="handleClick"
+  />
+  <text
+    v-else
+    :class="classes"
+    :style="getStyle"
+    @click="handleClick"
+  />
+</template>
+
+<style lang="scss">
+@import './index';
+</style>

uni_modules/nutui-uni/components/icon/index.scss

@@ -0,0 +1,96 @@
+.nut-icon {
+  position: relative;
+  display: inline-block;
+  width: $icon-width;
+  height: $icon-height;
+  line-height: $icon-line-height;
+  text-align: right;
+
+  --animate-duration: 1s;
+  --animate-delay: 0s;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &__img {
+    width: $icon-width;
+    height: $icon-height;
+    object-fit: contain;
+  }
+
+  &-loading,
+  &-loading1 {
+    display: inline-block;
+    animation: rotation 1s infinite linear;
+  }
+
+  &-am-infinite {
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+
+  &-am-jump {
+    animation-name: nutJumpOne;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      animation-name: nutJump;
+    }
+  }
+
+  &-am-rotate {
+    animation-name: rotation;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: linear;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      animation-direction: normal;
+    }
+  }
+
+  &-am-blink {
+    animation-name: nutBlink;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: linear;
+    animation-delay: var(--animate-delay);
+  }
+
+  &-am-breathe {
+    animation-name: nutBreathe;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+  }
+
+  &-am-flash {
+    animation-name: nutFlash;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+  }
+
+  &-am-bounce {
+    animation-name: nutBounce;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+
+    &.nut-icon-am-infinite {
+      animation-direction: normal;
+    }
+  }
+
+  &-am-shake {
+    animation-name: nutShake;
+    animation-duration: var(--animate-duration);
+    animation-timing-function: ease-in-out;
+    animation-delay: var(--animate-delay);
+  }
+}

uni_modules/nutui-uni/components/icon/index.ts

@@ -0,0 +1 @@
+export type * from './icon'