將 SVG 添加到 ReactJS 的最佳方法是什么

Question

我想創建一個在 React 中顯示 SVG 的組件。 我運氣不好，有沒有人知道將 SVG 轉換為 React 組件的良好做法。

我嘗試將它們添加到 <img /> 標簽和 <svg /> 標簽，但我總是收到損壞的圖像圖標？

Answer 1

我發現的最佳做法是將svg保存在簡單的 SVG 標簽中，然后像這樣導入到您的項目中

import { ReactComponent as EmptyWallet } from 'src/assets/svgs/EmptyWallet.svg';

EmptyWallet.svg 文件將如下所示

<svg>
<path d="M29.73,17.66H0V47.79H29.73V59.28c.21,5,3.88,6.78,8.42,5.25a2.47,2.47,0,0,0,.7-.37c11.47-9,19.37-18,30.84-27l.16-.13c3.49-3.18,2.46-6.8-.93-9.47L40.81,2.61A13.25,13.25,0,0,0,36.65.28C34-.51,31.54.37,30.41,3a10,10,0,0,0-.68,3.93c0,3.57-.05,7.16,0,10.73ZM93.15,64h29.73V94.16H93.15v11.48c-.21,5-3.88,6.79-8.42,5.25a2.24,2.24,0,0,1-.7-.37c-11.47-9-19.37-18-30.84-27L53,83.38c-3.49-3.17-2.46-6.8.93-9.46L82.07,49a13,13,0,0,1,4.16-2.32c2.66-.8,5.11.08,6.24,2.71a10,10,0,0,1,.68,3.94c0,3.56.06,7.16,0,10.72Z" />
</svg>

Answer 2

import React from 'react';
import PropTypes from 'prop-types';

export default function SVG() {
 return (
    <svg
      id="Layer_1"
    >
      <path d="M29.73,17.66H0V47.79H29.73V59.28c.21,5,3.88,6.78,8.42,5.25a2.47,2.47,0,0,0,.7-.37c11.47-9,19.37-18,30.84-27l.16-.13c3.49-3.18,2.46-6.8-.93-9.47L40.81,2.61A13.25,13.25,0,0,0,36.65.28C34-.51,31.54.37,30.41,3a10,10,0,0,0-.68,3.93c0,3.57-.05,7.16,0,10.73ZM93.15,64h29.73V94.16H93.15v11.48c-.21,5-3.88,6.79-8.42,5.25a2.24,2.24,0,0,1-.7-.37c-11.47-9-19.37-18-30.84-27L53,83.38c-3.49-3.17-2.46-6.8.93-9.46L82.07,49a13,13,0,0,1,4.16-2.32c2.66-.8,5.11.08,6.24,2.71a10,10,0,0,1,.68,3.94c0,3.56.06,7.16,0,10.72Z" />
    </svg>
  );
}

SVG.propTypes = {
  value: PropTypes.string,
};

Answer 3

這是我得到的另一個工作，但我更喜歡你的工作，謝謝賈斯汀。

 import mySvg from './path/to/image.svg';
 export default function Svg() { 
     return (<img src="/path/to/image.svg" alt="SVG as an image">)
 }