Question

我要做什么： 渲染一个svg图标。

我的结果：尽管svg和img属性附加到DOM，但HTML不会呈现图标，并且我也没有出现webpack或浏览器错误。

我的组件文件结构/方法 I import SVG into sidebar.js

sidebar.js

import './sidebar.scss';
import photo from './usrPic.jpg';
import '../base/SVG/twitter.svg';
import  '../base/sprite.svg';



export default class Sidebar {


    render() {

        const img = document.createElement('img');
        img.alt = 'image';
        img.width = 200;
        img.src = photo;
        img.classList = 'sidebar__user-photo';

        // const svg = document.createElement('svg');


        const use = document.createElement('use');
        use.setAttribute('href', `../base/SVG/twitter.svg#icon-twitter.svg`);

        const html = `<div class="sidebar-box">
                        <div class="sidebar-header">
                            <span class="sidebar-title__main">Something</span>
                            <span class="sidebar-title__sub">Sub</span>
                            <div class="Icon-box">
                                <svg class="twitter__icon">


                                </svg>
                            </div>
                        </div>
                    </div>`;
        const contentBox = document.querySelector('.content');
        contentBox.insertAdjacentHTML('beforeend', html);

        const sidebarHeader = document.querySelector('.sidebar-header');
        sidebarHeader.insertAdjacentElement("afterbegin", img);

        const twitterIcon = document.querySelector('.twitter__icon');
        twitterIcon.insertAdjacentElement("afterbegin", use);
    }
}

webpack.dev.config

...
    {
       test: /\.svg$/,
       use: 'svg-sprite-loader'

     },
     {
       test: /\.(png|svg|jpg|gif)$/,
       use:  'file-loader',
     },

html

HTML code

到目前为止，我已经尝试过：

在<use href="..." />
我交换了<use href="..." />。与<use xlink:href="..." />
我将元素替换为“ img”属性。
在svg元素上应用了40px的宽度和高度

鉴于所有这些，我没有收到错误，但元素已附加到 DOM，但没有图标。

非常感谢您的协助。

第一次更新：

sidebar.js

已修改为：

...

var SVG_NS = 'http://www.w3.org/2000/svg';
        var XLink_NS = 'http://www.w3.org/1999/xlink';
        const use = document.createElementNS(SVG_NS, 'image');
        use.setAttributeNS(null, 'width', '100');
        use.setAttributeNS(null, 'height', '100');
        use.setAttributeNS(XLink_NS, 'xlink:href', '../base/sprite.svg#icon-twitter' );

const twitterIcon = document.querySelector('.twitter__icon');
        twitterIcon.insertAdjacentElement("afterbegin", use);

这产生了Webpack错误

ERROR in ./src/components/sidebar/sidebar.js
Module not found: Error: Can't resolve 'svg-sprite-loader' in '/Users/dev/Developer/projects/dcbio'
 @ ./src/components/sidebar/sidebar.js 10:0-28
 @ ./src/index.js

注释../sprite.svg文件可解决上述错误。但是，浏览器现在会产生404错误，这让我发疯。

Browser Error

渲染的元素 HLTM Elements

建议表示赞赏。

谢谢

第二次更新

在阅读了webpack的文档及其git之后，我对webpack.config进行了以下更改：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
        publicPath: '',
    },
    mode: 'development',
    devServer: {
        contentBase: path.resolve(__dirname, './dist'),
        index: 'index.html',
        port: 9000
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader', 'css-loader'
                ]
            },
            {
                test: /\.scss$/i,
                use: [
                    'style-loader', 'css-loader', 'sass-loader'

                ],
            },
            {
                test: /\.(png|jpg|gif)$/,
                use:  [ 'file-loader'],

            },

            {
                test: /\.svg$/,
                use: [
                    {
                    loader: 'svg-sprite-loader',
                    options: {
                        extract: true,
                        publicPath: '/src'

                    }
                },
                    'svg-inline-loader',
                    'svgo-loader'
                ] 
            },

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ '@babel/env' ],
                        plugins: [ 'transform-class-properties' ]
                    }
                }
            },
            {
                test: /\.hbs$/,
                use: [
                    'handlebars-loader'
                ]
            }
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: 'src/index.hbs',
            title: 'Hello world',
            description: 'Some description'

        }),
        new SpriteLoaderPlugin({
            plainSprite: true,
            spriteAttrs: {
                id: 'icon-twitter'
            }
        })
    ],
};

我仍然收到浏览器错误-请参见图片

Browser Error

DOM返回以下内容： enter image description here

Answer 1

最终更新和答案：

经过广泛的研究和编辑，我意识到在base.js文件中，属性inner.HTML元素导致<svg>图标未加载。

此外，我将原始帖子中提到的以下文件修改为：

sidebar.js

...

import symbol from '../../images/icons_sprite.svg';

...

html = `<svg class="icon-fb">
         <use href="#icons_sprite_icon-facebook"></use>
        </svg>`;

const iconBox = document.querySelector('.Icon-box');
iconBox.insertAdjacentHTML("afterbegin", html);

注意我仅使用href而不是xlink:href。根据MDN文档xlink:href位于弃用桶中，因此我选择保留其推荐的方法-只需使用href。

webpack.dev.config

...
    {
      test: /\.svg$/i,
      include: /\.*_sprite\.svg/,
      use:[

       {
         loader: 'svg-sprite-loader',
         options: {
             publicPath: './src',
         }
       },
       {
          loader: 'svgo-loader',
          options: {
          plugins: [
              { cleanupIDs: false },
          ]
       }
    },
..

问题解决了...

以下是有助于解决问题的链接。希望这个解决方案能为以后的人们提供帮助。
MDN
https://developer.mozilla.org/en-US/docs/Web/SVG
Webpack-svg
https://github.com/JetBrains/svg-sprite-loader
https://github.com/svg/svgo
https://github.com/vp-online-courses/webpack-tutorial/compare/svg-sprites-begin...svg-sprites-end

使用Webpack 4渲染SVG图标时遇到问题

1 个答案: