webpack-svgstore-plugin icon indicating copy to clipboard operation
webpack-svgstore-plugin copied to clipboard

understand how to use plugin

Open rustam87 opened this issue 7 years ago • 6 comments

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__);

rustam87 avatar Sep 22 '17 09:09 rustam87

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).

kazagkazag avatar Sep 29 '17 06:09 kazagkazag

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?

rustam87 avatar Oct 03 '17 07:10 rustam87

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

lgordey avatar Apr 22 '18 19:04 lgordey

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/

lgordey avatar Apr 22 '18 19:04 lgordey

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

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__);

lllel avatar May 06 '18 13:05 lllel

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

lgordey avatar May 07 '18 10:05 lgordey