Question

我在React中上传SVG图标时遇到问题。我在webpack中添加了svg-inline-loader，但它没有显示图标。它只显示不完整的图片。我想将SVG图标添加为img src，background-image和快捷图标。

编辑：

这是我的webpack.config

module.exports = {
entry: ["whatwg-fetch", "./js/app.jsx"],
output: {
    filename: "./js/out.js"
},
devServer: {
    inline: true,
    contentBase: './',
    port: 3001
},
watch: true,

module: {
    loaders: [{
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['es2015','stage-2', 'react']
        }
    }, {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
            test: /\.(png|jpg|gif)$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]'
                    }
                }
            ]
        },
        {
            test: /\.svg$/,
            loader: 'svg-inline-loader'
        }
    ]
}
};

Answer 1

jsx将您的代码转换为vanilla javascript并支持svg。因此，以同样的方式制作<div>，您可以制作<svg> s。

在文本编辑器中打开svg文件，并将文件类型更改为jsx。之后只需将代码调整为jsx即可。以下是100％有效的jsx，它看起来与您原来的svg中最初的相同。您可以删除本机svg中的许多元素，但正如您所看到的，概念是相同的。

import * as React from 'react';
//I have this file named as lightning.jsx
const SVG= (
<svg
    className="control-lightning"
    viewBox="0 0 483.73 483.73"
>
    <g>
        <polygon 
            points="119.637,282.441 192.449,282.441 165.869,
            483.73 364.094,189.622 296.631,189.622 325.678,0"
        />
    </g>
</svg>
);

export default SVG;

尝试将其导入项目并进行渲染。这将是一个没有风格的闪电。

React中的SVG图标无法显示

1 个答案: