如何正确地将基于 SVG 的组件嵌入到彼此之间？

问：

我正在努力构建一个严重依赖 SVG 资产的 React Native 应用程序。我希望将这些资源直接添加到我正在使用的组件中，而不是链接到 SVG 文件，这样我就可以动态更改 SVG 颜色、大小并即时利用其他 SVG 操作。

目前，我遇到的问题是 SVG 大小（特别是 ，以及嵌入时;特别是当嵌入的 SVG 组件添加到另一个嵌入的 SVG 组件时。请参阅以下示例以了解我的意思：viewBoxwidthheight

（演示屏幕.js）

import React from "react";
import { ImageBackground, StyleSheet } from "react-native";

import Frame_Menu_Header from "../components/Frame_Menu_Header";
import Frame_Icon from "../components/Frame_Icon";

function DemoScreen(props) {
  return (
    <Frame_Menu_Header>
      <Frame_Icon></Frame_Icon>
      <ImageBackground
        style={[styles.Frame_Icon, { marginRight: 8, marginTop: 9 }]}
        source={require("../assets/_UI/Frame_Icon.svg")}
      >
      </ImageBackground>
    </Frame_Menu_Header>  
);
}

const styles = StyleSheet.create({
Frame_Icon: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    alignContent: "center",
    width: 22,
    height: 23,
  }
});

export default DemoScreen;

（Frame_Menu_Header.js）

import React from "react";
import { StyleSheet } from "react-native";

import colors from "../config/colors";
import fonts from "../config/fonts";

