docs: update svg-icon

Author: cheton

packages/react-docs/pages/components/svg-icon.page.mdx

@@ -0,0 +1,10 @@
+import { SVGIcon } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+<SVGIcon color="gray:50" size={24} viewBox="0 0 16 16">
+  <path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 8-3.582 8-8v0c0-4.418-3.582-8-8-8v0zM11 12l-3-3-3 3-1.060-1.060 3.060-2.94-3-3 1.060-1.070 2.94 2.95 2.94-2.94 1.060 1.060-2.89 3 3 3z" />
+</SVGIcon>
+);
+
+export default App;

packages/react-docs/pages/components/svg-icon/basic.js

@@ -0,0 +1,28 @@
+import { Stack, SVGIcon } from '@tonic-ui/react';
+import React from 'react';
+
+const CustomIcon = ({ size, ...rest }) => {
+  const viewBox = '0 0 16 16';
+  return (
+    <SVGIcon size={size} viewBox={viewBox} {...rest}>
+      <path d="M15 8c0 3.866-3.134 7-7 7s-7-3.134-7-7c0-3.866 3.134-7 7-7v0c3.866 0 7 3.134 7 7v0z" />
+    </SVGIcon>
+  );
+};
+
+const App = () => (
+  <Stack direction="row" spacing="3x" alignItems="center">
+    <CustomIcon size="1x" color="blue:10" />
+    <CustomIcon size="2x" color="blue:20" />
+    <CustomIcon size="3x" color="blue:30" />
+    <CustomIcon size="4x" color="blue:40" />
+    <CustomIcon size="5x" color="blue:50" />
+    <CustomIcon size="6x" color="blue:60" />
+    <CustomIcon size="7x" color="blue:70" />
+    <CustomIcon size="8x" color="blue:80" />
+    <CustomIcon size="9x" color="blue:90" />
+    <CustomIcon size="10x" color="blue:100" />
+  </Stack>
+);
+
+export default App;

packages/react-docs/pages/components/svg-icon/custom-icon.js

@@ -0,0 +1,31 @@
+# SVGIcon
+
+If you need a custom SVG icon, you can use the `<SVGIcon>` component to extend the native `<svg>` element:
+
+* It comes with built-in accessibility.
+* SVG elements should be scaled for a 24x24px viewport.
+
+## Import
+
+```js
+import { SVGIcon } from '@tonic-ui/react';
+```
+
+## Usage
+
+{render('./basic')}
+
+### Custom icon
+
+{render('./custom-icon')}
+
+## Props
+
+### SVGIcon
+
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| size | string | | The size of the icon. |
+| color | string | 'currentColor' | The color of the icon. |
+| focusable | boolean | false | Denotes that the icon is not an interactive element, and only used for presentation. |
+| role | string | 'presentation' | One of: 'presentation', 'img' |