fix: add icon and modify icon style

varletjs · Dec 30, 2020 · 3080c8c · 3080c8c
1 parent 3a68339
commit 3080c8c
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 16 deletions.
diff --git a/packages/varlet-icons/svg/uF002-information.svg b/packages/varlet-icons/svg/uF002-information.svg
diff --git a/packages/varlet-icons/svg/uF003-warning.svg b/packages/varlet-icons/svg/uF003-warning.svg
diff --git a/packages/varlet-icons/svg/uF004-error.svg b/packages/varlet-icons/svg/uF004-error.svg
diff --git a/packages/varlet-ui/src/icon/Icon.vue b/packages/varlet-ui/src/icon/Icon.vue
@@ -2,11 +2,7 @@
 	<i
 		class="var-icon"
 		:class="[`${namespace}--set`, `${namespace}-${nextName}`, tickTransition ? 'var-icon--hidden' : null]"
-		:style="{
-			color: color,
-			'font-size': size,
-			transition: `transform ${transition}ms`,
-		}"
+		:style="{ transition: `transform ${transition}ms` }"
 		v-bind="$attrs"
 	/>
 </template>

diff --git a/packages/varlet-ui/src/icon/icon.less b/packages/varlet-ui/src/icon/icon.less
@@ -1,8 +1,9 @@
 @import "~@varlet/icons/dist/css/varlet-icons.less";
+@import "../styles/var";
 
 .var-icon {
-  font-size: 20px;
-  color: red;
+  font-size: @icon-size-md;
+  color: inherit;
 
   &--hidden {
     transform: scale(0);

diff --git a/packages/varlet-ui/src/icon/props.ts b/packages/varlet-ui/src/icon/props.ts
@@ -2,14 +2,6 @@ export const props = {
 	name: {
 		type: String,
 	},
-	color: {
-		type: String,
-		default: 'inherit',
-	},
-	size: {
-		type: String,
-		default: 'inherit',
-	},
 	namespace: {
 		type: String,
 		default: 'var-icon',

diff --git a/packages/varlet-ui/src/styles/var.less b/packages/varlet-ui/src/styles/var.less
@@ -4,9 +4,15 @@
 @font-size-md: 14px;
 @font-size-lg: 16px;
 
+// 图标
+@icon-size-xs: 16px;
+@icon-size-sm: 18px;
+@icon-size-md: 20px;
+@icon-size-lg: 22px;
+
 //颜色
 @color-primary: #005CAF;
-@color-info: #00BCD4;
+@color-info: #4496ec;
 @color-success: #4CAF50;
 @color-warning: #FB8C00;
 @color-danger: #F44336;