react-native-svg#Path TypeScript Examples

function Rule(props: configType) {
  const {thickness, width, color, type, dashWidth, dashGap} = props.config;
  if (type === 'solid') {
    return (
      <Svg height={thickness} width={width} {...props}>
        <G fill="lightgray" stroke={color} strokeWidth={thickness}>
          <Path d={`M0 ${thickness / 2}h${width}`} />
        </G>
      </Svg>
    );
  }
  return (
    <Svg height={thickness} width={width} {...props}>
      <G fill="lightgray" stroke={color} strokeWidth={thickness}>
        <Path
          strokeDasharray={`${dashWidth},${dashGap}`}
          d={`M0 ${thickness / 2}h${width}`}
        />
      </G>
    </Svg>
  );
}

function Add({ width = 24, height = 24, fillColor = "#241332" }: Props) {
  return (
    <Svg viewBox="0 0 24 24" {...{ width, height }}>
      <Defs>
        <ClipPath id="prefix__a">
          <Path fill="none" d="M0 0h24v24H0z" />
        </ClipPath>
      </Defs>
      <G data-name="icon/add" clipPath="url(#prefix__a)">
        <Path fill="none" d="M0 0h24v24H0z" />
        <Path
          // eslint-disable-next-line max-len
          d="M11.25 19.25v-6.5h-6.5a.75.75 0 010-1.5h6.5v-6.5a.75.75 0 111.5 0v6.5h6.5a.75.75 0 010 1.5h-6.5v6.5a.75.75 0 11-1.5 0z"
          fill={fillColor}
        />
      </G>
    </Svg>
  );
}

export default function AvatarMask () {

    return (
        <Svg viewBox="0 0 93 95" fill="none">
            <Path fill-rule="evenodd" clip-rule="evenodd" d="M71.8232 84.5847C72.4109 84.156 72.991 83.7104 73.5627 83.2478C77.7064 79.8945 80.9982 75.8198 83.4473 71.298C83.6977 70.8891 83.9441 70.476 84.1866 70.0587C87.877 63.7086 92.9504 54.9272 92.9997 47.1397C93.0409 40.6297 89.1779 34.4492 85.7015 28.8869C85.241 28.1502 84.7871 27.424 84.3502 26.7096C78.6429 14.9718 67.8528 6.14233 54.5701 3.01111C53.8343 2.65922 53.1722 2.21525 52.5184 1.77694C51.3089 0.965981 50.1283 0.174403 48.5637 0.0212883C47.2136 -0.110839 45.4665 0.395719 43.7718 0.887119C42.6647 1.20813 41.5799 1.52267 40.6426 1.64847C36.287 1.90108 32.2102 2.74891 28.4517 4.10598C23.9732 5.69944 19.6917 8.06149 15.7957 11.2142C13.7974 12.8313 11.5695 13.8566 9.50137 14.8085C6.87327 16.018 4.50321 17.1088 3.19027 19.1441C1.99361 20.9992 2.10063 23.3512 2.21179 25.7941C2.30216 27.78 2.39525 29.8259 1.79292 31.7138C-0.780717 39.7802 -0.509382 49.2855 2.13065 58.252C2.22247 58.7218 2.31863 59.1887 2.41927 59.6505C2.97575 61.7043 4.06376 64.106 5.2556 66.3787C6.58983 69.1509 8.16354 71.7988 9.95987 74.2524C10.1402 74.5223 10.2417 74.6698 10.2417 74.6698C10.2417 74.6698 10.3424 74.7955 10.5384 75.0258C10.779 75.3406 11.0234 75.652 11.2715 75.9598C18.1393 84.4795 27.4162 89.8721 37.2591 91.9221C37.7002 92.0286 38.1413 92.126 38.5819 92.2138C39.1311 92.3993 39.6766 92.602 40.2228 92.8049C42.1222 93.5106 44.029 94.2191 46.1241 94.2191C48.0923 94.2191 50.1886 93.5184 52.2115 92.8423C53.0827 92.5511 53.9403 92.2644 54.7681 92.0403C55.6354 91.8699 56.4987 91.6727 57.3568 91.4486C61.7068 90.3884 65.3367 88.6878 69.1897 86.4529C70.0928 85.8663 70.9705 85.243 71.8232 84.5847ZM7.78218 21.0443C3.94692 27.5147 1.8405 35.3627 1.78516 44.1049C1.76137 47.8634 2.89875 50.447 4.1701 53.3348C4.86118 54.9046 5.59185 56.5643 6.19713 58.5515C6.79578 60.517 7.18793 62.1541 7.54429 63.6418C8.30299 66.8092 8.89943 69.2991 10.981 72.8384C13.92 77.8356 18.6961 82.5709 24.2451 86.1732C28.3422 88.5956 32.8174 90.3608 37.5278 91.2927C39.0678 91.5974 40.6233 90.7073 42.2045 89.8026C43.609 88.999 45.0338 88.1838 46.486 88.1838C47.8281 88.1838 49.1679 89.0258 50.4922 89.8583C51.9564 90.7786 53.4018 91.6871 54.8109 91.433C54.8633 91.4235 54.9156 91.414 54.9678 91.4043C58.1177 90.6833 61.1168 89.645 63.9341 88.3143C73.0371 83.6204 79.3898 75.9685 82.4637 68.8481C84.3408 65.2537 83.2282 60.0528 82.0973 55.5511C81.3843 52.7127 80.664 49.8453 80.6811 47.1397C80.6643 44.4792 81.7598 41.8724 82.8241 39.3401C84.1468 36.1927 85.4212 33.1604 84.4512 30.2833C84.2447 29.7885 84.0299 29.2967 83.8067 28.8083C80.3962 21.6875 75.0963 15.2808 68.5345 10.5293C63.6767 7.31102 58.2653 5.20437 52.6534 3.94534C51.1722 3.61303 49.5779 4.14055 47.986 4.66726C46.6844 5.09795 45.3844 5.5281 44.1492 5.48715C42.7906 5.44212 41.4938 4.95923 40.2074 4.48027C38.5715 3.87115 36.9527 3.26838 35.2458 3.58068C28.441 4.82572 21.8666 6.99802 16.1382 11.6336C12.7914 14.3419 10.0077 17.5284 7.78218 21.0443Z" fill="url(#paint0_linear)" />
            <Defs>
                <LinearGradient id="paint0_linear" x1="33.0235" y1="22.7939" x2="53.7986" y2="46.6972" gradientUnits="userSpaceOnUse">
                <Stop stopColor="#B39DFF"/>
                <Stop offset="1" stopColor="#7154DF"/>
                </LinearGradient>
            </Defs>
        </Svg>
    );
}

