CODEWITHSUNDEEP
javascriptreactjssvg
Norayr Ghukasyan
Norayr Ghukasyan

Reputation: 1408

Loading svg external link source in react app

I am not an expert when using svg-s , but so far i haven't had kind of problem with loading svg in React app. I am getting svg from external link source and would like to use it with svg tag and not with just image tag, because with image tag there are another problems with sizing. Problem is that SVG doesn't show in the browser. this is my svg code`

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <use linkHref="https://restcountries.eu/data/rus.svg" className="country__flag" width='300' height='100'></use>
</svg>

There are no errors in the console . Svg exists in DOM but it doesnt show . I want to import it at runtime . App is about searching countries and getting their flags , so when user searches for certain country , i make request from my server and then send it to client . Should i add some test rules for svg in webpack ?

Upvotes: 0

Views: 1242

Answers (1)

Rajan Lagah
Rajan Lagah

Reputation: 2528

Use 

<embed className='yourClassForCss' src="https://restcountries.eu/data/rus.svg">

if this is link to your website then make sure that it is static folder(that handle svg).

You dont need rules in webpack if this is other website's url

Upvotes: 1

Related Questions