将一些 font icon 改成 svg icon

This commit is contained in:
2betop 2020-06-08 15:49:45 +08:00
parent e40d8a51f2
commit ad7b29d3f4
38 changed files with 269 additions and 139 deletions

View File

@ -569,8 +569,8 @@ $QuickEdit-onFocus-borderColor: $info !default;
$QuickEdit-onFocus-borderWidth: $borderWidth !default;
// Copyable
$Copyable-iconColor: inherit !default;
$Copyable-onHover-iconColor: inherit !default;
$Copyable-iconColor: $icon-color !default;
$Copyable-onHover-iconColor: $icon-onHover-color !default;
// PopOverAble
$PopOverAble-iconColor: inherit !default;
@ -1042,15 +1042,6 @@ $DatePicker-placeholderColor: $Form-input-placeholderColor !default;
$DatePicker-iconColor: $icon-color !default;
$DatePicker-onHover-iconColor: $icon-onHover-color !default;
$DatePicker-onFocused-borderColor: $Form-input-onFocused-borderColor !default;
$DatePicker-toggler-vendor: 'FontAwesome' !default;
$DatePicker-toggler-fontSize: $Form-fontSize !default;
$DatePicker-toggler-icon: '\f073' !default;
$DatePicker-prevBtn-vendor: 'FontAwesome' !default;
$DatePicker-prevBtn-fontSize: $fontSizeMd !default;
$DatePicker-prevBtn-icon: '\f104' !default;
$DatePicker-nextBtn-vendor: 'FontAwesome' !default;
$DatePicker-nextBtn-fontSize: $fontSizeMd !default;
$DatePicker-nextBtn-icon: '\f105' !default;
$DatePicker-header-select-borderColor: #fff !default;
$Calendar-fontSize: $fontSizeBase !default;

View File

@ -347,3 +347,7 @@ svg.icon {
position: relative;
fill: currentColor;
}
svg.r90 {
transform: rotate(90deg);
}

View File

@ -276,7 +276,7 @@ fieldset:disabled a.#{$ns}Button {
min-width: $Button-height * $Button--iconOnly-minWidthRate;
&:not(.#{$ns}Button--link) {
> svg {
> svg.icon {
width: px2rem(14px);
height: px2rem(14px);
top: px2rem(2px);

View File

@ -62,7 +62,8 @@
}
&-dragTip {
color: $text--loud-color;
width: 100%;
color: $info;
clear: both;
margin-top: $gap-xs;
}
@ -130,7 +131,7 @@
.#{$ns}Cards-toolbar {
display: flex;
flex-wrap: nowrap;
flex-wrap: wrap;
}
}

View File

@ -4,6 +4,12 @@
&-caret {
margin-left: $DropDown-caret-marginLeft;
> svg {
width: px2rem(10px);
height: px2rem(10px);
top: 0.125em;
}
}
&--block {

View File

@ -8,7 +8,7 @@
&-toolbar {
@include clearfix();
display: flex;
flex-wrap: nowrap;
flex-wrap: wrap;
padding: $List-toolbar-paddingY $List-toolbar-paddingX;
}
@ -69,7 +69,8 @@
}
&-dragTip {
color: $text--loud-color;
width: 100%;
color: $info;
clear: both;
margin-top: $gap-xs;
}
@ -155,7 +156,7 @@
}
&-dragBtn {
cursor: pointer;
cursor: move;
float: left;
margin-right: $gap-sm;
}

View File

@ -1,8 +1,13 @@
.#{$ns}Nav {
list-style: none;
user-select: none;
margin: 0;
padding: 0;
.#{$ns}Nav-itemIcon {
margin-right: $gap-xs;
}
&--tabs {
border-bottom: $Tabs-borderWidth solid $Tabs-borderColor;
@ -46,10 +51,6 @@
border-bottom-color: $Tabs-content-bg;
}
}
.#{$ns}Nav-itemIcon {
margin-right: $gap-xs;
}
}
&--stacked {
@ -111,6 +112,12 @@
cursor: pointer;
transform: scale(0.8);
transition: transform 0.3s;
> svg {
width: 10px;
height: 10px;
top: 0;
}
}
.#{$ns}Nav-subItems {

View File

