react-native-svg#Path JavaScript Examples

The following examples show how to use react-native-svg#Path. 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: svg-icons.js    From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 6 votes vote down vote up 
HomeIcon = (props) => {
  const height = props.height || 28;
  const width = props.width || 28;
  const fill = props.fill || '#000';
  const stroke = props.stroke || 'none';
  const strokeWidth = props.strokeWidth || 0;

  return (
    <Svg height={height} width={width} viewBox='0 0 32 32'>
      <Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
            d='M16.61,2.21a1,1,0,0,0-1.24,0L1,13.42,2.24,15,4,13.62V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V13.63L29.76,15,31,13.43ZM18,26H14V18h4Zm2,0h0V18a2,2,0,0,0-2-2H14a2,2,0,0,0-2,2v8H6V12.06L16,4.27l10,7.8V26Z'>
      </Path>
    </Svg>
  );
}
Example #2
Source File: svg-icons.js    From Solution-Starter-Kit-Disasters-2020 with Apache License 2.0 6 votes vote down vote up 
HomeIcon = (props) => {
  const height = props.height || 28;
  const width = props.width || 28;
  const fill = props.fill || '#000';
  const stroke = props.stroke || 'none';
  const strokeWidth = props.strokeWidth || 0;

  return (
    <Svg height={height} width={width} viewBox='0 0 32 32'>
      <Path fill={fill} stroke={stroke} strokeLinecap='round' strokeLinejoin='round' strokeWidth={strokeWidth}
            d='M16.61,2.21a1,1,0,0,0-1.24,0L1,13.42,2.24,15,4,13.62V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V13.63L29.76,15,31,13.43ZM18,26H14V18h4Zm2,0h0V18a2,2,0,0,0-2-2H14a2,2,0,0,0-2,2v8H6V12.06L16,4.27l10,7.8V26Z'>
      </Path>
    </Svg>
  );
}
Example #3
Source File: Icons.js    From 4noobs-mobile with MIT License 6 votes vote down vote up 
NotificationIcon = (props) => (
  <Svg
    width={24}
    height={24}
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <G clipPath="url(#prefix__clip0)" fill="#4775f2">
      <Path d="M20 10V8A8 8 0 004 8v2a4.441 4.441 0 01-1.547 3.193A4.183 4.183 0 001 16c0 2.5 4.112 4 11 4s11-1.5 11-4a4.183 4.183 0 00-1.453-2.807A4.44 4.44 0 0120 10zM9.145 21.9a2.992 2.992 0 005.71 0c-.894.066-1.844.1-2.855.1s-1.961-.032-2.855-.1z" />
    </G>
    <Defs>
      <ClipPath id="prefix__clip0">
        <Path fill="#fff" d="M0 0h24v24H0z" />
      </ClipPath>
    </Defs>
  </Svg>
)
Example #4
Source File: Arrow.js    From monsuivipsy with Apache License 2.0 6 votes vote down vote up 
SvgComponent = (props) => (
  <Svg
    width={73}
    height={58}
    viewBox="0 0 73 58"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}>
    <Path
      d="m44 .719-6 6L56.281 25H0v8h56.281L38 51.281l6 6L72.281 29 44 .719Z"
      fill="currentColor"
    />
  </Svg>
)
Example #5
Source File: Logo.ios.js    From actual with MIT License 6 votes vote down vote up 
SvgLogo = props => (
  <Svg
    {...props}
    width={30}
    height={32}
    fill="none"
    style={{
      color: "#242134",
      ...props.style
    }}
  >
    <Path
      d="M1.138 30.423l13.8-29.309a.32.32 0 0 1 .289-.184h.605a.32.32 0 0 1 .287.18l8.903 18.29 2.791-1.074a.32.32 0 0 1 .414.184l.742 1.932a.32.32 0 0 1-.183.413l-2.574.99 3.175 6.524a.32.32 0 0 1-.147.428l-1.861.905a.32.32 0 0 1-.428-.147l-3.277-6.733-21.98 8.453a.32.32 0 0 1-.415-.189l-.152-.418a.32.32 0 0 1 .01-.245zM15.56 6.152L5.85 26.774l16.634-6.398L15.56 6.152z"
      fill="currentColor"
    />
    <Path
      d="M21.777 14.568l.932 2.544-21.203 7.775a.32.32 0 0 1-.41-.19l-.713-1.944a.32.32 0 0 1 .19-.41l21.204-7.775z"
      fill="currentColor"
    />
  </Svg>
)