How to show an svg icon using svg image path in react native?











up vote
4
down vote

favorite
1












I want to show SVG icons but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I tried to do that with native way but it's really hard work to show just SVG icons.



Example code:



<Svg width="80" height="80">

 <Image href={require('./svg/1f604.svg')} />

</Svg>





reactjs react-native







share|improve this question




























    up vote
    4
    down vote

    favorite
    1












    I want to show SVG icons but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I tried to do that with native way but it's really hard work to show just SVG icons.



    Example code:



    <Svg width="80" height="80">
    
 <Image href={require('./svg/1f604.svg')} />
    
</Svg>





    reactjs react-native







    share|improve this question


























      up vote
      4
      down vote

      favorite
      1









      up vote
      4
      down vote

      favorite
      1






      1





      I want to show SVG icons but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I tried to do that with native way but it's really hard work to show just SVG icons.



      Example code:



      <Svg width="80" height="80">
      
 <Image href={require('./svg/1f604.svg')} />
      
</Svg>





      reactjs react-native







      share|improve this question















      I want to show SVG icons but the thing I couldn't find the way to show. I tried to use Image and Use components of react-native-svg but they don't work with that. And I tried to do that with native way but it's really hard work to show just SVG icons.



      Example code:



      <Svg width="80" height="80">
      
 <Image href={require('./svg/1f604.svg')} />
      
</Svg>





      reactjs react-native




      reactjs react-native






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 13 at 8:32









      Sadanand

      4441918




      4441918










      asked Nov 13 at 6:54









      Anand S

      1326




      1326
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          4
          down vote



          accepted










          Initially I had the same problem when I had svg icons in my machine or saved in web url..
          I explored all the react-native-svg library but its not gud to include source of svg icon already created. We can create new icons out of that library.



          Later I found one good library, in which we can use give path of the icon and use it.
          react-native-svg-uri
          Github Link: https://github.com/vault-development/react-native-svg-uri



          you can use it like this



          import SvgUri from 'react-native-svg-uri';



          <SvgUri
          
 width="200"
          
 height="200"
          
 source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
          
/>





          share|improve this answer





















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275402%2fhow-to-show-an-svg-icon-using-svg-image-path-in-react-native%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            4
            down vote



            accepted










            Initially I had the same problem when I had svg icons in my machine or saved in web url..
            I explored all the react-native-svg library but its not gud to include source of svg icon already created. We can create new icons out of that library.



            Later I found one good library, in which we can use give path of the icon and use it.
            react-native-svg-uri
            Github Link: https://github.com/vault-development/react-native-svg-uri



            you can use it like this



            import SvgUri from 'react-native-svg-uri';



            <SvgUri
            
 width="200"
            
 height="200"
            
 source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
            
/>





            share|improve this answer

























              up vote
              4
              down vote



              accepted










              Initially I had the same problem when I had svg icons in my machine or saved in web url..
              I explored all the react-native-svg library but its not gud to include source of svg icon already created. We can create new icons out of that library.



              Later I found one good library, in which we can use give path of the icon and use it.
              react-native-svg-uri
              Github Link: https://github.com/vault-development/react-native-svg-uri



              you can use it like this



              import SvgUri from 'react-native-svg-uri';



              <SvgUri
              
 width="200"
              
 height="200"
              
 source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
              
/>





              share|improve this answer























                up vote
                4
                down vote



                accepted







                up vote
                4
                down vote



                accepted






                Initially I had the same problem when I had svg icons in my machine or saved in web url..
                I explored all the react-native-svg library but its not gud to include source of svg icon already created. We can create new icons out of that library.



                Later I found one good library, in which we can use give path of the icon and use it.
                react-native-svg-uri
                Github Link: https://github.com/vault-development/react-native-svg-uri



                you can use it like this



                import SvgUri from 'react-native-svg-uri';



                <SvgUri
                
 width="200"
                
 height="200"
                
 source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
                
/>





                share|improve this answer












                Initially I had the same problem when I had svg icons in my machine or saved in web url..
                I explored all the react-native-svg library but its not gud to include source of svg icon already created. We can create new icons out of that library.



                Later I found one good library, in which we can use give path of the icon and use it.
                react-native-svg-uri
                Github Link: https://github.com/vault-development/react-native-svg-uri



                you can use it like this



                import SvgUri from 'react-native-svg-uri';



                <SvgUri
                
 width="200"
                
 height="200"
                
 source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
                
/>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 13 at 7:11









                chetan

                1116




                1116






























                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275402%2fhow-to-show-an-svg-icon-using-svg-image-path-in-react-native%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    How to send String Array data to Server using php in android

                    Image
                    0 I have a String array which contains value string array = {6,37,38,837,7,...} and I have also used some string values. I want to send that all string values and string array to my database which is located at server side. When I am click on submit button the data will stored in table. On the PHP side I want to read this array as it is,other thing i will do at background means PHP side. See my below code then you will get it what I am says. Here is my code: public class Hotels extends Activity { // Declare Variables JSONArray jsonarray = null; private static final String TAG_ID = "id"; public static final String TAG_NAME = "name"; public static final String TAG_LOCATION = "location"; public static final String TAG_DESC = "description"; String f_date, l_date;...
                    Read more

                    Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

                    Image
                    up vote 5 down vote favorite 2 I would like to make it so that the vertical space below the title of each chapter is the same when using the Bjornstrup package (i.e. so that the descenders do not affect the spacing - as shown by the red arrow in the picture below). I think I'm fairly happy with the spacing around "A chapter", so I'd really like titles without descenders (e.g. "Contents") to have the same vertical spacing as "A chapter" below the title. I would also like to remove the large "0" in the contents title. Any help appreciated, as always. documentclass[11pt,a4paper]{book} % Packages[![enter image description here][1]][1] usepackage[left=3.5cm, right=3.5cm, top=4.3cm, bottom=4.25cm]{geometry} usepackage[utf8]{inputenc} usepackage{libertine} usepackage[libertine]{newtx...
                    Read more

                    Is anime1.com a legal site for watching anime?

                    Image
                    up vote 4 down vote favorite 1 Other anime streaming sites are blocking my IP because I'm Iranian while anime1.com isn't. I wanted to know if it's legal to watch/stream anime from this site. Thanks. anime-production share | improve this question edited Nov 27 at 22:38 W. Are 1,599 2 23 asked Nov 27 at 20:36 mhnajafi 23 3 add a comment ...
                    Read more