function Frame_Menu_Header({ children }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 316 49"
      shape-rendering="crispEdges"
      width="316"
      height="49"
    >
      <path
        stroke={colors.black}
        d="M0 0h316M0 1h1M315 1h1M0 2h1M315 2h1M0 3h1M315 3h1M0 4h1M4 4h37M42 4h3M46 4h1M269 4h1M271 4h3M275 4h37M315 4h1M0 5h1M4 5h36M41 5h3M45 5h1M48 5h1M267 5h1M270 5h1M272 5h3M276 5h36M315 5h1M0 6h1M4 6h19M30 6h7M279 6h7M293 6h19M315 6h1M0 7h1M4 7h5M11 7h11M24 7h3M29 7h7M280 7h7M289 7h3M294 7h11M307 7h5M315 7h1M0 8h1M4 8h4M11 8h10M24 8h3M28 8h7M281 8h7M289 8h3M295 8h10M308 8h4M315 8h1M0 9h1M4 9h4M10 9h10M24 9h3M28 9h6M36 9h2M278 9h2M282 9h6M289 9h3M296 9h10M308 9h4M315 9h1M0 10h1M4 10h15M28 10h5M36 10h2M278 10h2M283 10h5M297 10h15M315 10h1M0 11h1M4 11h7M12 11h6M21 11h3M29 11h3M284 11h3M292 11h3M298 11h6M305 11h7M315 11h1M0 12h1M4 12h6M13 12h4M20 12h5M291 12h5M299 12h4M306 12h6M315 12h1M0 13h1M4 13h5M19 13h6M291 13h6M307 13h5M315 13h1M0 14h1M4 14h4M19 14h6M291 14h6M308 14h4M315 14h1M0 15h1M4 15h3M12 15h5M19 15h5M292 15h5M299 15h5M309 15h3M315 15h1M0 16h1M4 16h3M11 16h7M20 16h3M26 16h2M288 16h2M293 16h3M298 16h7M309 16h3M315 16h1M0 17h1M4 17h3M10 17h8M26 17h2M288 17h2M298 17h8M309 17h3M315 17h1M0 18h1M4 18h14M298 18h14M315 18h1M0 19h1M4 19h14M298 19h14M315 19h1M0 20h1M4 20h14M23 20h3M31 20h3M282 20h3M290 20h3M298 20h14M315 20h1M0 21h1M4 21h13M22 21h5M31 21h3M282 21h3M289 21h5M299 21h13M315 21h1M0 22h1M4 22h12M21 22h6M31 22h3M282 22h3M289 22h6M300 22h12M315 22h1M0 23h1M4 23h11M21 23h6M289 23h6M301 23h11M315 23h1M0 24h1M4 24h10M21 24h5M290 24h5M302 24h10M315 24h1M0 25h1M4 25h9M22 25h3M291 25h3M303 25h9M315 25h1M0 26h1M4 26h8M15 26h4M297 26h4M304 26h8M315 26h1M0 27h1M4 27h7M14 27h6M28 27h3M285 27h3M296 27h6M305 27h7M315 27h1M0 28h1M4 28h7M13 28h8M27 28h5M36 28h2M278 28h2M284 28h5M295 28h8M305 28h7M315 28h1M0 29h1M4 29h17M26 29h6M36 29h2M278 29h2M284 29h6M295 29h17M315 29h1M0 30h1M4 30h17M25 30h7M284 30h7M295 30h17M315 30h1M0 31h1M4 31h17M24 31h7M285 31h7M295 31h17M315 31h1M0 32h1M4 32h16M23 32h7M286 32h7M296 32h16M315 32h1M0 33h1M4 33h37M42 33h3M46 33h1M269 33h1M271 33h3M275 33h37M315 33h1M0 34h1M4 34h36M41 34h3M45 34h1M48 34h1M267 34h1M270 34h1M272 34h3M276 34h36M315 34h1M0 35h1M315 35h1M0 36h1M315 36h1M0 37h1M315 37h1M0 38h1M4 38h37M42 38h3M46 38h1M269 38h1M271 38h3M275 38h37M315 38h1M0 39h1M4 39h36M41 39h3M45 39h1M48 39h1M267 39h1M270 39h1M272 39h3M276 39h36M315 39h1M0 40h1M315 40h1M0 41h1M315 41h1M0 42h1M315 42h1M0 43h1M315 43h1M0 44h1M315 44h1M0 45h1M315 45h1M0 46h1M315 46h1M0 47h1M315 47h1M0 48h1M315 48h1"
      />
      <path
        stroke={colors.neutral}
        d="M1 1h55M58 1h4M65 1h2M71 1h1M244 1h1M249 1h2M254 1h4M260 1h55M1 2h54M57 2h4M64 2h2M70 2h1M245 2h1M250 2h2M255 2h4M261 2h54M1 3h53M56 3h4M63 3h2M69 3h1M246 3h1M251 3h2M256 3h4M262 3h53M1 4h3M312 4h3M1 5h3M312 5h3M1 6h3M312 6h3M1 7h3M312 7h3M1 8h3M312 8h3M1 9h3M312 9h3M1 10h3M312 10h3M1 11h3M312 11h3M1 12h3M312 12h3M1 13h3M312 13h3M1 14h3M312 14h3M1 15h3M312 15h3M1 16h3M312 16h3M1 17h3M312 17h3M1 18h3M312 18h3M1 19h3M312 19h3M1 20h3M312 20h3M1 21h3M312 21h3M1 22h3M312 22h3M1 23h3M312 23h3M1 24h3M312 24h3M1 25h3M312 25h3M1 26h3M312 26h3M1 27h3M312 27h3M1 28h3M312 28h3M1 29h3M312 29h3M1 30h3M312 30h3M1 31h3M312 31h3M1 32h3M312 32h3M1 33h3M312 33h3M1 34h3M312 34h3M1 35h45M48 35h4M55 35h2M61 35h1M254 35h1M259 35h2M264 35h4M270 35h45M1 36h44M47 36h4M54 36h2M60 36h1M255 36h1M260 36h2M265 36h4M271 36h44M1 37h43M46 37h4M53 37h2M59 37h1M256 37h1M261 37h2M266 37h4M272 37h43M1 42h3M312 42h3M1 45h3M312 45h3M1 46h3M312 46h3M1 47h3M312 47h3"
      />
      <path
        stroke={colors.secondary}
        d="M56 1h2M62 1h3M67 1h4M72 1h172M245 1h4M251 1h3M258 1h2M55 2h2M61 2h3M66 2h4M71 2h174M246 2h4M252 2h3M259 2h2M54 3h2M60 3h3M65 3h4M70 3h176M247 3h4M253 3h3M260 3h2M46 35h2M52 35h3M57 35h4M62 35h192M255 35h4M261 35h3M268 35h2M45 36h2M51 36h3M56 36h4M61 36h194M256 36h4M262 36h3M269 36h2M44 37h2M50 37h3M55 37h4M60 37h196M257 37h4M263 37h3M270 37h2"
      />
      <path
        stroke={colors.quinary}
        d="M41 4h1M45 4h1M47 4h39M87 4h3M91 4h1M224 4h1M226 4h3M230 4h39M270 4h1M274 4h1M40 5h1M44 5h1M46 5h2M49 5h36M86 5h3M90 5h1M93 5h1M222 5h1M225 5h1M227 5h3M231 5h36M268 5h2M271 5h1M275 5h1M23 6h7M37 6h22M66 6h7M243 6h7M257 6h22M286 6h7M9 7h2M22 7h2M27 7h2M36 7h9M47 7h11M60 7h3M65 7h7M244 7h7M253 7h3M258 7h11M271 7h9M287 7h2M292 7h2M305 7h2M8 8h3M21 8h3M27 8h1M35 8h9M47 8h10M60 8h3M64 8h7M245 8h7M253 8h3M259 8h10M272 8h9M288 8h1M292 8h3M305 8h3M8 9h2M20 9h4M27 9h1M34 9h2M38 9h6M46 9h10M60 9h3M64 9h6M72 9h2M242 9h2M246 9h6M253 9h3M260 9h10M272 9h6M280 9h2M288 9h1M292 9h4M306 9h2M19 10h9M33 10h3M38 10h17M64 10h5M72 10h2M242 10h2M247 10h5M261 10h17M280 10h3M288 10h9M11 11h1M18 11h3M24 11h5M32 11h15M48 11h6M57 11h3M65 11h3M248 11h3M256 11h3M262 11h6M269 11h15M287 11h5M295 11h3M304 11h1M10 12h3M17 12h3M25 12h21M49 12h4M56 12h5M255 12h5M263 12h4M270 12h21M296 12h3M303 12h3M9 13h10M25 13h20M55 13h6M255 13h6M271 13h20M297 13h10M8 14h11M25 14h19M55 14h6M255 14h6M272 14h19M297 14h11M7 15h5M17 15h2M24 15h19M48 15h5M55 15h5M256 15h5M263 15h5M273 15h19M297 15h2M304 15h5M7 16h4M18 16h2M23 16h3M28 16h15M47 16h7M56 16h3M62 16h2M252 16h2M257 16h3M262 16h7M273 16h15M290 16h3M296 16h2M305 16h4M7 17h3M18 17h8M28 17h15M46 17h8M62 17h2M252 17h2M262 17h8M273 17h15M290 17h8M306 17h3M18 18h36M262 18h36M18 19h36M262 19h36M18 20h5M26 20h5M34 20h20M59 20h3M67 20h3M246 20h3M254 20h3M262 20h20M285 20h5M293 20h5M17 21h5M27 21h4M34 21h19M58 21h5M67 21h3M246 21h3M253 21h5M263 21h19M285 21h4M294 21h5M16 22h5M27 22h4M34 22h18M57 22h6M67 22h3M246 22h3M253 22h6M264 22h18M285 22h4M295 22h5M15 23h6M27 23h24M57 23h6M253 23h6M265 23h24M295 23h6M14 24h7M26 24h24M57 24h5M254 24h5M266 24h24M295 24h7M13 25h9M25 25h24M58 25h3M255 25h3M267 25h24M294 25h9M12 26h3M19 26h29M51 26h4M261 26h4M268 26h29M301 26h3M11 27h3M20 27h8M31 27h16M50 27h6M64 27h3M249 27h3M260 27h6M269 27h16M288 27h8M302 27h3M11 28h2M21 28h6M32 28h4M38 28h9M49 28h8M63 28h5M72 28h2M242 28h2M248 28h5M259 28h8M269 28h9M280 28h4M289 28h6M303 28h2M21 29h5M32 29h4M38 29h19M62 29h6M72 29h2M242 29h2M248 29h6M259 29h19M280 29h4M290 29h5M21 30h4M32 30h25M61 30h7M248 30h7M259 30h25M291 30h4M21 31h3M31 31h26M60 31h7M249 31h7M259 31h26M292 31h3M20 32h3M30 32h26M59 32h7M250 32h7M260 32h26M293 32h3M41 33h1M45 33h1M47 33h39M87 33h3M91 33h1M224 33h1M226 33h3M230 33h39M270 33h1M274 33h1M40 34h1M44 34h1M46 34h2M49 34h36M86 34h3M90 34h1M93 34h1M222 34h1M225 34h1M227 34h3M231 34h36M268 34h2M271 34h1M275 34h1M41 38h1M45 38h1M47 38h39M87 38h3M91 38h1M224 38h1M226 38h3M230 38h39M270 38h1M274 38h1M40 39h1M44 39h1M46 39h2M49 39h36M86 39h3M90 39h1M93 39h1M222 39h1M225 39h1M227 39h3M231 39h36M268 39h2M271 39h1M275 39h1"
      />
      <path
        stroke={colors.quaternary}
        d="M86 4h1M90 4h1M92 4h132M225 4h1M229 4h1M85 5h1M89 5h1M91 5h2M94 5h128M223 5h2M226 5h1M230 5h1M59 6h7M73 6h22M102 6h7M207 6h7M221 6h22M250 6h7M45 7h2M58 7h2M63 7h2M72 7h9M83 7h11M96 7h3M101 7h7M208 7h7M217 7h3M222 7h11M235 7h9M251 7h2M256 7h2M269 7h2M44 8h3M57 8h3M63 8h1M71 8h9M83 8h10M96 8h3M100 8h7M209 8h7M217 8h3M223 8h10M236 8h9M252 8h1M256 8h3M269 8h3M44 9h2M56 9h4M63 9h1M70 9h2M74 9h6M82 9h10M96 9h3M100 9h6M108 9h2M206 9h2M210 9h6M217 9h3M224 9h10M236 9h6M244 9h2M252 9h1M256 9h4M270 9h2M55 10h9M69 10h3M74 10h17M100 10h5M108 10h2M206 10h2M211 10h5M225 10h17M244 10h3M252 10h9M47 11h1M54 11h3M60 11h5M68 11h15M84 11h6M93 11h3M101 11h3M212 11h3M220 11h3M226 11h6M233 11h15M251 11h5M259 11h3M268 11h1M46 12h3M53 12h3M61 12h21M85 12h4M92 12h5M219 12h5M227 12h4M234 12h21M260 12h3M267 12h3M45 13h10M61 13h20M91 13h6M219 13h6M235 13h20M261 13h10M44 14h11M61 14h19M91 14h6M219 14h6M236 14h19M261 14h11M43 15h5M53 15h2M60 15h19M84 15h5M91 15h5M220 15h5M227 15h5M237 15h19M261 15h2M268 15h5M43 16h4M54 16h2M59 16h3M64 16h15M83 16h7M92 16h3M98 16h2M216 16h2M221 16h3M226 16h7M237 16h15M254 16h3M260 16h2M269 16h4M43 17h3M54 17h8M64 17h15M82 17h8M98 17h2M216 17h2M226 17h8M237 17h15M254 17h8M270 17h3M54 18h36M226 18h36M54 19h36M226 19h36M54 20h5M62 20h5M70 20h20M95 20h3M103 20h3M210 20h3M218 20h3M226 20h20M249 20h5M257 20h5M53 21h5M63 21h4M70 21h19M94 21h5M103 21h3M210 21h3M217 21h5M227 21h19M249 21h4M258 21h5M52 22h5M63 22h4M70 22h18M93 22h6M103 22h3M210 22h3M217 22h6M228 22h18M249 22h4M259 22h5M51 23h6M63 23h24M93 23h6M217 23h6M229 23h24M259 23h6M50 24h7M62 24h24M93 24h5M218 24h5M230 24h24M259 24h7M49 25h9M61 25h24M94 25h3M219 25h3M231 25h24M258 25h9M48 26h3M55 26h29M87 26h4M225 26h4M232 26h29M265 26h3M47 27h3M56 27h8M67 27h16M86 27h6M100 27h3M213 27h3M224 27h6M233 27h16M252 27h8M266 27h3M47 28h2M57 28h6M68 28h4M74 28h9M85 28h8M99 28h5M108 28h2M206 28h2M212 28h5M223 28h8M233 28h9M244 28h4M253 28h6M267 28h2M57 29h5M68 29h4M74 29h19M98 29h6M108 29h2M206 29h2M212 29h6M223 29h19M244 29h4M254 29h5M57 30h4M68 30h25M97 30h7M212 30h7M223 30h25M255 30h4M57 31h3M67 31h26M96 31h7M213 31h7M223 31h26M256 31h3M56 32h3M66 32h26M95 32h7M214 32h7M224 32h26M257 32h3M86 33h1M90 33h1M92 33h132M225 33h1M229 33h1M85 34h1M89 34h1M91 34h2M94 34h128M223 34h2M226 34h1M230 34h1M1 38h3M86 38h1M90 38h1M92 38h132M225 38h1M229 38h1M312 38h3M85 39h1M89 39h1M91 39h2M94 39h128M223 39h2M226 39h1M230 39h1"
      />
      <path
        stroke={colors.tertiary}
        d="M95 6h7M109 6h98M214 6h7M81 7h2M94 7h2M99 7h2M108 7h100M215 7h2M220 7h2M233 7h2M80 8h3M93 8h3M99 8h1M107 8h102M216 8h1M220 8h3M233 8h3M80 9h2M92 9h4M99 9h1M106 9h2M110 9h96M208 9h2M216 9h1M220 9h4M234 9h2M91 10h9M105 10h3M110 10h96M208 10h3M216 10h9M83 11h1M90 11h3M96 11h5M104 11h108M215 11h5M223 11h3M232 11h1M82 12h3M89 12h3M97 12h122M224 12h3M231 12h3M81 13h10M97 13h122M225 13h10M80 14h11M97 14h122M225 14h11M79 15h5M89 15h2M96 15h124M225 15h2M232 15h5M79 16h4M90 16h2M95 16h3M100 16h116M218 16h3M224 16h2M233 16h4M79 17h3M90 17h8M100 17h116M218 17h8M234 17h3M90 18h136M90 19h136M90 20h5M98 20h5M106 20h104M213 20h5M221 20h5M89 21h5M99 21h4M106 21h104M213 21h4M222 21h5M88 22h5M99 22h4M106 22h104M213 22h4M223 22h5M87 23h6M99 23h118M223 23h6M86 24h7M98 24h120M223 24h7M85 25h9M97 25h122M222 25h9M84 26h3M91 26h134M229 26h3M83 27h3M92 27h8M103 27h110M216 27h8M230 27h3M83 28h2M93 28h6M104 28h4M110 28h96M208 28h4M217 28h6M231 28h2M93 29h5M104 29h4M110 29h96M208 29h4M218 29h5M93 30h4M104 30h108M219 30h4M93 31h3M103 31h110M220 31h3M92 32h3M102 32h112M221 32h3M1 39h3M312 39h3M1 40h3M312 40h3M1 41h3M312 41h3M1 43h3M312 43h3M1 44h3M312 44h3M1 48h3M312 48h3"
      />
      <foreignObject
        style={styles.Frame_Menu_Header}
        x="0"
        y="0"
        width="316"
        height="49"
      >
        {children}
      </foreignObject>
    </svg>
  );
}

