I would simply like to render three svg images in my reactjs application. I've come across dozens of articles and posts but would like to know what is the BEST/ CORRECT way of rendering a svg in Reactjs (2019)???
Initially I was using "object type="image/svg+xml" data{...} .... which i've learn isn't the correct way to render svgs.
I then learn "xlink:href" => "xlinkHref in Reactjs" is/ was the best practice for rendering svgs, yet this is not working in my React App.
Can some please tell me if xlinkHref is the correct way to render svgs in Reactjs (2019) ? If not, can some please point me in the direction?
Edit: Update with Solution.
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Icon from './SvgIcons';
class PrimaryFourCol extends Component {
render() {
return (
<div className="full-width-row home-primary-bg">
<div className="row-container">
<h1 className="h1-header text-center lrg-btn-sp">My Skillset</h1>
<div className="four-col-primary__container">
<div className="four-col-primary__container__item">
<Icon name="coffee" className="our-col-primary__container__item__icon" />
<h3 className="four-col-primary__container__item__header">
Front End Development
</h3>
<p className="four-col-primary__container__item__para">
Making things look good online is my specialty
</p>
</div>
<div className="four-col-primary__container__item">
<Icon name="stats" className="our-col-primary__container__item__icon" />
<h3 className="four-col-primary__container__item__header">
Back End Development
</h3>
<p className="four-col-primary__container__item__para">
Powering applications with server-side logic
</p>
</div>
<div className="four-col-primary__container__item">
<Icon name="cartrun" className="our-col-primary__container__item__icon" />
<h3 className="four-col-primary__container__item__header">
Digital Marketing & E-Commerce
</h3>
<p className="four-col-primary__container__item__para">
Social Media, YouTube and More
</p>
</div>
</div>
<div className="text-center">
<Link to="/skills" className="btn btn--blue">My Tool kit</Link>
</div>
</div>
</div>
);
}
}
export default PrimaryFourCol;
// SvgIcons.js
import React from 'react';
import icon from '../../images/sprite.svg';
const Icon = props => {
return (
<svg xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
className={`icon icon-${props.name}`}>
<use xlinkHref={`${icon}#icon-${props.name}`}/>
</svg>
)
};
export default Icon
