Remark 优化

examples/components/Page/Simple.jsx

@@ -1,7 +1,14 @@
 export default {
   type: 'page',
   title: '标题',
-  remark: '提示 Tip',
+  remark: {
+    title: '标题',
+    body: '这是一段描述问题，注意到了没，还可以设置标题。而且只有点击了才弹出来。',
+    icon: 'question-mark',
+    placement: 'right',
+    trigger: 'click',
+    rootClose: true
+  },
   body: '内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}',
   aside: '边栏部分',
   toolbar: '工具栏',

src/components/icons.tsx

@@ -101,6 +101,9 @@ import ZoomOutIcon from '../icons/zoom-out.svg';
 // @ts-ignore
 import QuestionIcon from '../icons/question.svg';
 
+// @ts-ignore
+import QuestionMarkIcon from '../icons/question-mark.svg';
+
 // @ts-ignore
 import WindowRestoreIcon from '../icons/window-restore.svg';
 
@@ -170,6 +173,10 @@ export function getIcon(key: string) {
   return iconFactory[key];
 }
 
+export function hasIcon(iconName: string) {
+  return !!getIcon(iconName);
+}
+
 export function registerIcon(key: string, component: React.ReactType<{}>) {
   iconFactory[key] = component;
 }
@@ -219,6 +226,7 @@ registerIcon('right-arrow-bold', RightArrowBoldIcon);
 registerIcon('zoom-in', ZoomInIcon);
 registerIcon('zoom-out', ZoomOutIcon);
 registerIcon('question', QuestionIcon);
+registerIcon('question-mark', QuestionMarkIcon);
 registerIcon('window-restore', WindowRestoreIcon);
 registerIcon('schedule', ScheduleIcon);
 registerIcon('home', HomeIcon);

src/icons/question-mark.svg

@@ -0,0 +1,12 @@
+<?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 id="Group-14">
+			<text id="？" font-family="PingFangSC-Regular, PingFang SC" font-size="12" font-weight="normal" line-spacing="13" fill="currentColor">
+				<tspan x="3" y="10.5">
+					？
+				</tspan>
+			</text>
+		</g>
+	</g>
+</svg>

src/renderers/Remark.tsx

@@ -5,7 +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';
+import {hasIcon, Icon} from '../components/icons';
 import {BaseSchema, SchemaIcon, SchemaTpl} from '../Schema';
 
 /**
@@ -127,7 +127,11 @@ class Remark extends React.Component<RemarkProps> {
         >
           {finalLabel ? <span>{finalLabel}</span> : null}
           {finalIcon ? (
-            <i className={cx('Remark-icon', finalIcon)} />
+            hasIcon(finalIcon) ? (
+              <Icon icon={finalIcon} className={cx('Remark-icon icon')} />
+            ) : (
+              <i className={cx('Remark-icon', finalIcon)} />
+            )
           ) : finalIcon === false && finalLabel ? null : (
             <Icon icon="warning-mark" className={cx('Remark-icon icon')} />
           )}