反应导入svg

Question

从根文件index.ts导出svg

import * as upArrow from "./up-arrow.svg";
import * as downArrow from "./down-arrow.svg";

export { upArrow, downArrow };

尝试在我的组件中使用

import * as React from "react";
import { Icon } from "components";
import { upArrow, downArrow } from "common/assets";

const CollapseIcon = ({ condition }) => (
  <Icon alternative={upArrow} asset={downArrow} condition={condition} />
);

export default CollapseIcon;

如果重要的话，我会在asset属性中使用值alternative和src

export default styled.img.attrs<IconProps>({
  src: ({ condition, alternative, asset }: IconProps) =>
    condition ? alternative : asset,
  alt: ({ alt }: IconProps) => alt
})`
  vertical-align: middle;
 `

但是获取带双引号的html元素。如果删除它，则元素视图正确。我在哪里错了？

我尝试声明docs为非代码资产，但始终不变

declare module "*.svg" {
  const content: string;
  export default content;
}
declare module "*.png";
declare module "*.jpg";

我的Webpack配置：

"use strict";

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
const getClientEnvironment = require("./env");
const paths = require("./paths");

const publicPath = "/";
const publicUrl = "";
const env = getClientEnvironment(publicUrl);

module.exports = {
  devtool: "cheap-module-source-map",
  entry: [
    require.resolve("./polyfills"),
    require.resolve("react-dev-utils/webpackHotDevClient"),
    paths.appIndexJs
  ],
  output: {
    pathinfo: true,
    filename: "static/js/bundle.js",
    chunkFilename: "static/js/[name].chunk.js",
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath).replace(/\\/g, "/")
  },
  resolve: {
    modules: [paths.appSrc, paths.appNodeModules].concat(
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    alias: {
      "react-native": "react-native-web"
    },
    plugins: [
      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
    ]
  },
  module: {
    strictExportPresence: true,
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader"
      },
      {
        oneOf: [
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve("url-loader"),
            options: {
              limit: 10000,
              name: "static/media/[name].[hash:8].[ext]"
            }
          },
          {
            test: /\.(ts|tsx|js|jsx)?$/,
            loader: "awesome-typescript-loader",
            options: {
              getCustomTransformers: require("../config/transformers.js")
            }
          },
          {
            exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
            loader: require.resolve("file-loader"),
            options: {
              name: "static/media/[name].[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new InterpolateHtmlPlugin(env.raw),
    new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin(env.stringified),
    new webpack.HotModuleReplacementPlugin(),
    new CaseSensitivePathsPlugin(),
    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ],
  node: {
    dgram: "empty",
    fs: "empty",
    net: "empty",
    tls: "empty",
    child_process: "empty"
  },
  performance: {
    hints: false
  },
  externals: {
    react: "React",
    "react-dom": "ReactDOM"
  },
  devtool: "source-map"
};

UPD。如我所见，浏览器收到我的字符串作为链接

Answer 1

将.svg扩展名添加到url-loader的扩展名列表中

...
rules: [
...
          {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
            loader: require.resolve("url-loader"),
            options: {
              limit: 10000,
              name: "static/media/[name].[hash:8].[ext]"
            }
          },
...