feat:Icon组件支持接收svg字符串直接展示&iconSelect样式优化

This commit is contained in:
xujiahao01 2023-04-12 16:03:23 +08:00
parent b71000ba9a
commit 4909c04e14
2 changed files with 27 additions and 5 deletions

View File

@ -53,6 +53,19 @@
align-items: center;
justify-content: flex-start;
overflow: hidden;
img.icon {
height: var(--sizes-size-7);
margin-right: var(--sizes-size-4);
}
&-str-svg {
height: var(--fontSizeBase);
svg {
width: 100%;
height: 100%;
}
}
}
&-wrapper {

View File

@ -121,10 +121,12 @@ export default class IconSelectControl extends React.PureComponent<
disabled,
value: valueTemp,
placeholder,
clearable,
clearable
} = this.props;
const value =
typeof valueTemp === 'string' ? this.getValueBySvg(valueTemp) : valueTemp;
const SvgStr =
typeof valueTemp === 'string' && valueTemp.match(/(<svg.{1,}\/svg>)/);
const pureValue =
(value?.id && String(value.id).replace(/^svg-/, '')) || '';
@ -138,14 +140,21 @@ export default class IconSelectControl extends React.PureComponent<
<use xlinkHref={`#${pureValue}`}></use>
</svg>
</div>
) : (
<Icon icon={valueTemp} className="icon" />
)}
) : valueTemp ? (
SvgStr ? (
<div
className={cx(`${ns}IconSelectControl-input-area-str-svg`)}
dangerouslySetInnerHTML={{__html: SvgStr[0].replace(/\\"/g, '"')}}
></div>
) : (
<Icon icon={valueTemp} className="icon" />
)
) : null}
<span className={cx(`${ns}IconSelectControl-input-icon-id`)}>
{iconName}
</span>
{clearable && !disabled && pureValue ? (
{clearable && !disabled && (pureValue || valueTemp) ? (
<a
onClick={this.handleClear}
className={cx(`${ns}IconSelectControl-clear`)}