@ -34,7 +34,7 @@
}
}
> li.disabled {
> li.is-disabled {
> span,
> a {
cursor: not-allowed;
@ -50,7 +50,7 @@
}
}
> li.active {
> li.is-active {
> a,
> span,
> a:hover,

View File

@ -22,6 +22,11 @@
}
&-addBtn {
> svg {
width: $Combo-addBtn-fontSize;
height: $Combo-addBtn-fontSize;
}
font-size: $Combo-addBtn-fontSize;
@include button-size(

View File

@ -60,15 +60,6 @@
&:hover {
color: $DatePicker-onHover-iconColor;
}
&:before {
line-height: 1;
color: inherit;
content: $DatePicker-toggler-icon;
display: inline-block;
font-size: $DatePicker-toggler-fontSize;
font-family: $DatePicker-toggler-vendor;
}
}
&-clear {
@ -303,18 +294,6 @@
line-height: 1;
}
.rdtBtnPrev:before {
font-family: $DatePicker-prevBtn-vendor;
font-size: $DatePicker-prevBtn-fontSize;
content: $DatePicker-prevBtn-icon;
}
.rdtBtnNext:before {
font-family: $DatePicker-nextBtn-vendor;
font-size: $DatePicker-nextBtn-fontSize;
content: $DatePicker-nextBtn-icon;
}
.rdtPrev,
.rdtNext {
cursor: pointer !important;

View File

@ -546,7 +546,9 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
</a>
) : null}
<a className={`${ns}DatePicker-toggler`} />
<a className={`${ns}DatePicker-toggler`}>
<Icon icon="calendar" className="icon" />
</a>
{isOpened ? (
<Overlay

View File

@ -27,7 +27,6 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
inputFormat?: string;
ranges?: string | Array<ShortCuts>;
clearable?: boolean;
iconClassName?: string;
minDate?: moment.Moment;
maxDate?: moment.Moment;
joinValues: boolean;
@ -165,7 +164,6 @@ export class DateRangePicker extends React.Component<
clearable: true,
delimiter: ',',
ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
iconClassName: 'fa fa-calendar',
resetValue: '',
closeOnSelect: true,
overlayPlacement: 'auto'
@ -525,7 +523,6 @@ export class DateRangePicker extends React.Component<
timeFormat,
ranges,
disabled,
iconClassName,
locale,
overlayPlacement
} = this.props;
@ -583,7 +580,7 @@ export class DateRangePicker extends React.Component<
) : null}
<a className={`${ns}DateRangePicker-toggler`}>
<i className={iconClassName} />
<Icon icon="calendar" className="icon" />
</a>
{isOpened ? (

View File

@ -75,6 +75,21 @@ import ExchangeIcon from '../icons/exchange.svg';
// @ts-ignore
import ColmunsIcon from '../icons/columns.svg';
// @ts-ignore
import CalendarIcon from '../icons/calendar.svg';
// @ts-ignore
import CopyIcon from '../icons/copy.svg';
// @ts-ignore
import FilterIcon from '../icons/filter.svg';
// @ts-ignore
import CaretIcon from '../icons/caret.svg';
// @ts-ignore
import ColumnFilterIcon from '../icons/column-filter.svg';
// 兼容原来的用法,后续不直接试用。
// @ts-ignore
export const closeIcon = <CloseIcon />;
@ -141,6 +156,11 @@ registerIcon('drag-bar', DragBarIcon);
registerIcon('reload', ReloadIcon);
registerIcon('exchange', ExchangeIcon);
registerIcon('columns', ColmunsIcon);
registerIcon('calendar', CalendarIcon);
registerIcon('copy', CopyIcon);
registerIcon('filter', FilterIcon);
registerIcon('column-filter', ColumnFilterIcon);
registerIcon('caret', CaretIcon);
export function Icon({
icon,

27
src/icons/calendar.svg Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-136.000000, -8.000000)">
<path d="M159.5,0.5 L0.5,0.5 L0.5,29.5 L159.5,29.5 L159.5,0.5 Z" stroke="currentColor">
</path>
<g transform="translate(136.000000, 8.000000)" fill="currentColor" fill-rule="nonzero">
<path d="M0,14 L14,14 L14,3 L0,3 L0,14 Z M2,5 L12,5 L12,12 L2,12 L2,5 Z" id="Shape">
</path>
<rect id="Rectangle-path" x="0" y="0" width="14" height="2">
</rect>
<rect id="Rectangle-path" x="9" y="6" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="9" y="9" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="6" y="6" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="6" y="9" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="3" y="6" width="2" height="2">
</rect>
<rect id="Rectangle-path" x="3" y="9" width="2" height="2">
</rect>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

7
src/icons/caret.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 150 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="caret-down" transform="translate(0.390625, -0.109375)" fill="currentColor" fill-rule="nonzero">
<path d="M145.321875,21.578125 L83.453125,83.446875 C78.5718769,88.3266492 70.6593731,88.3266492 65.778125,83.446875 L3.903125,21.578125 C0.653667694,18.4396941 -0.649532465,13.7921513 0.494410543,9.42178345 C1.63835355,5.05141555 5.05141555,1.63835355 9.42178345,0.494410543 C13.7921513,-0.649532465 18.4396941,0.653667694 21.578125,3.903125 L74.609375,56.934375 L127.640625,3.903125 C132.521441,-0.979417366 140.436208,-0.980816477 145.31875,3.9 C150.201292,8.78081648 150.202691,16.6955826 145.321875,21.578125 Z" id="路径">
</path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 817 B

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g fill="currentColor">
<path d="M0,0 L4,4.999 L4.082,10 L8,12 L8,4.999 L12,0 L0,0 Z M5.0528196,9.05445227 L4.97933146,4.82735426 L4.97320745,4.49967969 L4.75580505,4.24311339 L2,1 L10,1 L7.24419495,4.24311339 L7.02066854,4.50640615 L7.02066854,4.84272902 L7.02066854,10 L5.0528196,9.05445227 Z" id="Page-1">
</path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 582 B

21
src/icons/copy.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<polygon id="path-1" points="0 12 12 12 12 0 0 0">
</polygon>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Page-1">
<polyline id="Stroke-1" stroke="currentColor" points="2.5 9.5 0.5 9.5 0.5 0.5 9.5 0.5 9.5 2.5">
</polyline>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1">
</use>
</mask>
<g id="Clip-4">
</g>
<polygon id="Stroke-3" stroke="currentColor" mask="url(#mask-2)" points="2.5 11.5 11.5 11.5 11.5 2.5 2.5 2.5">
</polygon>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 703 B

7
src/icons/filter.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 150 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill="currentColor" fill-rule="nonzero">
<path d="M58.3333334,100 L91.6666666,100 L91.6666666,83.3333334 L58.3333334,83.3333334 L58.3333334,100 L58.3333334,100 Z M0,0 L0,16.6666666 L150,16.6666666 L150,0 L0,0 Z M25,58.3333334 L125,58.3333334 L125,41.6666666 L25,41.6666666 L25,58.3333334 Z" id="形状">
</path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 492 B

View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M324.211517 511.805631 787.889594 73.082583c16.19422-16.630365 16.19422-43.974704 0-60.605068-16.19422-16.630365-42.495607-16.630365-58.613976 0L235.750113 479.360302c-8.647031 8.969398-12.344775 20.934917-11.719003 32.445329-0.644735 11.90863 3.071972 23.874149 11.719003 32.824585l493.506542 466.882788c16.118369 16.649327 42.438718 16.649327 58.613976 0 16.19422-17.085471 16.19422-43.974704 0-60.605068L324.211517 511.805631" p-id="2160" />
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 577 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="left-arrow" transform="translate(-1.000000, 0.000000)" fill="currentColor" fill-rule="nonzero">
<path d="M101.211517,511.805631 L564.889594,73.082583 C581.083814,56.452218 581.083814,29.107879 564.889594,12.477515 C548.695374,-4.15285 522.393987,-4.15285 506.275618,12.477515 L12.750113,479.360302 C4.103082,488.3297 0.405338,500.295219 1.03111,511.805631 C0.386375,523.714261 4.103082,535.67978 12.750113,544.630216 L506.256655,1011.513 C522.375024,1028.16233 548.695373,1028.16233 564.870631,1011.513 C581.064851,994.427533 581.064851,967.5383 564.870631,950.907936 L101.211517,511.805631" id="路径">
</path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 603 B

After

Width:  |  Height:  |  Size: 798 B

View File

@ -1,9 +1,10 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1585402743083" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2408"
xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
<defs>
<style type="text/css"></style>
</defs>
<path d="M511.968 0c-207.84 0-376.96 169.12-376.96 376.992 0 54.208 11.104 105.984 32.96 153.888 94.24 206.24 274.976 424 328.128 485.824 3.968 4.608 9.792 7.296 15.904 7.296s11.904-2.656 15.904-7.296c53.12-61.824 233.856-279.552 328.128-485.824 21.888-47.904 32.96-99.648 32.96-153.888-0.032-207.872-169.152-376.992-376.992-376.992zM511.968 572.8c-107.968 0-195.808-87.84-195.808-195.808s87.84-195.84 195.808-195.84 195.808 87.84 195.808 195.84c0 107.968-87.84 195.808-195.808 195.808z" p-id="2409"></path>
</svg>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg t="1585402743083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2408" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
</style>
</defs>
<path d="M511.968 0c-207.84 0-376.96 169.12-376.96 376.992 0 54.208 11.104 105.984 32.96 153.888 94.24 206.24 274.976 424 328.128 485.824 3.968 4.608 9.792 7.296 15.904 7.296s11.904-2.656 15.904-7.296c53.12-61.824 233.856-279.552 328.128-485.824 21.888-47.904 32.96-99.648 32.96-153.888-0.032-207.872-169.152-376.992-376.992-376.992zM511.968 572.8c-107.968 0-195.808-87.84-195.808-195.808s87.84-195.84 195.808-195.84 195.808 87.84 195.808 195.84c0 107.968-87.84 195.808-195.808 195.808z" p-id="2409">
</path>
</svg>

Before

Width:  |  Height:  |  Size: 917 B

After

Width:  |  Height:  |  Size: 874 B

View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" version="1.1" p-id="1463">
<polygon id="path-1" points="4 10.6 4 9.4 16 9.4 16 10.6"></polygon>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 12 2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="minus" fill="currentColor" fill-rule="nonzero">
<polygon id="path-1" points="0 1.6 0 0.4 12 0.4 12 1.6">
</polygon>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 214 B

After

Width:  |  Height:  |  Size: 297 B

View File

@ -1,4 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20" version="1.1" p-id="1463">
<polygon id="path-1" points="10.6 10.6 10.6 16 9.4 16 9.4 10.6 4 10.6 4 9.4 9.4 9.4 9.4 4 10.6 4 10.6 9.4 16 9.4 16 10.6"></polygon>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="plus" fill="currentColor" fill-rule="nonzero">
<polygon id="path-1" points="6.6 6.6 6.6 12 5.4 12 5.4 6.6 0 6.6 0 5.4 5.4 5.4 5.4 0 6.6 0 6.6 5.4 12 5.4 12 6.6">
</polygon>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 278 B

After

Width:  |  Height:  |  Size: 447 B

View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M704 128l-30.08 30.08L856.96 341.333333H362.666667a277.333333 277.333333 0 0 0 0 554.666667h213.333333v-42.666667H362.666667a234.666667 234.666667 0 0 1 0-469.333333h494.293333l-183.253333 183.253333L704 597.333333l234.666667-234.666666z" />
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 854 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="redo" fill="currentColor" fill-rule="nonzero">
<path d="M619,0 L588.92,30.08 L771.96,213.333333 L277.666667,213.333333 C124.499696,213.333333 0.3333335,337.499696 0.3333335,490.666667 C0.3333335,643.833637 124.499696,768 277.666667,768 L491,768 L491,725.333333 L277.666667,725.333333 C148.069828,725.324873 43.0153188,620.263506 43.0153188,490.666667 C43.0153188,361.069827 148.069828,256.00846 277.666667,256 L771.96,256 L588.706667,439.253333 L619,469.333333 L853.666667,234.666667 L619,0 Z" id="路径">
</path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 400 B

After

Width:  |  Height:  |  Size: 699 B

View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M311.559054 1013.77369L767.908116 512.684524 311.559054 12.234501a31.318073 31.318073 0 1 0-46.657538 41.544383L679.706197 512.684524 267.458094 969.672731a31.318073 31.318073 0 0 0 46.018393 42.183526z" p-id="1981" />
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 513 1021" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="right-arrow" fill="currentColor" fill-rule="nonzero">
<path d="M56.559054,1013.77369 L512.908116,512.684524 L56.559054,12.234501 C49.4114678,2.93455912 37.6664238,-1.59188176 26.1262324,0.505948246 C14.586041,2.60377825 5.18544409,10.9741727 1.76815516,22.1946471 C-1.64913377,33.4151214 1.48980228,45.6045351 9.901516,53.778884 L424.706197,512.684524 L12.458094,969.672731 C2.45820596,982.551498 4.01297737,1000.9483 16.0324422,1011.96615 C28.0519071,1022.98399 46.5142346,1022.93619 58.476487,1011.85626 L56.559054,1013.77369 Z" id="路径">
</path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 377 B

After

Width:  |  Height:  |  Size: 737 B

View File

@ -1,4 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1463">
<path d="M661.333333 341.333333H167.04l183.253333-183.253333L320 128 85.333333 362.666667l234.666667 234.666666 30.08-30.08L167.04 384H661.333333a234.666667 234.666667 0 0 1 0 469.333333H448v42.666667h213.333333a277.333333 277.333333 0 0 0 0-554.666667z" />
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 854 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="undo" fill="currentColor" fill-rule="nonzero">
<path d="M576.333333,213.333333 L82.04,213.333333 L265.293333,30.08 L235,0 L0.333333,234.666667 L235,469.333333 L265.08,439.253333 L82.04,256 L576.333333,256 C705.930172,256.00846 810.984681,361.069827 810.984681,490.666667 C810.984681,620.263506 705.930172,725.324873 576.333333,725.333333 L363,725.333333 L363,768 L576.333333,768 C729.500304,768 853.666667,643.833637 853.666667,490.666667 C853.666667,337.499696 729.500304,213.333333 576.333333,213.333333 Z" id="路径">
</path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 407 B

After

Width:  |  Height:  |  Size: 714 B

View File

@ -29,6 +29,7 @@ import find from 'lodash/find';
import findIndex from 'lodash/findIndex';
import Html from '../components/Html';
import {Spinner} from '../components';
import {Icon} from '../components/icons';
export interface CRUDProps extends RendererProps {
api?: Api;
@ -1402,7 +1403,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
this.search({page: page + 1, loadDataMode: 'load-more'})
}
size="sm"
className="btn-primary"
>
{__('加载更多')}
</Button>
@ -1426,7 +1426,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
'is-active': store.filterVisible
})}
>
<i className="fa fa-sliders m-r-sm" />
<Icon icon="filter" className="icon m-r-xs" />
{__('筛选')}
</button>
);