TabBg: React.FC<Props> = ({
  color = '#FFFFFF',
  ...props
}) => {
  return (
    <Svg
      width={75}
      height={61}
      viewBox="0 0 75 61"
      {...props}
    >
      <Path
        d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
        fill={color}
      />
    </Svg>
  )
}

KnobBubble = ({ translateX, scale, knobSize, valueLabelsBackgroundColor: fill, textStyle, textInputRef }: KnobProps) => {
  const d = useMemo(() => "M20.368027196163986,55.24077513402203 C20.368027196163986,55.00364778429386 37.12897994729114,42.11537830086061 39.19501224411266,22.754628132990383 C41.26104454093417,3.393877965120147 24.647119286738516,0.571820003300814 20.368027196163986,0.7019902620266703 C16.088935105589453,0.8321519518460209 -0.40167016290734386,3.5393865664909434 0.7742997013327574,21.806127302984205 C1.950269565572857,40.07286803947746 20.368027196163986,55.4779024837502 20.368027196163986,55.24077513402203 z", []);
  const stroke = fill;
  const height = 56;
  const svgOffset = useMemo(() => osRtl ? { right: (knobSize - 40) / 2 } : { left: (knobSize - 40) / 2 }, [knobSize]);
  return (
    <Animated.View
      style={[styles.container, { opacity: scale, transform: [{ translateX }, { translateY: height / 2 }, { scale }, { translateY: -height / 2 },] }]}
    >
      <Svg width={height * .74} height={height} style={[svgOffset, { justifyContent: 'center', alignItems: 'center' }]} >
        <Path {...{ d, fill, stroke }} strokeWidth={1} />
      </Svg>
      <TextInput editable={false} style={[styles.textInput, svgOffset, textStyle]} ref={textInputRef} />
    </Animated.View>
  )
}

KqAdd: FunctionComponent<Props> = ({ size, color, ...rest }) => {
  return (
    <Svg viewBox="0 0 1024 1024" width={size} height={size} {...rest}>
      <Path
        d="M583.55791267 440.44208733L583.55791267 11.42977713 440.44208733 11.42977713 440.44208733 440.44208733 11.42977713 440.44208733 11.42977713 583.55791267 440.44208733 583.55791267 440.44208733 1012.57022287 583.55791267 1012.57022287 583.55791267 583.55791267 1012.57022287 583.55791267 1012.57022287 440.44208733Z"
        fill={getIconColor(color, 0, '#333333')}
      />
    </Svg>
  );
}

function SvgAlignRight(props: SvgProps) {
  return (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      className="align-right_svg__feather align-right_svg__feather-align-right"
      viewBox="0 0 24 24"
      width="24"
      height="24"
      {...props}
    >
      <Path d="M21 10H7M21 6H3M21 14H3M21 18H7" />
    </Svg>
  );
}