React. Import svg - reactjs

Question

Export svg from root file index.ts
import * as upArrow from "./up-arrow.svg";
import * as downArrow from "./down-arrow.svg";
export { upArrow, downArrow };
Try to use in my component
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;
If it's important, I use values asset and alternative in src attribute like that
export default styled.img.attrs<IconProps>({
src: ({ condition, alternative, asset }: IconProps) =>
condition ? alternative : asset,
alt: ({ alt }: IconProps) => alt
})`
vertical-align: middle;
`
But get html-element with double quotes. If delete it, element view correctly. Where am I wrong?
I try to declare non-code assets accrding docs, but never change
declare module "*.svg" {
const content: string;
export default content;
}
declare module "*.png";
declare module "*.jpg";
My Webpack config:
"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. As I see, browser receive my string as link

Answer 1

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