如何在不发出 http 请求的情况下将文件中的 svg 图标显示为内联？

Question

有一个 React 应用程序，要求在离线模式下在应用程序的某些部分显示图标。内联 svg 很适合。

import React from 'react';

// inline svg used to show icons in offline mode
export default function InlineSvgBack(): React.ReactElement {
    return <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
        <path d='M20 12H4M4 12L9 7M4 12L9 17' stroke='white' strokeWidth='1.2' strokeLinecap='round' strokeLinejoin='round'/>
    </svg>;
}

在所有其他图标应用程序中使用下一个方法的问题

import iconBack from '../images/icon_back.svg'

// it handled by webpack file-loader
export default function IconBack() {
    return <img src={iconBack} alt="icon back"/>
}

所以有一个目录images，icon_back.svg目前我已将其内容复制到InlineSvg组件中，但是我担心如果 smbd 对其进行更改，icon_back.svg他会错过我的 React 组件。

我当前的解决方案是删除icon_back.svg. 但是，我想知道是否可以这样做

import React from 'react';
import svg from '../images/icon_back.svg'; // import a line of text

// inline svg used to show icons in offline mode
export default function InlineSvgBack(): React.ReactElement {
    return <>{svg}</>; // output svg line of text
}

Answer 1

您可以使用 raw-loader 将 svg 获取为文本（正如您已经正确执行的那样）。之后，您可以获取文本并将其设置为节点的 html 内容，如下所示：

import iconBack from '../images/icon_back.svg'; // import with raw-loader

function Icon({svgImage}) {
  return (
    <div dangerouslySetInnerHTML={{__html: svgImage}}/>
  );
}

function App() {
  return (<Icon svgImage={iconBack}/>)
}

这应该在 div 标签内呈现您的 svg。或者，您也可以生成一个数据 url，并将其传递到 img 标签中。