react-native-svg#Polygon JavaScript Examples

The following examples show how to use react-native-svg#Polygon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Privacy.js    From real-frontend with GNU General Public License v3.0 8 votes vote down vote up 
User = ({ fill = '#333', style = {} }) => (
  <Svg height={22} width={22} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Circle cx="17.5" cy="18.5" fill="none" r="3.5"/>
      <Circle cx="6.5" cy="18.5" fill="none" r="3.5"/>
      <Polygon fill="none" points="3 12 21 12 18 8 6 8 3 12" stroke={fill}/>
      <Polyline fill="none" points="6 8 7 2 17 2 18 8" stroke={fill}/>
      <Path d="M14.1,17.713a3.437,3.437,0,0,0-4.192,0" fill="none"/>
    </G>
  </Svg>
)
Example #2
Source File: Upload.js    From real-frontend with GNU General Public License v3.0 6 votes vote down vote up 
Direct = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
      <Rect height="20" width="20" fill="none" stroke={fill} x="2" y="2"/>
      <Polygon points="5 17 8 12 11 15 15 9 19 17 5 17" stroke="none"/>
      <Circle cx="9.5" cy="7.5" r="1.5" stroke="none"/>
    </G>
  </Svg>
)
Example #3
Source File: Variance.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up 
Variance = ({ x, y, zScore }) => {
  if (zScore < 1) {
    return null;
  }
  return (
    <Polygon
      x={x}
      y={y}
      fill={(zScore >= 2) ? config.COLOR_2SD : config.COLOR_1SD}
      points="-3 0, 0 -5, 3 0"
    />
  );
}
Example #4
Source File: ScanQRCodeScreen.js    From RRWallet with MIT License 5 votes vote down vote up 
render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={cam => {
            this.camera = cam;
          }}
          style={styles.preview}
          type={this.state.camera.type}
          flashMode={this.state.camera.flashMode}
          autoFocus={RNCamera.Constants.AutoFocus.on}
          onBarCodeRead={this.onBarCodeRead.bind(this)}
          permissionDialogTitle={"请求使用相机"}
          permissionDialogMessage={"App需要获得使用相机的许可"}
        />
        <View style={styles.overlay}>
          <Svg height={height} width={width} style={styles.svg}>
            <Defs>
              <ClipPath id="clip" height={height} width={width}>
                <Rect x="0" y="0" height={height} width={width} />
                <Polygon points={polygonPoints} />
              </ClipPath>
            </Defs>
            <Path
              x={reactX}
              y={reactY}
              d={`M0 1.5 L20 1.5 M1.5 0 L1.5 20`}
              fill="none"
              stroke={theme.brandColor}
              strokeWidth="3"
            />
            <Path
              x={reactX + rectWidth}
              y={reactY}
              d={`M0 1.5 L-20 1.5 M-1.5 0 L-1.5 20`}
              fill="none"
              stroke={theme.brandColor}
              strokeWidth="3"
            />
            <Path
              x={reactX + rectWidth}
              y={reactY + rectHeight}
              d={`M0 -1.5 L-20 -1.5 M-1.5 0 L-1.5 -20`}
              fill="none"
              stroke={theme.brandColor}
              strokeWidth="3"
            />
            <Path
              x={reactX}
              y={reactY + rectHeight}
              d={`M0 -1.5 L20 -1.5 M1.5 0 L1.5 -20`}
              fill="none"
              stroke={theme.brandColor}
              strokeWidth="3"
            />
            <Rect x="0" y="0" width="100%" height="100%" fill="#000000" opacity="0.6" clipPath="url(#clip)" />
          </Svg>
          <Header
            title={i18n.wallet("title-scan")}
            titleColor={"#FFFFFF"}
            leftButtons={ScanQRCodeScreen.navigatorButtons.leftButtons}
            rightButtons={ScanQRCodeScreen.navigatorButtons.rightButtons}
            navigator={this.props.navigator}
            style={styles.header}
          />
          <Tip ref={o => (this.tip = o)} />
        </View>
      </View>
    );
  }
Example #5
Source File: FlashOn.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
FlashOn = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="2">
      <Polygon fill="none" points="13,3 3,14 12,14 11,21 21,10 12,10 " stroke={fill}/>
    </G>
  </Svg>
)
Example #6
Source File: Direct.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Direct = ({ fill = '#333', style = {} }) => (
  <Svg height={24} width={24} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Polyline fill="none" points="23 5 23 18 19 18 19 22 13 18 12 18"/>
      <Polygon fill="none" points="19 2 1 2 1 14 5 14 5 19 12 14 19 14 19 2" stroke={fill}/>
    </G>
  </Svg>
)
Example #7
Source File: Diamond.js    From real-frontend with GNU General Public License v3.0 5 votes vote down vote up 
Diamond = ({ fill = '#333', style = {} }) => (
  <Svg height={22} width={22} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <G fill={fill} stroke={fill} strokeLinecap="round" strokeWidth="1.5">
      <Line fill="none" x1="7" x2="17" y1="7" y2="7"/>
      <Polygon fill="none" points="22,7 12,21 2,7 6,2 18,2 " stroke={fill}/>
    </G>
  </Svg>
)