我和我的团队正在构建一个 React 应用程序,我们希望导入 SVG,而不是作为字符串,这样我们就能够将其用作组件。
由于我们使用 CRA 安装了该项目,因此 SVGR 已安装并处于 webpack 配置中。
我们想知道是否有其他方法可以导入 SVG 文件而不是使用import {ReactComponent as Logo} from '../path'
但使用类似的东西import Logo from '../path'
.
这样使用它有什么好处吗?
实际上,我们可以按照我们想要的方式导入它,但我们不能在图像标签之外使用它。
Thanks.
您可以创建您的自定义组件,例如
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>
)
}
Warning:小心使用 SVG 的 Pros。因为在 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
通过将 file 指定为单个参数来转换单个文件。
npx @svgr/cli -- icons/clock-icon.svg
您可以在他们的官方文档链接中找到更多信息here https://react-svgr.com/docs/cli/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)