使用React.JS导入SVG的最佳方式是什么

Question

我和我的团队正在构建一个react应用程序，我们希望导入SVG而不是字符串，这样我们就可以将其用作组件

由于我们已经使用CRA安装了该项目，因此SVGR已经安装并处于webpack配置中

我们想知道是否有其他方法可以导入SVG文件，不使用import {ReactComponent as Logo} from '../path'，而是使用类似import Logo from '../path'的东西。

这样使用它还有什么好处吗？事实上，我们可以按照我们想要的方式导入它，但我们不能在图像标签之外使用它。

谢谢。

Answer 1

您可以创建类似的自定义组件

const ArrowIcon = (props)=>{
return (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {...props}>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
)
}

警告：小心SVG的道具。因为在React中，SVG属性可能与HTML中的SVG不同！

你可以通过使用它

import ArrowIcon from "path/to/svgComponent"
const SimpleReact = ()=>{
return (
<div>
Arrow Icon
<ArrowIcon className="class" />
</div>
)
}

我希望它能正常工作；-(

您也可以尝试SVGR，这是一个非常棒的库，可以与React和SVG一起使用。你可以用下载

yarn add -D @svgr/cli

通过将文件指定为单个参数来转换单个文件。

npx @svgr/cli -- icons/clock-icon.svg

你可以在他们的官方文档链接中找到更多

Answer 2

通常我使用这个包react svg，它可以与样式化组件一起使用。

我用它创建了一个组件，如下所示：

import styled, { css } from "styled-components"
import { ReactSVG } from "react-svg"
const IconStyled = styled(ReactSVG)`
display: inline-flex;
width: ${props => `${props.size}px`};
height: ${props => `${props.size}px`};
align-items: center;
justify-content: center;
span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
svg {
fill: black;
width: 100%;
height: 100%;
}
path {
fill: ${props => props.color};
}
`
export default function Icon(props) {
return (
<IconStyled
src= {`/icons/${props.name}.svg`}
color={props.color || "currentColor"}
size={props.size}
wrapper="span"
{...props}
/>
)
}

然后，将所有的.svg文件放在公用文件夹中，并像这样使用它们：

<Icon name="name-of-icon" size={24} />

Answer 3

您可以使用SVGR将SVG作为react组件导入。它有很多用于不同捆绑器的插件。

我最近在vite.js中使用了SVGR插件。它非常容易使用，不需要运行脚本。

还可以使用SVGR/cli转换SVG文件。https://react-svgr.com/docs/cli/

要将SVG的整个目录转换为react组件，请使用以下脚本：

npx @svgr/cli --out-dir dist -- icons

有关详细信息，请查看文档：https://react-svgr.com/