Skip to content

Commit ec1da27

Browse files
xingyan95xingyan95
authored
feat: 组件内置图标替换成细图标 (#1805)
1 parent f0432c9 commit ec1da27

File tree

22 files changed

+277
-105
lines changed

22 files changed

+277
-105
lines changed

‎packages/devui-vue/devui/carousel/src/carousel.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineComponent, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment, toRefs } from 'vue';
22
import type { VNode } from 'vue';
33
import { carouselProps, DotTrigger, CarouselProps } from './types';
4-
import { Icon } from '@devui/shared/components/icon';
4+
import { CarouselArrowLeft, CarouselArrowRight } from './components/carousel-icons';
55
import { useNamespace } from '@devui/shared/utils';
66
import './carousel.scss';
77

@@ -182,10 +182,10 @@ export default defineComponent({
182182
{arrowTrigger.value !== 'never' && showArrow.value ? (
183183
<div class={ns.e('arrow')}>
184184
<button class="arrow-left" onClick={() => prev()}>
185-
<Icon name="arrow-left" />
185+
<CarouselArrowLeft />
186186
</button>
187187
<button class="arrow-right" onClick={() => next()}>
188-
<Icon name="arrow-right" />
188+
<CarouselArrowRight />
189189
</button>
190190
</div>
191191
) : null}

‎packages/devui-vue/devui/carousel/src/components/carousel-icons.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export function CarouselArrowLeft(): JSX.Element {
2+
return (
3+
<svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
4+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5+
<polygon
6+
fill="#293040"
7+
fill-rule="nonzero"
8+
points="10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"></polygon>
9+
</g>
10+
</svg>
11+
);
12+
}
13+
14+
export function CarouselArrowRight(): JSX.Element {
15+
return (
16+
<svg width="18px" height="18px" viewBox="0 0 16 16" version="1.1">
17+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
18+
<polygon
19+
fill="#293040"
20+
fill-rule="nonzero"
21+
transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) "
22+
points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"></polygon>
23+
</g>
24+
</svg>
25+
);
26+
}

‎packages/devui-vue/devui/cascader/src/cascader.scss

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,28 @@
2424
}
2525

2626
&__close {
27-
cursor: pointer;
27+
.close-icon-container {
28+
width: 14px;
29+
height: 14px;
30+
line-height: 14px;
31+
cursor: pointer;
32+
33+
svg {
34+
width: 14px;
35+
height: 14px;
36+
37+
path {
38+
fill: $devui-shape-icon-fill;
39+
transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;
40+
}
41+
42+
&:hover {
43+
path {
44+
fill: $devui-shape-icon-fill-hover;
45+
}
46+
}
47+
}
48+
}
2849
}
2950

3051
&__disbaled {
@@ -46,6 +67,9 @@
4667
}
4768

4869
&--drop-icon-animation {
70+
svg path {
71+
fill: $devui-text;
72+
}
4973
transition: transform 0.2s linear;
5074
}
5175

@@ -83,7 +107,7 @@
83107
}
84108

85109
.#{$devui-prefix}-cascader__dropdown--open {
86-
.#{$devui-prefix}-cascader--drop-icon-animation {
110+
.#{$devui-prefix}-cascader__icon {
87111
transform: rotate(180deg);
88112
}
89113
}

‎packages/devui-vue/devui/cascader/src/cascader.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { FlexibleOverlay, Placement } from '../../overlay';
99
import { PopperTrigger } from '../../shared/components/popper-trigger';
1010
import { POPPER_TRIGGER_TOKEN } from '../../shared/components/popper-trigger/src/popper-trigger-types';
1111
import DInput from '../../input/src/input';
12+
import { SelectArrowIcon, InputClearIcon } from '../../svg-icons';
1213
import './cascader.scss';
1314