View File

@ -12,6 +12,7 @@ import QuickEdit from './QuickEdit';
import PopOver from './PopOver';
import {TableCell} from './Table';
import Copyable from './Copyable';
import {Icon} from '../components/icons';
export interface CardProps extends RendererProps {
onCheck: (item: IItem) => void;
@ -115,7 +116,7 @@ export class Card extends React.Component<CardProps> {
if (dragging) {
return (
<div className={cx('Card-dragBtn')}>
<i className="fa fa-exchange" />
<Icon icon="drag-bar" className="icon" />
</div>
);
} else if (selectable && !hideCheckToggler) {

View File

@ -17,6 +17,7 @@ import Sortable from 'sortablejs';
import {filter} from '../utils/tpl';
import debounce from 'lodash/debounce';
import {resizeSensor} from '../utils/resize-sensor';
import {Icon} from '../components/icons';
export interface Column {
type: string;
@ -524,7 +525,7 @@ export default class Cards extends React.Component<GridProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSave}
>
<i className="fa fa-check m-r-xs" />
<Icon icon="check" className="icon m-r-xs" />
</button>
<button
@ -532,7 +533,7 @@ export default class Cards extends React.Component<GridProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset}
>
<i className="fa fa-times m-r-xs" />
<Icon icon="close" className="icon m-r-xs" />
</button>
</span>
@ -544,7 +545,7 @@ export default class Cards extends React.Component<GridProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSaveOrder}
>
<i className="fa fa-check m-r-xs" />
<Icon icon="check" className="icon m-r-xs" />
</button>
<button
@ -552,7 +553,7 @@ export default class Cards extends React.Component<GridProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset}
>
<i className="fa fa-times m-r-xs" />
<Icon icon="close" className="icon m-r-xs" />
</button>
</span>
@ -577,7 +578,8 @@ export default class Cards extends React.Component<GridProps, object> {
showHeader,
render,
store,
classnames: cx
classnames: cx,
translate: __
} = this.props;
if (showHeader === false) {
@ -603,7 +605,7 @@ export default class Cards extends React.Component<GridProps, object> {
{child}
{store.dragging ? (
<div className={cx('Cards-dragTip')} ref={this.dragTipRef}>
{__('请拖动顶部的按钮进行排序')}
</div>
) : null}
</div>
@ -691,7 +693,7 @@ export default class Cards extends React.Component<GridProps, object> {
}
renderDragToggler() {
const {store, multiple, selectable, env} = this.props;
const {store, multiple, selectable, env, translate: __} = this.props;
if (!store.draggable || store.items.length < 2) {
return null;
@ -701,7 +703,7 @@ export default class Cards extends React.Component<GridProps, object> {
<Button
iconOnly
key="dragging-toggle"
tooltip="对卡片进行排序操作"
tooltip={__('对卡片进行排序操作')}
tooltipContainer={
env && env.getModalContainer ? env.getModalContainer : undefined
}
@ -713,7 +715,7 @@ export default class Cards extends React.Component<GridProps, object> {
store.dragging && store.clear();
}}
>
<i className="fa fa-exchange" />
<Icon icon="exchange" className="icon r90" />
</Button>
);
}

View File

@ -9,6 +9,7 @@ import cx from 'classnames';
import hoistNonReactStatic from 'hoist-non-react-statics';
import Button from '../components/Button';
import {filter} from '../utils/tpl';
import {Icon} from '../components/icons';
export interface CopyableConfig {}
@ -54,12 +55,14 @@ export const HocCopyable = () => (Component: React.ComponentType<any>): any => {
className={cx(`Field--copyable`, className)}
>
<Component {...this.props} wrapperComponent={''} noHoc />
<i
<a
key="edit-btn"
data-tooltip={__('点击复制')}
className={cx('Field-copyBtn fa fa-clipboard')}
className={cx('Field-copyBtn')}
onClick={this.handleClick.bind(this, content)}
/>
>
<Icon icon="copy" className="icon" />
</a>
</Component>
);
}

View File

@ -6,13 +6,13 @@ import PopOver from '../components/PopOver';
import cx from 'classnames';
import {isVisible, noop} from '../utils/helper';
import {filter} from '../utils/tpl';
import {Icon} from '../components/icons';
export interface DropDownButtonProps extends RendererProps {
block?: boolean;
size?: 'xs' | 'sm' | 'md' | 'lg';
align?: 'left' | 'right';
buttons?: Array<any>;
caretIcon?: string;
iconOnly?: boolean;
defaultIsOpened?: boolean;
closeOnOutside?: boolean;
@ -30,9 +30,7 @@ export default class DropDownButton extends React.Component<
isOpened: false
};
static defaultProps = {
caretIcon: 'fa fa-angle-down'
};
static defaultProps = {};
target: any;
constructor(props: DropDownButtonProps) {
@ -48,7 +46,7 @@ export default class DropDownButton extends React.Component<
if (this.props.defaultIsOpened) {
this.setState({
isOpened: true
})
});
}
}
@ -154,7 +152,6 @@ export default class DropDownButton extends React.Component<
primary,
className,
classnames: cx,
caretIcon,
align,
iconOnly,
icon,
@ -189,9 +186,17 @@ export default class DropDownButton extends React.Component<
size ? `Button--${size}` : ''
)}
>
{icon ? <i className={cx(icon, 'm-r-xs')} /> : null}
{icon ? (
typeof icon === 'string' ? (
<i className={cx(icon, 'm-r-xs')} />
) : (
icon
)
) : null}
{typeof label === 'string' ? filter(label, data) : label}
<i className={cx('DropDown-caret', caretIcon)} />
<span className={cx('DropDown-caret')}>
<Icon icon="caret" className="icon" />
</span>
</button>
{this.state.isOpened ? this.renderOuter() : null}

