如何將 React 組件作為嵌入式 svg 圖像導入

Question

我正在 React 中構建一個 SVG 組件，並使用svg-to-react cli將一個 SVG 文件轉換為一個 React 組件。

我想在這個組件中加載和渲染額外的 svg 文件，並且正在使用SVG 圖像標簽，如下所示。 它運行良好，我可以將圖像的 href 屬性綁定到導入的 SVG。

import Whole from "../svg/notes/whole.svg";

export default (props: any) => {
  return (
    <svg height={125} width={97} {...props}>
      ...
      <image x="50" y="27" width="8" height="8" href={Whole} />
    </svg>
  );
};

現在我的問題是：我可以以類似的方式將另一個生成 SVG 的組件綁定到 SVG 圖像標簽嗎？

Answer 1

這是 tsx 中一個簡單的 svg（它是一個鎖）組件的示例。 無需使用庫來生成它。 我為我正在使用的每個 svg 創建其中一個。

import * as React from 'react';

const LockSvg = ({ style = null, fillColor = '#fff9f9' }: { fillColor: string; style?: any }) => {
  const svgStyle = {
    clipRule: 'evenodd',
    fillRule: 'evenodd',
    strokeLinejoin: 'round',
    strokeMiterlimit: 2,
  };
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 56 70"
      version="1.1"
      style={style ? { ...svgStyle, ...style } : svgStyle}
    >
      <path
        d="M25.892,0.064c-7.413,0.594 -13.013,4.226 -16.063,10.423c-0.541,1.093 -1.048,2.342 -1.048,2.565c0,0.054 -0.027,0.101 -0.054,0.101c-0.027,0 -0.055,0.054 -0.061,0.115c-0.007,0.128 -0.041,0.256 -0.109,0.425c-0.114,0.317 -0.527,1.937 -0.615,2.43c-0.02,0.128 -0.054,0.311 -0.074,0.398c-0.014,0.095 -0.048,0.318 -0.068,0.5c-0.02,0.189 -0.054,0.358 -0.068,0.378c-0.054,0.088 -0.162,1.276 -0.189,2.113c-0.007,0.182 -0.034,0.324 -0.068,0.324c-0.027,0 -0.02,0.06 0.021,0.135c0.054,0.094 0.054,0.135 0,0.135c-0.048,0 -0.054,0.04 -0.007,0.128c0.04,0.067 0.054,0.142 0.034,0.162c-0.021,0.02 -0.034,2.646 -0.027,5.839l0.006,5.805l-0.175,0.135c-0.095,0.074 -0.467,0.203 -0.832,0.29c-1.076,0.243 -1.799,0.5 -2.462,0.864c-0.737,0.405 -1.008,0.615 -1.623,1.236c-1.394,1.404 -2.259,3.78 -2.388,6.534c-0.034,0.668 -0.027,20.399 0.007,21.094c0.054,1.182 0.189,2.154 0.311,2.316c0.047,0.054 0.047,0.081 -0.007,0.081c-0.047,0 -0.061,0.034 -0.027,0.088c0.027,0.04 0.054,0.108 0.061,0.148c0.007,0.034 0.075,0.23 0.156,0.419c0.074,0.195 0.115,0.357 0.088,0.357c-0.027,0 -0.014,0.027 0.02,0.054c0.068,0.048 0.25,0.412 0.25,0.486c0,0.021 0.041,0.081 0.095,0.142c0.054,0.061 0.081,0.122 0.061,0.142c-0.021,0.02 0.04,0.115 0.135,0.216c0.088,0.094 0.169,0.196 0.169,0.209c0,0.095 0.568,0.79 0.825,1.013c0.163,0.141 0.23,0.216 0.156,0.162c-0.122,-0.088 -0.129,-0.088 -0.041,0.02c0.048,0.067 0.115,0.121 0.149,0.121c0.034,0 0.115,0.054 0.183,0.115c0.263,0.25 0.453,0.385 0.818,0.581c1.184,0.634 1.806,0.816 3.524,1.032c0.75,0.088 3.117,0.102 21.108,0.095c21.007,0 21.122,0 22.413,-0.263c1.495,-0.304 2.685,-0.905 3.592,-1.823c1.089,-1.093 1.609,-2.308 1.819,-4.225c0.081,-0.723 0.101,-2.748 0.101,-11.449c0,-5.819 -0.013,-10.618 -0.027,-10.665c-0.02,-0.054 -0.047,-0.426 -0.067,-0.824c-0.027,-0.405 -0.054,-0.756 -0.068,-0.783c-0.02,-0.027 -0.047,-0.182 -0.068,-0.344c-0.115,-0.965 -0.514,-2.309 -0.926,-3.125c-0.203,-0.385 -0.724,-1.189 -0.933,-1.425c-0.42,-0.466 -1.076,-1.08 -1.177,-1.107c-0.088,-0.02 -0.25,-0.202 -0.257,-0.297c0,-0.047 -0.027,-0.027 -0.054,0.047c-0.054,0.129 -0.054,0.129 -0.102,-0.02c-0.034,-0.094 -0.088,-0.142 -0.142,-0.121c-0.054,0.02 -0.128,-0.014 -0.169,-0.068c-0.047,-0.054 -0.128,-0.094 -0.176,-0.094c-0.054,0 -0.094,-0.034 -0.094,-0.068c0,-0.04 -0.048,-0.067 -0.102,-0.067c-0.054,0 -0.101,-0.034 -0.101,-0.068c0,-0.04 -0.061,-0.067 -0.136,-0.067c-0.074,0 -0.135,-0.034 -0.135,-0.075c0,-0.033 -0.027,-0.047 -0.068,-0.027c-0.033,0.021 -0.067,0.007 -0.067,-0.033c0,-0.041 -0.027,-0.054 -0.068,-0.034c-0.034,0.02 -0.067,0.013 -0.067,-0.027c0,-0.034 -0.055,-0.054 -0.115,-0.041c-0.068,0.007 -0.203,-0.027 -0.305,-0.074c-0.101,-0.054 -0.209,-0.088 -0.236,-0.088c-0.028,0.007 -0.109,-0.006 -0.17,-0.027c-0.311,-0.121 -0.365,-0.135 -0.466,-0.155c-0.061,-0.013 -0.183,-0.054 -0.271,-0.088c-0.088,-0.033 -0.182,-0.054 -0.203,-0.047c-0.027,0 -0.115,-0.054 -0.203,-0.128c-0.094,-0.088 -0.135,-0.095 -0.101,-0.034c0.027,0.054 -0.027,0.014 -0.122,-0.088l-0.176,-0.189l0,-5.717c-0.006,-3.146 -0.02,-5.961 -0.033,-6.258c-0.048,-0.789 -0.095,-1.39 -0.129,-1.62c-0.02,-0.162 -0.176,-1.14 -0.27,-1.721c-0.142,-0.844 -0.203,-1.147 -0.244,-1.147c-0.027,0 -0.04,-0.068 -0.034,-0.156c0.007,-0.081 -0.006,-0.182 -0.034,-0.216c-0.033,-0.04 -0.074,-0.162 -0.087,-0.27c-0.061,-0.31 -0.095,-0.459 -0.17,-0.648c-0.04,-0.101 -0.054,-0.196 -0.04,-0.216c0.02,-0.02 -0.014,-0.148 -0.068,-0.283c-0.061,-0.142 -0.108,-0.318 -0.108,-0.399c0,-0.108 -0.013,-0.121 -0.061,-0.047c-0.047,0.068 -0.074,0.007 -0.108,-0.216c-0.027,-0.175 -0.081,-0.317 -0.115,-0.317c-0.041,0 -0.054,-0.061 -0.034,-0.135c0.02,-0.074 0.007,-0.135 -0.027,-0.135c-0.034,0 -0.061,-0.047 -0.061,-0.101c0,-0.054 -0.027,-0.102 -0.067,-0.102c-0.034,0 -0.041,-0.047 -0.021,-0.114c0.034,-0.075 0.021,-0.095 -0.04,-0.054c-0.068,0.04 -0.075,0.013 -0.041,-0.102c0.034,-0.114 0.027,-0.141 -0.034,-0.101c-0.054,0.034 -0.074,0.027 -0.04,-0.02c0.047,-0.074 -0.19,-0.628 -0.65,-1.532c-0.148,-0.297 -0.371,-0.723 -0.48,-0.945c-0.115,-0.223 -0.23,-0.419 -0.257,-0.439c-0.02,-0.02 -0.108,-0.169 -0.196,-0.331c-0.081,-0.162 -0.176,-0.331 -0.21,-0.371c-0.202,-0.243 -0.568,-0.763 -0.71,-1.006c-0.088,-0.155 -0.162,-0.257 -0.162,-0.23c0,0.027 -0.041,0.014 -0.095,-0.033c-0.054,-0.048 -0.081,-0.108 -0.061,-0.135c0.014,-0.027 -0.047,-0.129 -0.142,-0.223c-0.101,-0.095 -0.175,-0.209 -0.175,-0.25c0,-0.04 -0.021,-0.054 -0.048,-0.034c-0.02,0.027 -0.088,-0.013 -0.135,-0.087c-0.054,-0.075 -0.129,-0.122 -0.162,-0.102c-0.034,0.027 -0.061,-0.013 -0.061,-0.081c0,-0.074 -0.135,-0.263 -0.305,-0.425c-0.162,-0.162 -0.284,-0.317 -0.263,-0.351c0.02,-0.027 -0.027,-0.054 -0.102,-0.054c-0.074,0 -0.149,-0.061 -0.176,-0.135c-0.02,-0.074 -0.088,-0.135 -0.142,-0.135c-0.054,0 -0.094,-0.047 -0.094,-0.101c0,-0.054 -0.048,-0.101 -0.109,-0.101c-0.054,0 -0.081,-0.034 -0.06,-0.068c0.02,-0.04 -0.007,-0.067 -0.061,-0.067c-0.061,0 -0.108,-0.034 -0.108,-0.075c0,-0.033 -0.021,-0.054 -0.048,-0.04c-0.034,0.02 -0.095,-0.007 -0.142,-0.061c-0.047,-0.054 -0.061,-0.094 -0.034,-0.094c0.027,-0.007 -0.027,-0.054 -0.128,-0.108c-0.108,-0.054 -0.19,-0.129 -0.19,-0.162c0,-0.041 -0.047,-0.068 -0.101,-0.068c-0.054,0 -0.101,-0.034 -0.101,-0.067c0,-0.041 -0.034,-0.068 -0.068,-0.068c-0.041,0 -0.142,-0.074 -0.23,-0.169c-0.088,-0.094 -0.176,-0.168 -0.203,-0.168c-0.047,0 -0.453,-0.277 -0.514,-0.345c-0.02,-0.02 -0.128,-0.087 -0.25,-0.148c-0.115,-0.061 -0.25,-0.149 -0.305,-0.196c-0.121,-0.115 -0.399,-0.283 -0.967,-0.574c-0.257,-0.128 -0.493,-0.27 -0.514,-0.303c-0.02,-0.034 -0.061,-0.061 -0.081,-0.061c-0.027,0 -0.176,-0.054 -0.331,-0.122c-2.53,-1.066 -4.498,-1.546 -7.25,-1.762c-1.015,-0.081 -3.409,-0.074 -4.437,0.007Zm3.212,8.195c0.697,0.068 0.947,0.101 1.624,0.209c0.608,0.102 1.914,0.453 2.123,0.574c0.115,0.061 0.501,0.209 0.535,0.203c0.067,-0.027 1.846,0.999 1.974,1.147c0.021,0.02 0.156,0.122 0.298,0.236c0.149,0.108 0.331,0.257 0.406,0.331c0.081,0.074 0.236,0.209 0.345,0.29c0.115,0.088 0.155,0.142 0.101,0.115c-0.054,-0.027 -0.007,0.041 0.108,0.149c0.183,0.162 0.663,0.722 1.062,1.242c0.068,0.087 0.183,0.27 0.257,0.398c0.075,0.128 0.19,0.324 0.264,0.439c0.128,0.202 0.494,0.85 0.507,0.911c0.007,0.02 0.068,0.155 0.135,0.304c0.068,0.148 0.122,0.29 0.115,0.317c-0.006,0.034 0.014,0.054 0.041,0.054c0.034,0 0.061,0.041 0.068,0.081c0.013,0.196 0.196,0.594 0.25,0.547c0.027,-0.034 0.034,-0.02 0.007,0.027c-0.027,0.047 0.047,0.337 0.155,0.655c0.108,0.31 0.183,0.587 0.163,0.607c-0.021,0.02 0,0.081 0.047,0.142c0.047,0.061 0.068,0.121 0.047,0.148c-0.027,0.021 -0.013,0.081 0.027,0.135c0.061,0.068 0.054,0.088 -0.013,0.088c-0.061,0.007 -0.054,0.034 0.034,0.101c0.074,0.054 0.101,0.102 0.054,0.102c-0.054,0 -0.061,0.047 -0.007,0.182c0.041,0.108 0.081,0.25 0.095,0.324c0.054,0.331 0.182,1.37 0.196,1.552c0,0.108 0.034,0.223 0.074,0.25c0.047,0.034 0.041,0.054 0,0.054c-0.04,0 -0.074,0.061 -0.074,0.135c0,0.074 0.027,0.135 0.061,0.135c0.033,0 0.027,0.041 -0.014,0.095c-0.061,0.074 -0.061,0.101 0.007,0.135c0.067,0.033 0.067,0.047 0.007,0.081c-0.129,0.054 -0.109,0.162 0.033,0.162c0.068,0 0.088,0.02 0.041,0.054c-0.108,0.067 -0.122,1.498 -0.02,1.498c0.054,0 0.061,0.027 0,0.088c-0.054,0.068 -0.081,1.451 -0.088,4.772l-0.02,4.685l-0.23,0.135c-0.23,0.135 -0.379,0.135 -11.613,0.162c-8.224,0.02 -11.383,0.007 -11.416,-0.047c-0.027,-0.041 -0.149,-0.074 -0.271,-0.074c-0.467,0 -0.44,0.398 -0.446,-6.109c-0.007,-3.234 -0.007,-5.887 0,-5.907c0.006,-0.02 0.02,-0.216 0.033,-0.439c0.028,-0.438 0.068,-0.789 0.176,-1.417c0.041,-0.223 0.081,-0.479 0.088,-0.574c0.014,-0.094 0.041,-0.216 0.068,-0.277c0.027,-0.06 0.054,-0.182 0.068,-0.276c0.006,-0.088 0.033,-0.189 0.054,-0.223c0.02,-0.041 0.06,-0.189 0.088,-0.338c0.054,-0.283 0.317,-1.073 0.48,-1.431c0.054,-0.114 0.094,-0.229 0.094,-0.263c0,-0.223 1.272,-2.403 1.671,-2.862c0.243,-0.284 1.332,-1.35 1.616,-1.586c0.744,-0.628 2.692,-1.62 3.429,-1.749c0.048,-0.006 0.19,-0.047 0.318,-0.094c0.393,-0.128 1.847,-0.351 2.584,-0.392c0.385,-0.027 0.703,-0.047 0.71,-0.054c0.027,-0.02 1.055,0.021 1.474,0.061Z"
        style={{ fill: fillColor }}
      />
    </svg>
  );
};

export default LockSvg;