📝 docs: 完善文档

docs/components/IconDisplay/ThemeIcons.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+interface CustomIconComponentProps {
+  width: string | number;
+  height: string | number;
+  fill: string;
+  viewBox?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  spin?: boolean;
+  rotate?: number;
+  ['aria-hidden']?: React.AriaAttributes['aria-hidden'];
+}
+
+export const FilledIcon: React.FC<CustomIconComponentProps> = props => {
+  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 (
+    <svg {...(props as any)} viewBox="0 0 1024 1024">
+      <path d={path} />
+    </svg>
+  );
+};
+
+export const OutlinedIcon: React.FC<CustomIconComponentProps> = props => {
+  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 (
+    <svg {...(props as any)} viewBox="0 0 1024 1024">
+      <path d={path} />
+    </svg>
+  );
+};
+
+export const TwoToneIcon: React.FC<CustomIconComponentProps> = props => {
+  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 (
+    <svg {...(props as any)} viewBox="0 0 1024 1024">
+      <path d={path} />
+    </svg>
+  );
+};

docs/components/IconDisplay/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const IconDisplay: React.FC = () => {
+  return (
+    <div>
+
+    </div>
+  )
+}

docs/components/icons.tsx

@@ -0,0 +1,7 @@
+import { AccountBookFilled } from '@lotus-design/icons';
+
+export default () => {
+  return (
+    <AccountBookFilled />
+  )
+}

docs/icons.md

@@ -0,0 +1,11 @@
+---
+title: 图标
+group:
+  path: /
+sidemenu: false
+nav:
+  title: 图标
+  path: /icons
+---
+
+<code src="./components/icons.tsx" inline />

packages/react/templates/icon.ts.ejs

@@ -3,9 +3,10 @@ import * as React from 'react'
 import <%= svgIdentifier %>Svg from '@lotus-design/icons-svg/lib/asn/<%= svgIdentifier %>';
 import LotusIcon, { LotusIconProps } from '../components/LotusIcon';
 
-const <%= svgIdentifier %> = (props, ref) =>
-  <LotusIcon {...props} ref={ref} icon={<%= svgIdentifier %>Svg} />;
+const <%= svgIdentifier %> = React.forwardRef<HTMLSpanElement, LotusIconProps>(
+  (props, ref) => <LotusIcon {...props} ref={ref} icon={<%= svgIdentifier %>Svg} />
+);
 
 <%= svgIdentifier %>.displayName = '<%= svgIdentifier %>';
 
-export default React.forwardRef<HTMLSpanElement, LotusIconProps>(<%= svgIdentifier %>);
+export default <%= svgIdentifier %>;