const styles = StyleSheet.create({
  Frame_Menu_Header: {
    display: "flex",
    justifyContent: "space-between",
    flexDirection: "row",
    flexWrap: "nowrap",
  },
});

export default Frame_Menu_Header;

（Frame_Icon.js）

import React from "react";
import { StyleSheet } from "react-native";

import colors from "../config/colors";
import fonts from "../config/fonts";

function Frame_Icon({ children }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 22 23"
      shape-rendering="crispEdges"
      width="22"
      max-width="22"
      height="23"
      max-height="23"
    >
      <path
        stroke={colors.tertiary}
        d="M0 0h22M0 1h22M0 2h2M20 2h2M0 3h2M20 3h2M0 4h2M20 4h2M0 5h2M20 5h2M0 6h2M20 6h2M0 7h2M20 7h2M0 8h2M20 8h2M0 9h2M20 9h2M0 10h2M20 10h2M0 11h2M20 11h2M0 12h2M20 12h2M0 13h2M20 13h2M0 14h2M20 14h2M0 15h2M20 15h2M0 16h2M20 16h2M0 17h2M20 17h2M0 18h2M20 18h2M0 19h2M20 19h2M0 20h22M0 21h22"
      />
      <path
        stroke={colors.black}
        d="M2 2h18M2 3h18M2 4h18M2 5h18M2 6h18M2 7h18M2 8h18M2 9h18M2 10h18M2 11h18M2 12h18M2 13h18M2 14h18M2 15h18M2 16h18M2 17h18M2 18h18M2 19h18"
      />
      <path stroke={colors.quinary} d="M0 22h22" />
      <foreignObject
        style={styles.Frame_Icon}
        x="0"
        y="0"
        width="22"
        height="23"
      >
        {children}
      </foreignObject>
    </svg>
  );
}

const styles = StyleSheet.create({
  Frame_Icon: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
});

export default Frame_Icon;

SVG 的大小似乎默认为第一个声明，更改了每个嵌入的 SVG 组件的布局。我想知道是否有办法更好地隔离 SVG，以便父 SVG 不会凌驾于子 SVG 的大小之上。viewBoxviewBoxviewBox