{
+
+ static cagetories: Categories = categories;
+
+ static newIconNames: string[] = [];
+
+ static themeTypeMapper: { [key: string]: ThemeFolderType } = {
+ filled: 'fill',
+ outlined: 'outline',
+ twoTone: 'twotone',
+ };
+
state: IconDisplayState = {
theme: 'outlined',
};
+ getComputedDisplayList() {
+ return Object.keys(IconDisplay.cagetories)
+ .map(
+ (category: CategoriesKeys) => ({
+ category,
+ icons: IconDisplay.cagetories[category]
+ .filter((name) => manifest[IconDisplay.themeTypeMapper[this.state.theme]].indexOf(name) !== -1),
+ }),
+ )
+ .filter(({ icons }) => Boolean(icons.length));
+ }
+
+ handleChangeTheme = (e: RadioChangeEvent) => {
+ this.setState({
+ theme: e.target.value as ThemeType,
+ });
+ }
+
+ renderCategories(list: Array<{ category: string, icons: string[] }>) {
+ return list.map(({ category, icons }) => {
+ return (
+
+ );
+ });
+ }
+
render() {
- // wip
- return null;
+ const { intl: { messages } } = this.props;
+ const list = this.getComputedDisplayList();
+ return (
+
+
{messages['app.docs.components.icon.pick-theme']}
+
+
+ Filled
+
+
+ Outlined
+
+
+ Two Tone
+
+
+ {this.renderCategories(list)}
+
+ );
}
}
+
+export default injectIntl(IconDisplay);
diff --git a/site/theme/template/IconDisplay/themeIcons.tsx b/site/theme/template/IconDisplay/themeIcons.tsx
new file mode 100644
index 0000000000..8d908d4769
--- /dev/null
+++ b/site/theme/template/IconDisplay/themeIcons.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+export const FilledIcon: React.SFC = (props: any) => {
+ const path = 'M864 64H160C107 64 64 107 64 160v' +
+ '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
+ '0c0-53-43-96-96-96z';
+ return (
+
+ );
+};
+
+export const OutlinedIcon: React.SFC = (props: any) => {
+ const path = 'M864 64H160C107 64 64 107 64 160v7' +
+ '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
+ '0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-' +
+ '12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +
+ ' 12 12v680c0 6.6-5.4 12-12 12z';
+ return (
+
+ );
+};
+
+export const TwoToneIcon: React.SFC = (props: any) => {
+ const path = 'M16 512c0 273.932 222.066 496 496 49' +
+ '6s496-222.068 496-496S785.932 16 512 16 16 238.' +
+ '066 16 512z m496 368V144c203.41 0 368 164.622 3' +
+ '68 368 0 203.41-164.622 368-368 368z';
+ return (
+
+ );
+};
diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js
index 7333ae851d..fc5c839198 100644
--- a/site/theme/zh-CN.js
+++ b/site/theme/zh-CN.js
@@ -88,5 +88,10 @@ module.exports = {
'app.publish.old-version-guide': '如果您还需要使用旧版，请查阅 ',
'app.publish.old-version-tips': '，也可通过页面右上角的文档版本选择框进行切换。',
'app.docs.color.pick-primary': '选择你的主色',
+ 'app.docs.components.icon.pick-theme': '选择图标主题风格',
+ 'app.docs.components.icon.category.direction': '方向性图标',
+ 'app.docs.components.icon.category.suggestion': '提示建议性图标',
+ 'app.docs.components.icon.category.other': '网站通用图标',
+ 'app.docs.components.icon.category.logo': '品牌和标识',
},
};
diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts
index 7993d2face..28d17bf8c4 100644
--- a/typings/custom-typings.d.ts
+++ b/typings/custom-typings.d.ts
@@ -100,3 +100,5 @@ declare module 'intersperse';
declare module "raf";
declare module "react-lifecycles-compat";
+
+declare module "react-copy-to-clipboard";