Je voudrais simplement rendre trois images svg dans mon application reactjs. J'ai trouvé des dizaines d'articles et de messages mais j'aimerais savoir quelle est la MEILLEURE/ CORRECTE façon de rendre un svg dans Reactjs (2019) ????
Au départ, j'utilisais "object type="image/svg+xml" data{...} ..... J'ai appris que ce n'était pas la bonne façon de rendre les svgs.
J'ai ensuite appris que "xlink:href" => "xlinkHref in Reactjs" est/était la meilleure pratique pour rendre les svgs, pourtant cela ne fonctionne pas dans mon application React.
Quelqu'un peut-il me dire si xlinkHref est la bonne façon de rendre les svgs dans Reactjs (2019) ? Si ce n'est pas le cas, quelqu'un peut-il m'indiquer la direction à suivre ?
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
