Question

我正在尝试将SVG文件用于我编写的React应用程序以便习惯它。我正在使用Webpack和Typescript进行编码。我在组件中将SVG文件作为内联SVG代码导入时遇到了很多麻烦。

我的SVG文件位于与我的组件文件夹分开的文件夹中，我想从组件内部获取SVG文件的内容以将其内联。

我尝试使用svg-inline-loader和react-svg-loader，但我无法让其中的任何一个工作。当我需要我的SVG文件的变量的console.log()内容时，我有一些Javascript代码，比如模块声明，而我希望找到SVG代码。

这是我尝试使用它的一个简单组件：

import * as React from "react";
import * as classnames from "classnames";
import { ITaskProps } from "../interfaces";

export class Task extends React.Component<ITaskProps>
{
    render()
    {
        let outerClasses = classnames("rt-task", this.props.className);
        let Checkbox = require("svg-inline-loader!../asset/checkbox-unticked.svg");

        return (
            <span className={outerClasses}>
            { Checkbox }
                <span className="rt-checkbox-box">
                    <input type="checkbox" id="rt-task-checkbox" />
                </span>
                <label className="rt-checkbox-text" htmlFor="rt-task-checkbox">{this.props.text}</label>
            </span>
        )
    }
}

console.log()（我从上面的代码中删除）的结果是：

var _extends = Object.assign || function (target) { for (var i = 1; i <arguments.length; i++) { var source="arguments[i];" for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key]="source[key];" } } } return target; }; function _objectWithoutProperties(obj, keys) { var target="{};" for (var i in obj) { if (keys.indexOf(i)>= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } import React from &quot;react&quot;; export default ((_ref) =&gt; { let { styles = {} } = _ref, props = _objectWithoutProperties(_ref, [&quot;styles&quot;]); return React.createElement( &quot;svg&quot;, _extends({ viewBox: &quot;0 0 100 100&quot;, xmlns: &quot;http://www.w3.org/2000/svg&quot;, fillRule: &quot;evenodd&quot;, clipRule: &quot;evenodd&quot;, strokeLinejoin: &quot;round&quot;, strokeMiterlimit: &quot;1.414&quot; }, props), React.createElement(&quot;circle&quot;, { cx: &quot;50&quot;, cy: &quot;50&quot;, r: &quot;49&quot;, fill: &quot;transparent&quot;, stroke: &quot;#a6a6a6&quot;, strokeWidth: &quot;2&quot; }) ); });

我确信这是微不足道的，但我找不到怎么做，我一直在寻找解决方案，从本周开始......

谢谢： - ）

带有Webpack，React和Typescript的内联SVG

0 个答案: