search

mrsum / webpack-svgstore-plugin

Simple svg-sprite creating with webpack
https://www.npmjs.com/package/webpack-svgstore-plugin
200 stars 92 forks source link

How to work with src and dist directories? #150

Closed DanDvoracek closed 6 years ago

DanDvoracek commented 6 years ago

I have a pretty simple issue (I guess), but I can't figure out how to amend it.

I have basically this structure for dist/src folders:

root
|- src
  |-- icons (original svg icons)
  |-- js
    |-- main.js (I do the ...var __svg__ ... at his level)
  |-- sass
|- app/wp-content/themes/projectname/dist/ (this is where I want my svg sprite)

My problem is that I have to write the following for my stuff to ~ work:

var __svg__ = { path: '../icons/**/*.svg', name: 'wp-content/themes/projectname/dist/svg-sprite.svg' };
// require basic or custom sprite loader
require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);

The problem is the following:

Each part of the name path gets repeated in my dist directory. This means, in my case, it creates the folder /wp-content/themes/projectname/dist within my main dist folder!

To add to this, when I inspect the HTML, it gets the image at mywebsite.com/wp-content/themes/projectname/dist. However the image is now located at mywebsite.com/wp-content/themes/projectname/dist/wp-content/themes/projectname/dist !!! This is a strange behaviour. Add that if I copy the file to the root of my top level dist folder, things work fluently.

Is there anything I do wrong ?

Edit: same applies if I don't name the output file. It adds it to the dist folder correctly but then the HTML looks for an image at www.mysite.com/image.svg instead of www.mysite.com/wp-content/themes/projectname/dist/image.svg .. Is there some sort of assets path that we could specify for this?

DanDvoracek commented 6 years ago

It would actually be pretty nice if it was possible to set a srcpath, a name AND a distpath. I guess it would be pretty convenient. Does such feature exists already? Did I miss it?

DanDvoracek commented 6 years ago

Never mind I found my way :) I forked the project and adapted a line of your plugin to fit in my projects structure.

Basically my troubles were coming from the line 28 of svgxhr.js :

baseUrl = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');

But again, I have plenty of projects setup in a certain way, so it was easier for me to fork it and adapt rather than struggling to overwrite this using webpack.

Thanks anyway, it's a nice plugin 👍

mrsum commented 6 years ago

Hi. Actually you can copy svgxhr.js into your own project and fix it, without fork

DanDvoracek commented 6 years ago

Sorry mate, I've already done my business. However, don't worry, I'm not gonna open any pull request or trigger any kind of update to your stuff. I thought it was the best way to keep the credits addressed to you, as it's your work.

Cheers