View File

@ -109,7 +109,7 @@ export default class ComboControl extends React.Component<ComboProps> {
draggableTip: '可拖拽排序',
addButtonText: '新增',
canAccessSuperData: false,
addIcon: 'fa fa-plus',
addIcon: true,
dragIcon: '',
deleteIcon: '',
tabsMode: false,
@ -771,7 +771,11 @@ export default class ComboControl extends React.Component<ComboProps> {
'add-button',
{
type: 'dropdown-button',
icon: addIcon,
icon: addIcon ? (
<Icon icon="plus" className="icon m-r-xs" />
) : (
''
),
label: __(addButtonText || '新增'),
level: 'info',
size: 'sm',
@ -793,7 +797,9 @@ export default class ComboControl extends React.Component<ComboProps> {
data-position="left"
data-tooltip={__('新增一条数据')}
>
{addIcon ? <i className={cx('m-r-xs', addIcon)} /> : null}
{addIcon ? (
<Icon icon="plus" className="icon m-r-xs" />
) : null}
<span>{__(addButtonText || '新增')}</span>
</a>
)
@ -1121,7 +1127,6 @@ export default class ComboControl extends React.Component<ComboProps> {
'add-button',
{
type: 'dropdown-button',
icon: addIcon,
label: __(addButtonText || '新增'),
level: 'info',
size: 'sm',
@ -1145,7 +1150,7 @@ export default class ComboControl extends React.Component<ComboProps> {
data-tooltip={__('新增一条数据')}
>
{addIcon ? (
<i className={cx('Button-icon', addIcon)} />
<Icon icon="plus" className="icon m-r-xs" />
) : null}
<span>{__(addButtonText || '新增')}</span>
</button>

View File

@ -38,8 +38,7 @@ export default class DateControl extends React.PureComponent<
step: 1
}
},
clearable: true,
iconClassName: 'fa fa-calendar'
clearable: true
};
componentWillMount() {

View File

@ -4,6 +4,7 @@ import cx from 'classnames';
import omit from 'lodash/omit';
import pick from 'lodash/pick';
import {createObject} from '../../utils/helper';
import {Icon} from '../../components/icons';
export interface SubFormProps extends FormControlProps {
placeholder?: string;
@ -210,7 +211,7 @@ export default class SubFormControl extends React.PureComponent<
disabled={disabled}
data-tooltip={__('新增一条数据')}
>
<i className="fa fa-plus m-r-xs" />
<Icon icon="plus" className="icon m-r-xs" />
<span>{__('新增')}</span>
</button>
];

View File

@ -499,7 +499,7 @@ export default class List extends React.Component<ListProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSave}
>
<i className="fa fa-check m-r-xs" />
<Icon icon="check" className="icon m-r-xs" />
</button>
<button
@ -507,7 +507,7 @@ export default class List extends React.Component<ListProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset}
>
<i className="fa fa-times m-r-xs" />
<Icon icon="close" className="icon m-r-xs" />
</button>
</span>
@ -519,7 +519,7 @@ export default class List extends React.Component<ListProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSaveOrder}
>
<i className="fa fa-check m-r-xs" />
<Icon icon="check" className="icon m-r-xs" />
</button>
<button
@ -527,7 +527,7 @@ export default class List extends React.Component<ListProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset}
>
<i className="fa fa-times m-r-xs" />
<Icon icon="close" className="icon m-r-xs" />
</button>
</span>
@ -696,7 +696,7 @@ export default class List extends React.Component<ListProps, object> {
store.dragging && store.clear();
}}
>
<i className="fa fa-exchange" />
<Icon icon="exchange" className="icon r90" />
</Button>
);
}

