feat-iconify组件

src/App.vue

@@ -21,7 +21,5 @@
   });
 </script>
 <style lang="scss">
-  page {
+  @import '@/assets/main.scss';
-    background-color: #f2f2f2;
-  }
 </style>

src/assets/main.scss

@@ -0,0 +1,69 @@
+view,
+scroll-view,
+swiper,
+match-media,
+movable-area,
+movable-view,
+cover-view,
+cover-image,
+icon,
+text,
+rich-text,
+progress,
+button,
+checkboxe,
+ditor,
+form,
+input,
+label,
+picker,
+picker-view,
+radio,
+slider,
+switch,
+textarea,
+navigator,
+audio,
+camera,
+image,
+video,
+live-player,
+live-pusher,
+map,
+canvas,
+web-view,
+:before,
+:after {
+  box-sizing: border-box;
+}
+
+/* 隐藏scroll-view的滚动条 */
+::-webkit-scrollbar {
+  display: none;
+  width: 0 !important;
+  height: 0 !important;
+  -webkit-appearance: none;
+  background: transparent;
+}
+
+// 超出省略,最多5行
+@for $i from 1 through 5 {
+  .text-ellipsis-#{$i} {
+    // vue下，单行和多行显示省略号需要单独处理
+    @if $i == '1' {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    } @else {
+      display: -webkit-box !important;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      -webkit-line-clamp: $i;
+      -webkit-box-orient: vertical !important;
+    }
+  }
+}
+page {
+  background-color: #f2f2f2;
+}

src/components/Iconify/index.vue

@@ -1,20 +1,42 @@
 <script lang="ts" setup name="Iconify">
+  import { computed, ref, unref } from 'vue';
+  import { assign } from 'lodash-es';
+
   const props = defineProps({
     icon: {
       type: String,
     },
+    size: {
+      type: Number,
+    },
+    color: {
+      type: String,
+    },
+  });
+
+  const iconName = computed(() => {
+    return `i-${props.icon}`;
+  });
+
+  const iconSize = ref<string | boolean>(
+    props.size ? `${props.size}rpx` : false,
+  );
+  const style = computed(() => {
+    return assign(
+      unref(iconSize) ? { size: props.size } : {},
+      props.color ? { color: props.color } : {},
+    );
   });
 </script>
 <template>
-  <view ref="elRef" class="iconify m-iconify i-ph-anchor-simple-thin"></view>
+  <view ref="elRef" :class="['iconify', icon]" :style="style"></view>
 </template>
 <style lang="scss" scoped>
   .iconify {
     display: inline-block;
+    vertical-align: middle;
     height: 44rpx;
     width: 44rpx;
-  }
+    color: inherit;
-  .m-iconify {
-    vertical-align: middle;
   }
 </style>

src/pages/index/index.vue

@@ -33,11 +33,9 @@
       </view>
       <BasicButton @click="handleGetStarted">Get Started → </BasicButton>
       <view class="un-text-red">uno css</view>
-      <Iconify icon="ant-design:login-outlined" />
+      <Iconify icon="i-ph-anchor-simple-thin" />
-      <view
+      <Iconify icon="i-ph-airplane-thin" />
-        class="iconify m-iconify"
+      <Iconify icon="i-ant-design-check-circle-filled" />
-        data-icon="ant-design:login-outlined"
-      ></view>
     </view>
   </AppProvider>
 </template>

src/pagesA/list/test1/index.vue

@@ -8,7 +8,7 @@
   };
 </script>
 <template>
-  <view> Test1 </view>
+  <view class="un-center"> Test1 </view>
   <BasicButton @click="jumpTest2">Test2 → </BasicButton>
 </template>
 <style scoped></style>

src/uni.scss

@@ -1,66 +0,0 @@
-view,
-scroll-view,
-swiper,
-match-media,
-movable-area,
-movable-view,
-cover-view,
-cover-image,
-icon,
-text,
-rich-text,
-progress,
-button,
-checkboxe,
-ditor,
-form,
-input,
-label,
-picker,
-picker-view,
-radio,
-slider,
-switch,
-textarea,
-navigator,
-audio,
-camera,
-image,
-video,
-live-player,
-live-pusher,
-map,
-canvas,
-web-view,
-:before,
-:after {
-  box-sizing: border-box;
-}
-
-/* 隐藏scroll-view的滚动条 */
-::-webkit-scrollbar {
-  display: none;
-  width: 0 !important;
-  height: 0 !important;
-  -webkit-appearance: none;
-  background: transparent;
-}
-
-// 超出省略,最多5行
-@for $i from 1 through 5 {
-  .text-ellipsis-#{$i} {
-    // vue下，单行和多行显示省略号需要单独处理
-    @if $i == '1' {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    } @else {
-      display: -webkit-box !important;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      -webkit-line-clamp: $i;
-      -webkit-box-orient: vertical !important;
-    }
-  }
-}