[英]Best practice to import svg in React Native
I'm new to React native.我是 React Native 的新手。 I do the svg import as in the code below.
我按照下面的代码执行 svg 导入。 But it doesn't looking well when it's too much.
但是当它太多时它看起来并不好。 Is there a simpler way to do this?
有没有更简单的方法来做到这一点?
import React from 'react'; import LeftArrow from '../../assets/svgs/left-arrow.svg' import RightArrow from '../../assets/svgs/right-arrow.svg' import HeaderLogo from '../../assets/svgs/header-logo.svg' import NotificationOn from '../../assets/svgs/notification-on.svg' export default function SignUp() { return ( <> <LeftArrow width="100%" height="100%" /> <RightArrow width="100%" height="100%" /> <HeaderLogo width="100%" height="100%" /> <NotificationOn width="100%" height="100%" /> </> ) }
For example how can I use svg like this as I export and import images below例如,当我在下面导出和导入图像时,如何使用 svg
// src/assets/images/index.js export const woman = require('./woman.png'); export const signUp = require('./signup-bg.png'); // src/screen/SignUp.js import { woman, signUp } from '../../assets/images/index.js'
Look at react-native-svg
but you'll need the SVG file contents instead of bringing it in like an image.查看
react-native-svg
,但您需要 SVG 文件内容,而不是像图像一样将其引入。
Quick example:快速示例:
import Svg, {Path} from 'react-native-svg`
const LeftArrow = (props) => {
return (
<Svg width={48} height={48} viewbox="0 0 48 48" {..props}>
<Path d="something" fill="#00000" />
</Svg>
)
}
export default LeftArrow
but you could template the the file and bring in what you need from each SVG.但是你可以模板化文件并从每个 SVG 中引入你需要的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.