doc(icon): 增加实例

shenzhiqing · shenzhiqing · commit c9081b23797a · 2023-02-13T17:58:20.000+08:00
diff --git a/example/examples/src/routes/Icon/index.tsx b/example/examples/src/routes/Icon/index.tsx
@@ -274,12 +274,22 @@ export default class IconPage extends React.Component<IconPageProps> {
     const {route} = this.props;
     const description = route.params.description;
     const title = route.params.title;
+    const xml = `
+      <svg width="20" height="20" viewBox="0 0 20 20">
+        <path
+          fill-rule="evenodd"
+          fill="#000"
+          d="M19 8h-1.26c-.19-.73-.48-1.42-.85-2.06l.94-.94a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0l-.94.94c-.65-.38-1.34-.67-2.07-.86V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v1.26c-.76.2-1.47.5-2.13.89L5 2.28a.972.972 0 0 0-1.36 0L2.28 3.64c-.37.38-.37.98 0 1.36l.87.87c-.39.66-.69 1.37-.89 2.13H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h1.26c.19.73.48 1.42.85 2.06l-.94.94a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l.94-.94c.64.38 1.33.66 2.06.85V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1.26c.76-.2 1.47-.5 2.13-.89l.88.87c.37.37.98.37 1.36 0l1.36-1.36c.37-.38.37-.98 0-1.36l-.87-.87c.4-.65.7-1.37.89-2.13H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 7c-2.76 0-5-2.24-5-5s2.24-5 5-5v10z"
+        />
+      </svg>
+    `;
     return (
       <Container>
         <Layout>
           <Header title={title} description={description} />
           <Body>
             <Card title="自定义图标">
+              <Icon name="apple" size={18} color="#50CB42" />
               <Icon
                 paths={[
                   'M19 0H7c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h5.59l3.71 3.71c.17.18.42.29.7.29.55 0 1-.45 1-1v-3h1c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zM7 13c-1.1 0-2-.9-2-2V4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h1v3a1.003 1.003 0 0 0 1.71.71L7.41 16H13c.55 0 1-.45 1-1v-.17L12.17 13H7z',
@@ -295,7 +305,28 @@ export default class IconPage extends React.Component<IconPageProps> {
                 size={18}
                 style={styles.icon}
               />
-              <Icon name="apple" size={18} color="#50CB42" />
+              <Icon
+                size={40}
+                xml={`
+                  <svg
+                  width="130"
+                  height="130"
+                  fill="blue"
+                  stroke="red"
+                  color="green"
+                  viewBox="-16 -16 544 544"
+                  >
+                  <path
+                    d="M318.37,85.45L422.53,190.11,158.89,455,54.79,350.38ZM501.56,60.2L455.11,13.53a45.93,45.93,0,0,0-65.11,0L345.51,58.24,449.66,162.9l51.9-52.15A35.8,35.8,0,0,0,501.56,60.2ZM0.29,497.49a11.88,11.88,0,0,0,14.34,14.17l116.06-28.28L26.59,378.72Z"
+                    strokeWidth="32"
+                  />
+                  <path d="M0,0L512,512" stroke="currentColor" strokeWidth="32" />
+                  </svg>
+                `}
+              />
+              <Icon size={46} xml={xml} />
+              <Icon name="apple" height={42} width={40} fill="#E3BD8D" stroke="#4d4030" />
+              <Icon name="apple" height={42} width={40} fill="#E2D849" stroke="#FF9900" />
             </Card>
             <Card title="UIW Icon" extra={<LinkButtons />}>
               <View style={styles.list}>
