CODEWITHSUNDEEP
javascriptnode.jsreactjswebpack
Zack Shapiro
Zack Shapiro

Reputation: 6998

Webpack loading SVG with white border

I have an SVG that I'm loading via file-loader, pointing to the path in my .scss file and for some odd reason it's got a white border. If I set a css boarder, it gets set outside of the white.

I inspected the file to make sure it has no white background. That's confirmed.

menubar.js

import React, { Component } from 'react';

class MenuBar extends Component {
    render() {
        return (
            <div className="menu-bar">
                <img className="logo" />

                <div className="nav">
                    <a className="selected" href="#">Sky</a>
                    <a href="#">HQ</a>
                    <a href="#">Settings</a>
                </div>
            </div>
        );
    }
}

export default MenuBar;

menubar.scss:

.menu-bar .logo {
    position: relative;
    background: url('../images/glimpse-menu-bar.svg') center center no-repeat;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 20px;
    cursor: pointer;
}

My webpack.dev.config.js:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// Config directories
const SRC_DIR = path.resolve(__dirname, 'src');
const ASSETS_DIR = path.resolve(__dirname, 'assets');
const OUTPUT_DIR = path.resolve(__dirname, 'dist');

// Any directories you will be adding code/files into, need to be added to this array so webpack will pick them up
const defaultInclude = [SRC_DIR];

module.exports = {
    entry: ['babel-polyfill', SRC_DIR + '/index.js'],

    output: {
        path: OUTPUT_DIR,
        publicPath: '/',
        filename: 'bundle.js',
    },

    module: {
        rules: [
            { 
                test: /\.css$/, 
                loader: 'style-loader!css-loader',
            },
            { 
                test: /\.scss$/, 
                loader: 'style-loader!css-loader!sass-loader',
            },
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'es2015', 'stage-3'],
                },
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: "file-loader",
            },
            { 
                test: /.(ttf|eot|otf)(\?v=[0-9].[0-9].[0-9])?$/, 
                loader: "file-loader",
            },       
        ],
    },
    target: 'electron-renderer',
    plugins: [
        new HtmlWebpackPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
        }),
    ],
    devtool: 'cheap-source-map',
    devServer: {
        contentBase: OUTPUT_DIR,
        stats: {
            colors: true,
            chunks: false,
            children: false,
        },
    },
};

Any ideas here?

enter image description here

Another example:

enter image description here

Here's the code of 1 of the SVGs. Every SVG in my project shows the border

<svg width="53" height="54" viewBox="0 0 53 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>&#224;&#213;&#172;</title>
<desc>Created using Figma</desc>
<g id="Canvas" transform="translate(-6960 -4611)">
<g id="Ellipse 2">
<mask id="mask0_outline_ins">
<use xlink:href="#path0_fill" fill="white" transform="translate(6960 4611)"/>
</mask>
<g mask="url(#mask0_outline_ins)">
<use xlink:href="#path1_stroke_2x" transform="translate(6960 4611)" fill="#FFFFFF"/>
</g>
</g>
</g>
<defs>
<path id="path0_fill" d="M 53 27C 53 41.9117 41.1355 54 26.5 54C 11.8645 54 0 41.9117 0 27C 0 12.0883 11.8645 0 26.5 0C 41.1355 0 53 12.0883 53 27Z"/>
<path id="path1_stroke_2x" d="M 50 27C 50 40.3079 39.4261 51 26.5 51L 26.5 57C 42.845 57 56 43.5154 56 27L 50 27ZM 26.5 51C 13.5739 51 3 40.3079 3 27L -3 27C -3 43.5154 10.155 57 26.5 57L 26.5 51ZM 3 27C 3 13.6921 13.5739 3 26.5 3L 26.5 -3C 10.155 -3 -3 10.4846 -3 27L 3 27ZM 26.5 3C 39.4261 3 50 13.6921 50 27L 56 27C 56 10.4846 42.845 -3 26.5 -3L 26.5 3Z"/>
</defs>
</svg>

Upvotes: 3

Views: 2223

Answers (2)

cameraman
cameraman

Reputation: 252

Your img tag has no source. Add a source (maybe a transparent png) and the border will disappear.
You can also set an empty source:

 <img src=""/>

Upvotes: 2

Valentin
Valentin

Reputation: 2858

You're using an <img> tag without providing an actual source for it, instead relying on a background image. The browser render a placeholder for your image since you didn't give it an actual resource to render, that's where the weird border comes from.

Managed to single it out here http://jsbin.com/difopib/

You should either set a src attribute on that image or use a different tag. If, for some reason you're dead set on <img> + background svg, you could set the source to be a 1px transparent gif, see https://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

Upvotes: 8

Related Questions