Merge pull request #475 from star-hamster/dev

ChenlingasMx · web-flow · commit 1df1684219eb · 2023-02-14T09:03:27.000+08:00
doc(icon): 修改文档预览
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}>
diff --git a/packages/core/src/Icon/README.md b/packages/core/src/Icon/README.md
@@ -3,50 +3,79 @@ Icon 图标
 
 图标组件通过 [`react-native-svg`](https://github.com/react-native-community/react-native-svg) 支持 svg 图标，基于这一特性封装图标组件库，它不是基于字体文件封装的组件，相比字体图标组件易于扩展体积较小。预览[所有的图标](https://uiwjs.github.io/icons)。
 
-![](https://user-images.githubusercontent.com/66067296/137710056-d7fe4b94-7b98-4e18-a235-5a4e70beaa05.png)<!--rehype:style=zoom: 33%;float: right; margin-left: 15px;-->
 
-### 基础示例
+### 基础实例
 
-```js
-import { Icon } from '@uiw/react-native';
+```jsx  mdx:preview
+import React from "react"
+import  { Icon } from '@uiw/react-native';
 
-class Demo extends Component {
-  render() {
-    return (
-      <View>
-        <Icon name='apple' size={46} color='#50CB42' />
-        <Icon name='apple' size={46} fill='red' />
-      </View>
-    )
-  }
+export default function Demo() {
+  return (
+    <>
+      <Icon name='apple' size={46} color='#50CB42' />
+      <Icon name='apple' size={46} fill='red' />
+    </>
+  )
+}
+```
+
+### 自定义图标轮廓颜色
+
+```jsx  mdx:preview
+import React from "react"
+import  { Icon } from '@uiw/react-native';
+
+export default function Demo() {
+  return (
+    <>
+      <Icon name='apple' height={42} width={40} fill='#E3BD8D' stroke='#4d4030' />
+      <Icon name='apple' height={42} width={40} fill='#E2D849' stroke='#FF9900' />
+    </>
+  )
 }
 ```
 
-### 自定义按钮
+### 自定义图标
 
-```js
-import { Icon } from '@uiw/react-native';
+```jsx  mdx:preview
+import React from "react"
+import  { Icon } from '@uiw/react-native';
+import { View } from 'react-native';
 
-class Demo extends Component {
-  render() {
-    return (
+export default function Demo() {
+  return (
+    <>
+      <Icon
+        size={30}
+        paths={[
+          "M25 10 L98 65 L70 25 L16 77 L11 30 L0 4 L90 50 L50 10 L11 22 L77 95 L20 25"
+        ]}
+      />
+      <View style={{ width:5 , display:"inline-block"}}></View>
       <Icon
-        fill="red"
+        size={30}
         paths={[
           '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'
         ]}
-        size={18}
-        style={styles.icon}
       />
-    )
-  }
+      <View style={{ width:5 , display:"inline-block"}}></View>
+      <Icon
+        size={30}
+        paths={[
+          "M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4C32 1.79086 30.2091 0 28 0H4ZM17 6C17 5.44772 17.4477 5 18 5H20C20.5523 5 21 5.44772 21 6V25C21 25.5523 20.5523 26 20 26H18C17.4477 26 17 25.5523 17 25V6ZM12 11C11.4477 11 11 11.4477 11 12V25C11 25.5523 11.4477 26 12 26H14C14.5523 26 15 25.5523 15 25V12C15 11.4477 14.5523 11 14 11H12ZM6 18C5.44772 18 5 18.4477 5 19V25C5 25.5523 5.44772 26 6 26H8C8.55228 26 9 25.5523 9 25V19C9 18.4477 8.55228 18 8 18H6ZM24 14C23.4477 14 23 14.4477 23 15V25C23 25.5523 23.4477 26 24 26H26C26.5523 26 27 25.5523 27 25V15C27 14.4477 26.5523 14 26 14H24Z"
+        ]}
+      />
+    </>
+  )
 }
 ```
 
 ### SVG 图标支持
 
-```js
-import { Icon } from '@uiw/react-native';
+```jsx
+import React from "react";
+import  { Icon } from '@uiw/react-native';
 
 const xml = `
   <svg width="20" height="20" viewBox="0 0 20 20">
@@ -58,101 +87,59 @@ const xml = `
   </svg>
 `;
 
-class Demo extends Component {
-  render() {
-    return <Icon xml={xml} />;
-  }
+export default function Demo() {
+  return <Icon name='apple' size={46} fill='red' />
 }
 ```
 
 ### 包中集成的所有图标
 
 ⚠️ 此示例，只是在文档中预览 Icon 图标，并展示图标名称，也可以通过图标 web 官网，网站预览[所有的图标](https://uiwjs.github.io/icons)。
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noCode=true-->
-```jsx
-import { useEffect } from 'react';
-import ReactDOM from 'react-dom';
+```jsx  mdx:preview&noCode=true
+import React from "react"
+import  { Icon } from '@uiw/react-native';
+import { View , StyleSheet} from 'react-native';
 import svgPaths from '@uiw/icons/fonts/w-icon.json';
 
-function Demo() {
-  useEffect(()=>{
-    const dv = document.createElement('div')
-    dv.id='dv'
-    dv.setAttribute('style',`
-      width: 100px;
-      padding: 4px 10px;
-      border: 1px solid #fff;
-      text-align: center;
-      border-radius: 5px;
-      background: #fff;
-      box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
-      pointer-events: none;
-      font-size: 12px;
-      position: fixed;
-      top: 70px;
-      left: 0;
-      right: 0;
-      margin: 0 auto;
-      z-index: 9;
-      display: none;
-      color: green;
-    `)
-    dv.innerText = '复制成功!'
-    document.body.appendChild(dv)
-  },[])
-  const onClick = (keyname) => {
-    if (window.clipboardData) {
-      window.clipboardData.setData('text', `<Icon name="${keyname}" />`);
-      message()
-    } else {
-      (function (s) {
-        document.oncopy = function (e) {
-          e.clipboardData.setData('text', s);
-          e.preventDefault();
-          document.oncopy = null;
-        };
-      })(`<Icon name="${keyname}" size={46} />`);
-      document.execCommand('Copy');
-      message()
-    }
-  }
-  const message = () => {
-    document.getElementById('dv').style.display = 'block';
-    const timer = setTimeout(()=>{
-      document.getElementById('dv').style.display = 'none';
-      clearTimeout(timer)
-    },3000)
+const styles = StyleSheet.create({
+  itemStyle : {
+    fontSize: 14,
+    width: 130,
+    backgroundColor: '#eaeaea',
+    marginBottom: 10,
+    marginRight: 10,
+    paddingHorizontal:0,
+    paddingVertical:20,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fill: '#525252',
   }
+})
+
+export default function Demo() {
   return (
-    <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap' }}>
+    <View  style={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
       {Object.keys(svgPaths).map((keyname, idx) => {
         return (
-          <div 
-            key={idx} 
-            onClick={()=>onClick(keyname)}
-            style={{ 
-              display: 'flex',
-              cursor: 'pointer', 
-              flexDirection: 'column', 
-              width: 180, 
-              paddingBottom: 14,
-            }}
+          <View
+            key={idx}
+            style={styles.itemStyle}
           >
-            <svg viewBox="0 0 24 24" width="21">
+            <svg viewBox="0 0 24 24" width="23">
               {svgPaths[keyname].map((path, pathIdx) => (
                 <path d={path} key={pathIdx} fillRule="evenodd"/>
               ))}
             </svg>
-            <span style={{ color: '#757575' }}>{keyname}</span>
-          </div>
+            <span style={{ fontSize: 12,color: '#757575' }}>{keyname}</span>
+          </View>
         );
-      })}
-    </div>
-  );
+    })}
+    </View>
+  )
 }
-
-ReactDOM.render(<Demo />, _mount_);
 ```
 
 ### Props
diff --git a/website/src/index.css b/website/src/index.css
@@ -1,9 +1,14 @@
 body {
   font-size: 14px;
   font-family: 'Segoe UI Emoji';
-  font-family: 'Segoe UI Emoji', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-family: 'Segoe UI Emoji', -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji;
+}
+
+* {
+  outline: none;
 }
 
 a {
   text-decoration: none;
-}
+}
