BMW Logo SVG as a React Native Component.

BmwSvg.jsx

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Svg, { SvgProps, Use, Symbol, G, Path } from "react-native-svg"

export default function BmwSvg(props: SvgProps) {
  return (
    <Svg style={styles.logo} width="80%" height="80%" focusable="false" {...props}>
      <Use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#icon-bmw-logo-gray">
        <Symbol viewBox="0 0 340 340" id="icon-bmw-logo-gray" xmlns="http://www.w3.org/2000/svg">
          <G fill="#6f6f6f">
            <Path d="M170 0a170 170 0 100 340 170 170 0 000-340zm159 170a159 159 0 11-318 0 159 159 0 01318 0z" />
            <Path d="M170 69v6c53 0 95 43 95 95h6c0-56-45-101-101-101m0 196c-52 0-95-42-95-95h-6c0 56 45 101 101 101" />
            <Path d="M253 98l7 9 34-22a229 229 0 00-6-8l-22 14-1 2 1-2 9-19-6-7-20 10-1 1 1-2 14-22-8-6-22 34 9 8 21-11 1-1-1 1zm-79-44l10-21v-2 2l1 28 10 2-1-42-14-1-10 23v2-2l-10-23-14 1-1 42 10-2 1-28v-2 2l10 21zM98 88c6-6 9-13 3-19-3-4-8-4-12-3v1-1c1-1 1-7-3-10-3-2-5-3-8-2-5 0-9 4-20 16L47 83l30 27 21-22zm-38-7a183 183 0 0118-19c2 0 4 1 4 3 1 2 0 4-2 6L66 86zm11 11l15-16 4-3h4l1 4c0 2-2 3-3 4L77 97z" />
          </G>
          <Path fill="#0066b1" d="M170 69v101H69c0-56 45-101 101-101zm101 101c0 56-45 101-101 101V170z" />
        </Symbol>
      </Use>
    </Svg>
  )
}

const styles = StyleSheet.create({
  logo: {
    height: 196,
    width: 196,
    margin: [8, 'auto'],
    marginTop: 10,
    marginBottom: 20,
  }
});