我只想在我的reactjs应用程序中渲染三个svg图像。我读过几十篇文章和帖子，但想知道在 Reactjs (2019) 中渲染 svg 的最佳/正确方法是什么？？？
最初我使用的是“object type=”image/svg+xml” data{...} ....我了解到这不是渲染 svgs 的正确方法。
然后我了解到“xlink：href”=>“Reactjs中的xlinkHref”是/是渲染svgs的最佳实践，但这在我的React应用程序中不起作用。
有人可以告诉我 xlinkHref 是否是在 Reactjs (2019) 中渲染 svgs 的正确方法吗？如果没有的话，有人可以指点我的方向吗？
编辑：使用解决方案更新。
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
将 Create React App 更新至 2.0。在
package.jsonreact-scripts// ... other dependencies ...
"react-scripts": "2.0.3"
安装依赖项：
npm install
现在您可以导入
svgimport React from 'react';
import { ReactComponent as YourSvg } from './YourSvg.svg';
const MyComponent = () => {
return(
<YourSvg/>
);
}
export default MyComponent ;
我在reactjs组件中使用SVG，
<svg className="small-icn" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style={{ enableBackground: 'new 0 0 16 16' }} xmlSpace="preserve">
<path d=""/>
</svg>
检查一下它可能有效
React jsx 代码
import React from "react";
const SocialNetwork = props => {
return (
<section className="socialnetworks_container">
<div className="socialnetworks">
<a
href="https://www.facebook.com/PitayaVentures"
rel="noopener noreferrer"
target="_blank"
>
<svg
id="facebook_logo"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
>
<switch>
<g>
<path
className="st0"
d="M0,0v32h17V19.6h-4.1v-5H17v-4.2c0-3.1,2.5-5.6,5.6-5.6c0,0,0,0,0,0H27v4.5h-3.1c-1,0-1.8,0.8-1.8,1.8v3.5 h4.8l-0.7,5h-4.1V32H32V0H0z"
/>
</g>
</switch>
</svg>
</a>
<a
href="https://www.instagram.com/PitayaVenturesMx"
rel="noopener noreferrer"
target="_blank"
>
<svg
id="Instagram"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
>
<switch>
<g>
<path
className="st0"
d="M22.5,0H9.5C4.3,0,0,4.3,0,9.5v12.9C0,27.7,4.3,32,9.5,32h12.9c5.3,0,9.5-4.3,9.5-9.5V9.5 C32,4.3,27.7,0,22.5,0z M22.5,28.8H9.5c-3.5,0-6.3-2.8-6.3-6.3V9.5C3.2,6,6,3.2,9.5,3.2h12.9c3.5,0,6.3,2.8,6.3,6.3v12.9 C28.8,26,26,28.8,22.5,28.8z"
/>
<path
className="st0"
d="M16,7.7c-4.6,0-8.3,3.7-8.3,8.3s3.7,8.3,8.3,8.3s8.3-3.7,8.3-8.3C24.3,11.4,20.6,7.7,16,7.7z M16,21.1 c-2.8,0-5.1-2.3-5.1-5.1s2.3-5.1,5.1-5.1s5.1,2.3,5.1,5.1v0C21.1,18.8,18.8,21.1,16,21.1z"
/>
<circle className="st0" cx="24.3" cy="7.8" r="2" />
</g>
</switch>
</svg>
</a>
<a
href="https://www.linkedin.com/company/pitayaventures"
rel="noopener noreferrer"
target="_blank"
>
<svg
id="LinkdIn"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 33.5 32"
>
<switch>
<g>
<path
id="LinkedIn"
className="st0"
d="M33.5,19.6V32h-7.2V20.5c0-2.9-1-4.9-3.6-4.9c-1.7,0-3.1,1.1-3.7,2.6c-0.2,0.6-0.3,1.2-0.2,1.8 V32h-7.2c0,0,0.1-19.6,0-21.6h7.2v3.1v0.1l0,0v-0.1c1.3-2.3,3.8-3.7,6.5-3.6C30.1,9.9,33.5,13,33.5,19.6z M4.1,0 C2.1-0.2,0.2,1.3,0,3.4s1.3,3.9,3.4,4.1c0.2,0,0.4,0,0.7,0l0,0c2.1,0.2,3.9-1.3,4.1-3.4C8.4,2.1,6.8,0.2,4.8,0C4.6,0,4.3,0,4.1,0z M0.5,32h7.2V10.4H0.5V32z"
/>
</g>
</switch>
</svg>
</a>
<a
href="https://twitter.com/PitayaVentures"
rel="noopener noreferrer"
target="_blank"
>
<svg
id="twitter"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 26.6"
>
<switch>
<g>
<path
className="st0"
d="M31.5,3.1c-0.7,0.3-1.5,0.6-2.2,0.7c0.8-0.8,1.5-1.8,1.8-2.8l0,0c0.1-0.2,0-0.4-0.2-0.5c-0.1,0-0.2,0-0.3,0 l0,0c-1.1,0.6-2.2,1.1-3.4,1.3C27.1,2,27.1,2,27,2c-0.2,0-0.4-0.1-0.6-0.2C25.1,0.6,23.5,0,21.8,0c-0.7,0-1.5,0.1-2.2,0.3 c-2.2,0.7-4,2.5-4.5,4.8C14.9,6,14.9,6.8,15,7.7c0,0.1,0,0.1-0.1,0.2C14.9,7.9,14.8,8,14.7,8l0,0C9.9,7.5,5.4,5.1,2.3,1.3l0,0 C2.2,1.2,1.9,1.1,1.8,1.2c0,0-0.1,0.1-0.1,0.1l0,0C0.1,4.1,0.5,7.5,2.8,9.8C2.2,9.6,1.7,9.4,1.2,9.2l0,0c-0.2-0.1-0.4,0-0.5,0.1 c0,0.1,0,0.1,0,0.2l0,0c0,2.7,1.5,5.2,4,6.4H4.6c-0.4,0-0.8,0-1.2-0.1l0,0C3.2,15.7,3,15.8,3,16c0,0.1,0,0.1,0,0.2h0 c0.8,2.5,2.9,4.3,5.5,4.7c-2.1,1.4-4.6,2.2-7.1,2.2H0.5c-0.2,0-0.5,0.2-0.5,0.4c-0.1,0.2,0,0.5,0.3,0.6c2.9,1.7,6.2,2.6,9.5,2.6 c2.8,0,5.6-0.6,8.1-1.7c2.3-1.1,4.3-2.6,5.9-4.5c1.6-1.8,2.8-3.9,3.6-6.1c0.8-2.1,1.2-4.4,1.2-6.7V7.6c0-0.4,0.2-0.7,0.4-0.9 c1.1-0.9,2-1.9,2.8-3l0,0C32,3.5,32,3.3,31.8,3.1C31.7,3.1,31.6,3.1,31.5,3.1L31.5,3.1z"
/>
</g>
</switch>
</svg>
</a>
</div>
</section>
);
};
export default SocialNetwork;
CSS代码
.socialnetworks_container{
display: flex;
align-content: center;
justify-content: center;
}
.socialnetworks{
justify-content: space-between;
align-items: center;
}
.socialnetworks svg{
fill:white;
width: 1rem;
padding: .5rem;
}
:)
在 Vite 中你可以安装 vite-plugin-svgr，也可以查看这个 answer。