reactjs - 如何在 React 中引用本地 svg？

Question

以下代码可以正常编译，但图标不显示:

Icon.jsx 组件:

import React from 'react';
import { css } from 'emotion';

import ArrowRight from "./arrow-right.svg";

export const iconTypes = {
    arrowRight: 'ARROW_RIGHT',
   // arrowLeft: 'ARROW_LEFT',
}

const iconSrc = {
    ARROW_RIGHT: ArrowRight,
   // ARROW_LEFT: ArrowLeft,
}


export default function Icon({ type }) {
    return (
        <div>
            <img src={iconSrc[type]}/>
        </div>
    )
};

在浏览器中，请求如下所示:

 http://localhost:9001/%22data:image/svg+xml,%3Csvg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20width='512'%20height='512'%20viewBox='0%200%20512%20512'%3E%20%3Ctitle%3E%3C/title%3E%20%3Cg%20id='icomoon-ignore'%3E%20%3C/g%3E%20%3Cpath%20d='M310.627%20438.627l160-160c12.497-12.496%2012.497-32.758%200-45.255l-160-160c-12.497-12.496-32.758-12.496-45.255%200s-12.497%2032.758%200%2045.255l105.373%20105.373h-306.745c-17.673%200-32%2014.327-32%2032s14.327%2032%2032%2032h306.745l-105.373%20105.373c-6.248%206.248-9.372%2014.438-9.372%2022.627s3.124%2016.379%209.372%2022.627c12.497%2012.497%2032.758%2012.497%2045.255%200z'%3E%3C/path%3E%20%3C/svg%3E%22 

Icon.jsx 故事:

import { action } from "@storybook/addon-actions"; 
import Icon from "../components/Icon/Index"; 
import { iconTypes } from "../components/Icon/Index";


    storiesOf("Icon", module)
        .add("with text", () => (
            <Icon type={iconTypes.arrowRight}>
            </Icon>
        ));

当我用 http 路径填充 src 时(例如:“https://s.cdpn.io/3/kiwi.svg ”)，它工作得很好。

当我直接在浏览器中打开 svg 文件时，它也可以正常打开。

如有任何帮助，我们将不胜感激。

Answer 1

对于像我一样迟到的人，我强烈建议使用 react-svg

示例代码:

import SvgLogo from './logo.svg';
import ReactSVG from 'react-svg';

...

render(){
  return(
    <ReactSVG src={SvgLogo} />
  );
}

它具有所需的所有类型的自定义，以及出色的文档和实例。

希望对你有帮助!