替换 svg icon

This commit is contained in:
2betop 2020-06-08 17:13:54 +08:00
parent 40c1ad2646
commit 3580e01144
7 changed files with 34 additions and 15 deletions

View File

@ -1482,6 +1482,3 @@ $Carousel-imageDescription-bottom: px2rem(25px) !default;
// Picker
$Picker-iconColor: $icon-color !default;
$Picker-onHover-iconColor: $icon-onHover-color !default;
$Picker-btn-vendor: 'FontAwesome' !default;
$Picker-btn-fontSize: $Form-fontSize !default;
$Picker-btn-icon: '\f2d2' !default;

View File

@ -85,15 +85,6 @@
&:hover {
color: $Picker-onHover-iconColor;
}
&:before {
line-height: 1;
color: inherit;
content: $Picker-btn-icon;
display: inline-block;
font-size: $Picker-btn-fontSize;
font-family: $Picker-btn-vendor;
}
}
&-clear {

View File

@ -95,6 +95,12 @@ import ZoomInIcon from '../icons/zoom-in.svg';
// @ts-ignore
import ZoomOutIcon from '../icons/zoom-out.svg';
// @ts-ignore
import QuestionIcon from '../icons/question.svg';
// @ts-ignore
import WindowRestoreIcon from '../icons/window-restore.svg';
// 兼容原来的用法,后续不直接试用。
// @ts-ignore
export const closeIcon = <CloseIcon />;
@ -169,6 +175,8 @@ registerIcon('column-filter', ColumnFilterIcon);
registerIcon('caret', CaretIcon);
registerIcon('zoom-in', ZoomInIcon);
registerIcon('zoom-out', ZoomOutIcon);
registerIcon('question', QuestionIcon);
registerIcon('window-restore', WindowRestoreIcon);
export function Icon({
icon,

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

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 175 175" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="question-(1)" transform="translate(0.304688, 0.500000)" fill="currentColor" fill-rule="nonzero">
<path d="M167.56875,53.3876953 C163.179297,43.0103516 156.89707,33.6917969 148.896094,25.6910156 C140.895312,17.6902344 131.576758,11.4078125 121.199414,7.01855469 C110.452539,2.47285156 99.0396484,0.16796875 87.2785156,0.16796875 C75.5173828,0.16796875 64.1046875,2.47285156 53.3574219,7.01855469 C42.9800781,11.4078125 33.6615234,17.6902344 25.6607422,25.6910156 C17.6599609,33.6917969 11.3775391,43.0103516 6.98828125,53.3876953 C2.44257813,64.1349609 0.137695313,75.5474609 0.137695313,87.3087891 C0.137695313,99.0701172 2.44257813,110.482617 6.98828125,121.229883 C11.3775391,131.607227 17.6599609,140.925781 25.6607422,148.926562 C33.6615234,156.927539 42.9800781,163.209766 53.3574219,167.599219 C64.1046875,172.144727 75.5171875,174.449609 87.2785156,174.449609 C99.0396484,174.449609 110.452344,172.144727 121.199609,167.599219 C131.576953,163.209766 140.895508,156.927539 148.896289,148.926562 C156.897266,140.925781 163.179492,131.607227 167.568945,121.229883 C172.114453,110.482617 174.419336,99.0699219 174.419336,87.3087891 C174.419336,75.5476562 172.114453,64.1349609 167.56875,53.3876953 L167.56875,53.3876953 Z M95.5601563,149.20625 C93.1902344,151.314648 90.4513672,152.366016 87.3447266,152.366016 C84.1318359,152.366016 81.328125,151.326172 78.9310547,149.246484 C76.5353516,147.166797 75.3375,144.256836 75.3375,140.519727 C75.3375,137.199023 76.4951172,134.409766 78.8132813,132.143359 C81.1300781,129.879883 83.9738281,128.748047 87.3447266,128.748047 C90.6625,128.748047 93.453125,129.879883 95.7181641,132.143359 C97.9816406,134.409766 99.1150391,137.199023 99.1150391,140.519727 C99.1150391,144.205273 97.9298828,147.100781 95.5601563,149.20625 Z M125.063867,76.0599609 C123.248437,79.4294922 121.088281,82.3392578 118.586328,84.7867187 C116.085742,87.2369141 111.595898,91.35625 105.118359,97.1501953 C103.327344,98.7818359 101.892578,100.218164 100.813867,101.456055 C99.7337891,102.694141 98.9294922,103.825977 98.4037109,104.851367 C97.8765625,105.879688 97.46875,106.905273 97.1800781,107.933594 C96.8900391,108.95918 96.4546875,110.763086 95.8759766,113.345508 C94.875,118.820508 91.7410156,121.560937 86.4755859,121.560937 C83.7365234,121.560937 81.4328125,120.664648 79.5628906,118.872266 C77.6943359,117.082617 76.759375,114.422656 76.759375,110.895312 C76.759375,106.47168 77.4429687,102.639648 78.8132812,99.4023437 C80.1820312,96.1621094 81.9990234,93.3183594 84.2638672,90.8708984 C86.5273437,88.4207031 89.5824219,85.5107422 93.4273437,82.1412109 C96.796875,79.1910156 99.2341797,76.9677734 100.733594,75.4654297 C102.225903,73.9792131 103.50228,72.290943 104.525391,70.45 C105.553711,68.6058594 106.066602,66.6066406 106.066602,64.4464844 C106.066602,60.2324219 104.499609,56.6791016 101.365625,53.7806641 C98.2332031,50.8851562 94.1900391,49.4373047 89.240625,49.4373047 C83.4466797,49.4373047 79.1810547,50.8994141 76.4433594,53.8207031 C73.7044922,56.7449219 71.3876953,61.0480469 69.4917969,66.7357422 C67.7007812,72.6876953 64.3039062,75.6636719 59.3015625,75.6636719 C56.3515625,75.6636719 53.8638672,74.6238281 51.8373047,72.5441406 C49.809375,70.4644531 48.7953125,68.2123047 48.7953125,65.7878906 C48.7953125,60.7867187 50.4009766,55.7167969 53.6140625,50.5835937 C56.8255859,45.4474609 61.5134766,41.1960937 67.6751953,37.8265625 C73.8367187,34.4542969 81.0253906,32.7708984 89.2408203,32.7708984 C96.8759766,32.7708984 103.617969,34.1785156 109.463477,36.9964844 C115.308984,39.8144531 119.824805,43.6435547 123.010352,48.4894531 C126.197461,53.3353516 127.790234,58.6007812 127.790234,64.2884766 C127.790234,68.7636719 126.882227,72.6875 125.063867,76.0599609 L125.063867,76.0599609 Z" id="形状">
</path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="window-restore" fill="currentColor" fill-rule="nonzero">
<path d="M181.25,0 L56.25,0 C45.8984375,0 37.5,8.3984375 37.5,18.75 L37.5,37.5 L18.75,37.5 C8.3984375,37.5 0,45.8984375 0,56.25 L0,181.25 C0,191.601562 8.3984375,200 18.75,200 L143.75,200 C154.101562,200 162.5,191.601562 162.5,181.25 L162.5,162.5 L181.25,162.5 C191.601562,162.5 200,154.101562 200,143.75 L200,18.75 C200,8.3984375 191.601562,0 181.25,0 Z M143.75,181.25 L18.75,181.25 L18.75,100 L143.75,100 L143.75,181.25 Z M181.25,143.75 L162.5,143.75 L162.5,56.25 C162.5,45.8984375 154.101562,37.5 143.75,37.5 L56.25,37.5 L56.25,18.75 L181.25,18.75 L181.25,143.75 Z" id="形状">
</path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 831 B

View File

@ -424,7 +424,9 @@ export default class PickerControl extends React.PureComponent<
</a>
) : null}
<span onClick={this.open} className={cx('Picker-btn')} />
<span onClick={this.open} className={cx('Picker-btn')}>
<Icon icon="window-restore" className="icon" />
</span>
</div>
{render(

View File

@ -5,6 +5,7 @@ import cx from 'classnames';
import TooltipWrapper from '../components/TooltipWrapper';
import {filter} from '../utils/tpl';
import {themeable} from '../theme';
import {Icon} from '../components/icons';
export function filterContents(
tooltip:
@ -43,7 +44,7 @@ type RemarkProps = {
class Remark extends React.Component<RemarkProps> {
static propsList: Array<string> = [];
static defaultProps = {
icon: 'fa fa-question-circle',
icon: '',
trigger: ['hover', 'focus']
};
@ -62,6 +63,8 @@ class Remark extends React.Component<RemarkProps> {
data
} = this.props;
const finalIcon = (tooltip && tooltip.icon) || icon;
return (
<div
className={cx(
@ -79,7 +82,11 @@ class Remark extends React.Component<RemarkProps> {
container={container}
delay={tooltip && tooltip.delay}
>
<i className={cx('Remark-icon', (tooltip && tooltip.icon) || icon)} />
{finalIcon ? (
<i className={cx('Remark-icon', finalIcon)} />
) : (
<Icon icon="question" className="icon" />
)}
</TooltipWrapper>
</div>
);