1415
export default defineComponent({
@@ -66,12 +67,14 @@ export default defineComponent({
6667
)}
6768
{!showClearable.value && (
6869
<div class={`${ns.e('icon')} ${ns.m('drop-icon-animation')}`}>
69-
<d-icon name="select-arrow" size="12px"></d-icon>
70+
<SelectArrowIcon />
7071
</div>
7172
)}
7273
{showClearable.value && props.clearable && (
7374
<div class={`${ns.e('icon')} ${ns.e('close')}`} onClick={clearData}>
74-
<d-icon name="close" size="12px"></d-icon>
75+
<div class="close-icon-container">
76+
<InputClearIcon />
77+
</div>
7578
</div>
7679
)}
7780
</div>
@@ -103,15 +106,17 @@ export default defineComponent({
103106
)}
104107
{props.filterable && isSearching.value && (
105108
<div class={ns.e('panel')}>
106-
{suggestionsList.value.length === 0
107-
? <label style="font-weight: bold;">没有数据</label>
108-
: suggestionsList.value.map((item) => {
109+
{suggestionsList.value.length === 0 ? (
110+
<label style="font-weight: bold;">没有数据</label>
111+
) : (
112+
suggestionsList.value.map((item) => {
109113
return (
110114
<div class={ns.e('suggest-list')} onClick={() => chooseSuggestion(cloneDeep(item))}>
111115
{item.labelsString}
112116
</div>
113117
);
114-
})}
118+
})
119+
)}
115120
</div>
116121
)}
117122
</div>

‎packages/devui-vue/devui/collapse/src/collapse-item.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { defineComponent, computed, inject, Transition, onMounted, shallowRef } from 'vue';
22
import { collapseItemProps } from './collapse-types';
33
import { useNamespace } from '@devui/shared/utils';
4-
import OpenIcon from './collapse-open-icon';
4+
import { SelectArrowIcon } from '../../svg-icons';
55
import { SELECT_TOKEN } from './const';
66

77
export default defineComponent({
@@ -65,7 +65,7 @@ export default defineComponent({
6565
onClick={handlerTitleClick}>
6666
{ctx.slots.title ? ctx.slots.title() : props.title}
6767
<span class={ns.e('open-icon')}>
68-
<OpenIcon />
68+
<SelectArrowIcon />
6969
</span>
7070
</div>
7171
<Transition name={transitionNs.b()} onEnter={enter} onLeave={leave}>

‎packages/devui-vue/devui/icon/src/icon-types.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ export const iconProps = {
55
name: {
66
type: String,
77
default: '',
8-
required: true,
98
},
109
size: {
1110
type: [Number, String],

‎packages/devui-vue/devui/input/src/input.scss

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,23 @@
4949
}
5050

5151
&--sm {
52-
height: $devui-size-sm;
52+
height: 26px;
5353
font-size: $devui-font-size-sm;
54+
55+
.#{$devui-prefix}-input__clear--icon {
56+
width: 14px;
57+
height: 14px;
58+
}
5459
}
5560

5661
&--lg {
57-
height: $devui-size-lg;
62+
height: 46px;
5863
font-size: $devui-font-size-lg;
64+
65+
.#{$devui-prefix}-input__clear--icon {
66+
width: 18px;
67+
height: 18px;
68+
}
5969
}
6070

6171
&--feedback {
@@ -163,6 +173,19 @@
163173
cursor: pointer;
164174
}
165175

176+
&__clear--icon {
177+
path {
178+
fill: $devui-shape-icon-fill;
179+
transition: all $devui-animation-ease-in-out-smooth $devui-animation-duration-slow;
180+
}
181+
182+
&:hover {
183+
path {
184+
fill: $devui-shape-icon-fill-hover;
185+
}
186+
}
187+
}
188+
166189
&--gray-style:not(.#{$devui-prefix}-input--disabled) {
167190
.#{$devui-prefix}-input__wrapper:not(.#{$devui-prefix}-input--error) {
168191
background: $devui-gray-5;

‎packages/devui-vue/devui/input/src/input.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { AutoFocus } from '../../auto-focus';
55
import { inputProps, InputProps } from './input-types';
66
import { FORM_ITEM_TOKEN, FormItemContext } from '../../form/src/components/form-item/form-item-types';
77
import { useNamespace } from '@devui/shared/utils';
8+
import { InputClearIcon } from '../../svg-icons';
89
import { useInputRender } from './composables/use-input-render';
910
import { useInputEvent } from './composables/use-input-event';
1011
import { useInputFunction } from './composables/use-input-function';
@@ -101,9 +102,7 @@ export default defineComponent({
101102
onClick={clickPasswordIcon}
102103
/>
103104
)}
104-
{showClearable.value && (
105-
<Icon size={inputSize.value} class={ns.em('clear', 'icon')} name="error-o" color="#adb0b8" onClick={onClear} />
106-
)}
105+
{showClearable.value && <InputClearIcon class={ns.em('clear', 'icon')} onClick={onClear} />}
107106
</span>
108107
)}
109108
</div>

‎packages/devui-vue/devui/modal/src/components/modal-icons.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export function CloseIcon(): JSX.Element {
2+
return (
3+
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
4+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5+
<path
6+
d={`M14.6887175,1.25368865 C15.0770801,1.64205125 15.0121881,2.34244569 14.544513,2.81012074 L9.383,7.971 L14.544513,13.1322854
7+
C14.9787827,13.5665551 15.0657548,14.2014859 14.7650189,14.6009195 L14.6887175,14.6887175 C14.3003549,15.0770801
8+
13.5999604,15.0121881 13.1322854,14.544513 L13.1322854,14.544513 L7.971,9.383 L2.81012075,14.544513 C2.3424457,15.0121881
9+
1.64205125,15.0770801 1.25368865,14.6887175 C0.865326051,14.3003549 0.930218063,13.5999605 1.39789313,13.1322854 L6.558,7.971
10+
L1.39789311,2.81012074 C0.963623424,2.37585105 0.876651354,1.74092026 1.17738727,1.34148668 L1.25368865,1.25368865
11+
C1.64205125,0.865326051 2.34244569,0.930218063 2.81012074,1.39789311 L2.81012074,1.39789311 L7.971,6.558 L13.1322854,1.39789311
12+
C13.5999605,0.930218063 14.3003549,0.865326051 14.6887175,1.25368865 Z`}
13+
fill="#8A8E99"
14+
fill-rule="nonzero"
15+
></path>
16+
</g>
17+
</svg>
18+
);
19+
}

‎packages/devui-vue/devui/modal/src/modal.scss

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
top: 50%;
66
left: 50%;
77
width: 300px;
8-
border-radius: $devui-border-radius;
8+
border-radius: $devui-border-radius-card;
99
border: none;
1010
opacity: 1;
1111
transform: translate(-50%, -50%);
@@ -17,26 +17,14 @@
1717

1818
.btn-close {
1919
position: absolute;
20-
right: 16px;
21-
top: 20px;
22-
width: 20px;
23-
height: 20px;
24-
line-height: 20px;
25-
text-align: center;
26-
cursor: pointer;
27-
background: transparent;
28-
border: 0;
20+
right: 20px;
21+
top: 18px;
2922
-webkit-appearance: none;
23+
z-index: calc(var(--devui-z-index-modal, 1050) + 1);
3024

31-
&:hover {
32-
color: $devui-icon-fill-active-hover;
33-
background-color: $devui-list-item-hover-bg;
34-
}
35-
36-
& i {
37-
position: absolute;
38-
right: 0;
39-
top: 0;
25+
.#{$devui-prefix}-icon__container {
26+
display: inline-flex;
27+
align-items: center;
4028
}
4129
}
4230

@@ -70,12 +58,17 @@
7058

7159
.#{$devui-prefix}-modal__header {
7260
width: 100%;
73-
height: 56px;
61+
height: 46px;
62+
line-height: 26px;
7463
padding: 20px 20px 0;
75-
font-size: $devui-font-size-card-title;
64+
font-size: $devui-font-size-modal-title;
7665
font-weight: bold;
66+
letter-spacing: 0;
7767
box-sizing: border-box;
78-
border: none;
68+
overflow: hidden;
69+
text-overflow: ellipsis;
70+
white-space: nowrap;
71+
user-select: none;
7972

8073
.header-alert-icon {
8174
display: inline-block;
@@ -100,7 +93,7 @@
10093
padding: 0 32px 24px;
10194
box-sizing: border-box;
10295

103-
& > * {
96+
&>* {
10497
margin: 0 4px;
10598
}
10699
}
@@ -119,4 +112,4 @@
119112
opacity: 0.2;
120113
top: calc(50% - 24px);
121114
}
122-
}
115+
}

0 commit comments

Comments
 (0)