如何在 React Native 中导入和显示“svg”文件

Question

I have an svg file:

<svg xmlns="http://www.w3.org/2000/svg" width="260.346" height="65.709" viewBox="0 0 260.346 65.709">
  <g id="logo" transform="translate(-0.763 -0.949)">
    <path id="text" d="M229.184,75.248h2.56V57.7h-2.56ZM236.318,57.7V75.248H238.7V62.6c0-.249-.009-.481-.025-.7s-.03-.43-.038-.646q-.018-.386-.061-.771c.132.165.244.31.335.434s.187.246.287.361.206.235.323.359.256.278.423.461l12.428,13.148h2.436V57.7h-2.386V70.513a5.447,5.447,0,0,0,.025.547c.016.174.032.361.05.56s.041.456.074.771c-.216-.265-.395-.481-.535-.646s-.273-.323-.4-.472-.263-.309-.4-.46-.319-.344-.534-.559L238.877,57.7h-2.56Zm21.5,13.994q.2.274.547.721a5.807,5.807,0,0,0,.969.944,8.765,8.765,0,0,0,1.566.97,11.736,11.736,0,0,0,2.286.82,15.145,15.145,0,0,0,2.187.385,21.478,21.478,0,0,0,2.336.138,14.858,14.858,0,0,0,4.7-.66,5.831,5.831,0,0,0,3.008-2.124,4.4,4.4,0,0,0,.733-1.6,6.733,6.733,0,0,0,.162-1.329,4.472,4.472,0,0,0-.361-1.877A4.064,4.064,0,0,0,275,66.76a4.946,4.946,0,0,0-1.292-.857,7.934,7.934,0,0,0-1.428-.5q-.563-.123-1.132-.212t-1.13-.136q-1.193-.125-2.374-.224t-2.373-.224A14.071,14.071,0,0,1,263.3,64.3a2.233,2.233,0,0,1-1.18-.708,1.929,1.929,0,0,1-.522-1.342,2.469,2.469,0,0,1,.323-1.157,2.645,2.645,0,0,1,1.243-1.055,6.374,6.374,0,0,1,1.976-.56,16.76,16.76,0,0,1,2.25-.161,12.99,12.99,0,0,1,2.832.31,7.14,7.14,0,0,1,2.587,1.157,3.915,3.915,0,0,1,.533.434c.14.142.3.3.486.486l2.262-.92a8.9,8.9,0,0,0-.746-.92,6.5,6.5,0,0,0-1.019-.845,9.107,9.107,0,0,0-3.331-1.405,18.5,18.5,0,0,0-3.654-.36q-.4,0-1.168.037a14.786,14.786,0,0,0-1.678.187,12.784,12.784,0,0,0-1.864.459,6.156,6.156,0,0,0-1.74.883,4.55,4.55,0,0,0-1.279,1.441,4.19,4.19,0,0,0-.5,2.113,5.167,5.167,0,0,0,.224,1.4,3.439,3.439,0,0,0,1.019,1.529,4.4,4.4,0,0,0,1.081.721,6.489,6.489,0,0,0,1.4.447,18.178,18.178,0,0,0,1.975.285q1.156.112,2.8.262,1.316.1,2.448.235a9.426,9.426,0,0,1,1.977.436,3.193,3.193,0,0,1,1.329.832,2.087,2.087,0,0,1,.486,1.455,2.944,2.944,0,0,1-1.53,2.585,8.333,8.333,0,0,1-4.436.969,16.324,16.324,0,0,1-3.43-.361,8.632,8.632,0,0,1-3.132-1.354,8.089,8.089,0,0,1-.759-.585,4.038,4.038,0,0,1-.459-.484l-2.287.945ZM279.961,57.7V68.016q0,.746.049,1.528a6.422,6.422,0,0,0,.3,1.554,5.5,5.5,0,0,0,.771,1.5,5.923,5.923,0,0,0,1.441,1.38,8.27,8.27,0,0,0,3.1,1.342,16.711,16.711,0,0,0,3.392.348,13.39,13.39,0,0,0,3.841-.461,9.668,9.668,0,0,0,2.423-1.055,5.418,5.418,0,0,0,1.554-1.4,5.959,5.959,0,0,0,.8-1.541,5.751,5.751,0,0,0,.3-1.541q.037-.757.036-1.428V57.7h-2.51V68.438q0,.546-.036,1.144a4.109,4.109,0,0,1-.249,1.168,3.518,3.518,0,0,1-.671,1.094,3.714,3.714,0,0,1-1.306.895,7.447,7.447,0,0,1-1.8.558,12.193,12.193,0,0,1-2.35.212,11.958,11.958,0,0,1-1.839-.124,9.34,9.34,0,0,1-1.379-.311,5.422,5.422,0,0,1-.969-.4q-.321-.173-.634-.36a3.924,3.924,0,0,1-.906-.784,3.137,3.137,0,0,1-.522-.919,4.576,4.576,0,0,1-.248-1.119,13.389,13.389,0,0,1-.063-1.379V57.7h-2.51Zm34.747,2.113q.435,0,.87.025a3.787,3.787,0,0,1,.87.149,2.728,2.728,0,0,1,.8.385,2.529,2.529,0,0,1,.671.734,2.74,2.74,0,0,1,.4.881,3.909,3.909,0,0,1,.125.982,3.81,3.81,0,0,1-.125.956,2.341,2.341,0,0,1-.472.908,2.729,2.729,0,0,1-.87.77,4,4,0,0,1-1.044.4,6.126,6.126,0,0,1-1.105.149q-.541.024-1.082.025h-8.674V59.814h9.644ZM302.6,75.248h2.485V68.239h8.475l5.941,7.009h3.256L316.3,67.841q.447-.074,1.231-.273a5.1,5.1,0,0,0,1.566-.721,4.557,4.557,0,0,0,1.354-1.467,4.806,4.806,0,0,0,.572-2.51,5.55,5.55,0,0,0-.161-1.4,4.956,4.956,0,0,0-.411-1.069,5.167,5.167,0,0,0-.509-.782,3.131,3.131,0,0,0-.486-.5,4.718,4.718,0,0,0-1.193-.808,6.124,6.124,0,0,0-1.254-.422,7.371,7.371,0,0,0-1.268-.161q-.6-.024-1.206-.025H302.6V75.248Zm35.145-6.363h-8.674l3.7-7.282c.082-.165.156-.323.224-.472s.133-.307.2-.472q.074-.2.136-.373c.042-.116.079-.232.113-.348.034.116.066.228.1.335s.066.221.1.336c.066.149.128.3.186.447a3.683,3.683,0,0,0,.212.447l3.7,7.382Zm-14.639,6.363h2.784l2.137-4.325h10.787l2.138,4.325h2.858l-9-17.573h-2.634l-9.072,17.573ZM346.274,57.7V75.248h2.386V62.6c0-.249-.009-.481-.025-.7s-.03-.43-.039-.646q-.018-.386-.061-.771c.132.165.244.31.335.434s.187.246.287.361.206.235.323.359.256.278.423.461L362.33,75.248h2.436V57.7H362.38V70.513a5.45,5.45,0,0,0,.025.547c.016.174.033.361.05.56s.041.456.074.771c-.216-.265-.395-.481-.535-.646s-.274-.323-.4-.472-.263-.309-.4-.46-.319-.344-.533-.559L348.834,57.7h-2.56ZM386.711,69.88a6.914,6.914,0,0,1-.633.981,6.061,6.061,0,0,1-1.132,1.132,7.478,7.478,0,0,1-2.187,1.068,11.081,11.081,0,0,1-3.405.447,10.9,10.9,0,0,1-3.952-.659,6.633,6.633,0,0,1-2.436-1.578,6.16,6.16,0,0,1-1.417-2.386,8.838,8.838,0,0,1-.4-2.61,6.865,6.865,0,0,1,.671-3.17,6.094,6.094,0,0,1,1.79-2.138,7.479,7.479,0,0,1,2.573-1.218,11.778,11.778,0,0,1,3.019-.385,10.828,10.828,0,0,1,3.046.4,8.126,8.126,0,0,1,2.149.919,4.731,4.731,0,0,1,1.218,1.094,11.393,11.393,0,0,1,.7,1.069l2.684-.6q-.21-.359-.434-.709a8.564,8.564,0,0,0-.646-.87,9.585,9.585,0,0,0-.908-.931,9.319,9.319,0,0,0-1.218-.92,9.061,9.061,0,0,0-1.864-.87,14.471,14.471,0,0,0-1.889-.5,14.041,14.041,0,0,0-1.69-.224q-.62-.044-1.243-.05a14.614,14.614,0,0,0-2.945.26,12.37,12.37,0,0,0-2.138.621,7.9,7.9,0,0,0-1.43.734q-.546.373-.82.6a12.416,12.416,0,0,0-1.006.895,7.108,7.108,0,0,0-1.069,1.379,8.2,8.2,0,0,0-.845,1.977,9.681,9.681,0,0,0-.336,2.709,10.049,10.049,0,0,0,.659,3.665,7.946,7.946,0,0,0,1.989,2.958,9.419,9.419,0,0,0,3.33,1.977,13.84,13.84,0,0,0,4.684.721q.847,0,1.69-.088a16.152,16.152,0,0,0,1.814-.285,13.518,13.518,0,0,0,1.828-.535,9.088,9.088,0,0,0,1.726-.857,9.2,9.2,0,0,0,1.118-.845,8.01,8.01,0,0,0,.833-.858,7.465,7.465,0,0,0,.633-.882q.274-.447.522-.895Zm5.841,5.369h16.827V73.086H395.037V67.171h13.347V65.107H395.037V59.863h13.72V57.7H392.552ZM229.209,48.933h2.336V38q0-1.044-.012-1.679-.01-.54-.038-1.08-.021-.411-.063-.82c-.023-.249-.053-.538-.086-.87q.175.483.373.958.174.408.361.845t.422.943q.234.511.608,1.256L238.6,48.932h2.287l5.99-12.378c.165-.348.307-.642.423-.883q.163-.338.311-.683c.091-.215.181-.436.274-.66s.194-.509.31-.857q-.067.49-.113.982t-.061.993q-.028.671-.037,1.342-.015,1.026-.013,2.051V48.932h2.337V31.385h-3.38l-5.543,11.508q-.252.548-.509,1.093c-.142.3-.266.584-.373.858s-.217.554-.323.844-.237.644-.386,1.057c-.165-.414-.307-.766-.422-1.057s-.228-.567-.335-.832q-.18-.438-.373-.87-.268-.59-.56-1.168l-5.468-11.433h-3.43V48.932Zm25.178,0h2.56V31.385h-2.56Zm7.134-17.548V48.933h2.386V36.281c0-.248-.009-.481-.025-.7s-.03-.431-.038-.646q-.018-.386-.061-.771c.132.165.244.312.335.434s.187.246.287.361.206.235.323.361.256.277.423.459l12.428,13.148h2.436V31.385h-2.386V44.2a5.443,5.443,0,0,0,.025.545c.016.175.032.361.05.56s.041.456.074.77c-.216-.265-.395-.481-.535-.646s-.273-.323-.4-.472-.263-.309-.4-.461-.319-.344-.534-.558L264.08,31.385h-2.56Zm23.138,17.548h16.827V46.77H287.144V40.854h13.347V38.792H287.144V33.547h13.72V31.385h-16.2V48.932ZM316.8,33.5c.282,0,.572.009.87.025a3.769,3.769,0,0,1,.87.149,2.689,2.689,0,0,1,.8.386,2.513,2.513,0,0,1,.671.732,2.754,2.754,0,0,1,.4.882,3.837,3.837,0,0,1,0,1.94,2.346,2.346,0,0,1-.472.906,2.73,2.73,0,0,1-.87.771,4.005,4.005,0,0,1-1.044.4,6.126,6.126,0,0,1-1.105.149q-.541.024-1.082.025h-8.674V33.5H316.8Zm-12.1,15.435h2.485V41.923h8.475l5.941,7.009h3.256l-6.462-7.407q.447-.075,1.231-.274a5.1,5.1,0,0,0,1.566-.72,4.561,4.561,0,0,0,1.354-1.467,4.807,4.807,0,0,0,.572-2.51,5.534,5.534,0,0,0-.161-1.4,4.948,4.948,0,0,0-.411-1.07,5.178,5.178,0,0,0-.509-.782,3.149,3.149,0,0,0-.486-.5,4.684,4.684,0,0,0-1.193-.807,5.953,5.953,0,0,0-1.254-.422,7.233,7.233,0,0,0-1.268-.162q-.6-.024-1.206-.025h-11.93V48.932Zm30.845-4.3q-.149.323-.248.533a3.528,3.528,0,0,0-.162.411c-.041.133-.077.273-.111.422s-.075.332-.125.547a10.278,10.278,0,0,0-.361-1.118q-.092-.239-.2-.472-.137-.3-.285-.6L327.93,31.385h-2.759L333.6,48.932h2.51l8.277-17.547H341.65l-6.114,13.248Zm23.811-2.063h-8.674l3.7-7.282c.082-.165.156-.323.224-.472s.132-.307.2-.472c.05-.133.095-.257.136-.373s.079-.233.113-.348c.032.115.066.228.1.335l.1.336c.066.149.127.3.186.447a3.634,3.634,0,0,0,.212.447l3.7,7.382Zm-14.639,6.363h2.784l2.138-4.325h10.787l2.138,4.325h2.858l-9-17.572H353.78l-9.072,17.573Z" transform="translate(-148.27 -19.74)" fill="#fff"/>
    <path id="bg" d="M.763.949H66.472V66.658H.763Z" fill="#082240" fill-rule="evenodd"/>
    <g id="Group_1" data-name="Group 1" transform="translate(-2.092 0.96)">
      <path id="Path_4" data-name="Path 4" d="M128.559,49.729h4.208v4.208h-4.208Z" transform="translate(-79.953 -34.664)" fill="#fff" fill-rule="evenodd"/>
      <path id="Path_5" data-name="Path 5" d="M128.559,49.729h24.208v4.208H128.559Z" transform="translate(-109.953 -34.664)" fill="#fff" fill-rule="evenodd"/>
      <path id="Path_6" data-name="Path 6" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-79.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
      <path id="Path_7" data-name="Path 7" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-89.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
      <path id="Path_8" data-name="Path 8" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-99.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
      <path id="Path_9" data-name="Path 9" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-109.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
    </g>
  </g>
</svg>

My problem it's that I can't import the svg like this:

import Svg from "../assets/svg.svg";

And display it's in the jsx like react:

    <div>
    <Svg />
    </div>

Now, I import my svg as functional component and display inside the Jsx :

 <View style={styles.footerLogo}>
          <Text style={styles.footerText}>
            Developed by <Svg /> // Svg its a functional  component.
          </Text>
        </View>

My question is, How can I import svg as local file and display it in my code?

Answer 1

React-Native doesn't support SVG files directly. You can use this svg support library.

https://github.com/kristerkari/react-native-svg-transformer