mrsum / webpack-svgstore-plugin

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

understand how to use plugin #153

Open rustam87 opened 6 years ago

rustam87 commented 6 years ago

I am not understand how it works this plugin I add this to my webpack config

 const SvgStore = require('webpack-svgstore-plugin');
....

 plugins: [
     new SvgStore(
            path.resolve(__dirname, './mobile/web/img/svg-icons/*.svg'),
            path.resolve(__dirname, './mobile/web/dist/img/'),
            {
                name: 'sprite.svg',
                prefix: 'svg-icon-',
                svgoOptions: {

                }
            }
        )
]

What is it? it is nessary or not? Where i write code below

var __svg__           = { path: './assets/svg/**/*.svg', name: 'assets/svg/[hash].logos.svg' };
require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);
kazagkazag commented 6 years ago

Usually you put that code in your entrypoint. You should adjust paths to the actual icon (path) and specify path to the output sprite file relative to your webpack config output path (name).

This code is responsible for requesting your sprite on runtime (it makes simple xhr call for file and injects file into html).

rustam87 commented 6 years ago

Now, my sprite rebuild when i update my js file. How can I watch for svg images and when i add/remove svg images, my sprite rebuld?

lgordey commented 6 years ago

@kazagkazag Thanks for response :) @rustam87 I dont think so :( But feel free to send a PR with fix =)

lgordey commented 6 years ago

Also you could edit svg filename like this (to get correct path):

require('webpack-svgstore-plugin/src/helpers/svgxhr')({
  filename: '/assets/' + __svg__.filename
});

Just change /assets/ with what you need/

lllel commented 6 years ago

Подскажите, что тут не так? Сделал всё как в документации описано, но не работает. Появляется пустой файл свг, более того даже с именем не тем, которое я указал..

module.exports = function () { return { plugins: [ new SvgStore( { filename: 'sprite-svg.svg', prefix: 'icon-', svgoOptions: { removeTitle: true } } ) ] }; };

Вставляю в главный файл js const __svg__ = {path: '../img/icon-*.svg', filename: '/img/sprite-svg.svg'}; require('../../node_modules/webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);

lgordey commented 6 years ago

@lllel Там должно быть name, а не filename. И если спрайт пустой, то ты неправильно прописал путь/маску до своих svg.