View File

@ -11,6 +11,7 @@ import {isApiOutdated, isEffectiveApi} from '../utils/api';
import {ScopedContext, IScopedContext} from '../Scoped';
import {Api} from '../types';
import {ClassNamesFn, themeable} from '../theme';
import {Icon} from '../components/icons';
export interface Link {
className?: string;
@ -44,9 +45,7 @@ export class Navigation extends React.Component<
NavigationProps,
NavigationState
> {
static defaultProps: Partial<NavigationProps> = {
togglerClassName: 'fa fa-angle-down'
};
static defaultProps: Partial<NavigationProps> = {};
mounted: boolean = true;
constructor(props: NavigationProps) {
@ -280,10 +279,12 @@ export class Navigation extends React.Component<
</a>
{link.children && link.children.length ? (
<i
<span
onClick={() => this.toggleLink(link)}
className={cx('Nav-itemToggler', togglerClassName)}
/>
>
<Icon icon="caret" className="icon" />
</span>
) : null}
{link.children && link.children.length ? (

View File

@ -1,6 +1,7 @@
import React from 'react';
import {Renderer, RendererProps} from '../factory';
import {autobind} from '../utils/helper';
import {Icon} from '../components/icons';
export interface PaginationProps extends RendererProps {
activePage: number;
@ -48,7 +49,7 @@ export default class Pagination extends React.Component<
<ul className={cx('Pagination', 'Pagination--sm')}>
<li
className={cx({
disabled: activePage < 2
'is-disabled': activePage < 2
})}
onClick={
activePage < 2
@ -57,12 +58,12 @@ export default class Pagination extends React.Component<
}
>
<a>
<i className="fa fa-chevron-left" />
<Icon icon="left-arrow" className="icon" />
</a>
</li>
<li
className={cx({
disabled: !hasNext
'is-disabled': !hasNext
})}
onClick={
!hasNext
@ -71,7 +72,7 @@ export default class Pagination extends React.Component<
}
>
<a>
<i className="fa fa-chevron-right" />
<Icon icon="right-arrow" className="icon" />
</a>
</li>
</ul>
@ -133,7 +134,7 @@ export default class Pagination extends React.Component<
onClick={() => onPageChange(page)}
key={page}
className={cx({
active: page === activePage
'is-active': page === activePage
})}
>
<a role="button">{page}</a>
@ -155,7 +156,7 @@ export default class Pagination extends React.Component<
onClick={() => onPageChange(1)}
key={1}
className={cx({
active: 1 === activePage
'is-active': 1 === activePage
})}
>
<a role="button">{1}</a>
@ -183,7 +184,7 @@ export default class Pagination extends React.Component<
onClick={() => onPageChange(items)}
key={items}
className={cx({
active: items === activePage
'is-active': items === activePage
})}
>
<a role="button">{items}</a>

View File

@ -17,6 +17,7 @@ import keycode from 'keycode';
import matches from 'dom-helpers/query/matches';
import Overlay from '../components/Overlay';
import PopOver from '../components/PopOver';
import {Icon} from '../components/icons';
export interface QuickEditConfig {}
@ -491,11 +492,13 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
onKeyUp={this.handleKeyUp}
>
<Component {...this.props} wrapperComponent={''} noHoc />
<i
<span
key="edit-btn"
className={cx('Field-quickEditBtn fa fa-edit')}
className={cx('Field-quickEditBtn')}
onClick={this.openQuickEdit}
/>
>
<Icon icon="pencil" className="icon" />
</span>
{this.state.isOpened ? this.renderPopOver() : null}
</Component>
);

View File

@ -983,7 +983,7 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSave}
>
<i className="fa fa-check m-r-xs" />
<Icon icon="check" className="icon m-r-xs" />
{__('提交')}
</button>
<button
@ -991,7 +991,7 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset}
>
<i className="fa fa-times m-r-xs" />
<Icon icon="close" className="icon m-r-xs" />
{__('放弃')}
</button>
</span>
@ -1005,7 +1005,7 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('Button Button--xs Button--success m-l-sm')}
onClick={this.handleSaveOrder}
>
<i className="fa fa-check m-r-xs" />
<Icon icon="check" className="icon m-r-xs" />
{__('提交')}
</button>
<button
@ -1013,7 +1013,7 @@ export default class Table extends React.Component<TableProps, object> {
className={cx('Button Button--xs Button--danger m-l-sm')}
onClick={this.reset}
>
<i className="fa fa-times m-r-xs" />
<Icon icon="close" className="icon m-r-xs" />
{__('放弃')}
</button>
</span>
@ -2311,7 +2311,9 @@ export class HeadCellSearchDropDown extends React.Component<
return (
<span className={cx(`${ns}TableCell-searchBtn`)}>
<i className="fa fa-search" onClick={this.open} />
<span onClick={this.open}>
<Icon icon="search" className="icon" />
</span>
{this.state.isOpened ? (
<Overlay
container={popOverContainer || (() => findDOMNode(this))}
@ -2510,7 +2512,9 @@ export class HeadCellFilterDropDown extends React.Component<
return (
<span className={cx(`${ns}TableCell-filterBtn`)}>
<i className="fa fa-filter" onClick={this.open} />
<span onClick={this.open}>
<Icon icon="column-filter" className="icon" />
</span>
{isOpened ? (
<Overlay
container={popOverContainer || (() => findDOMNode(this))}