Skip to content
This repository has been archived by the owner on Mar 18, 2023. It is now read-only.

understand how to use plugin #153

Open
rustam87 opened this issue Sep 22, 2017 · 6 comments
Open

understand how to use plugin #153

rustam87 opened this issue Sep 22, 2017 · 6 comments

Comments

@rustam87
Copy link

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
Copy link

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
Copy link
Author

rustam87 commented Oct 3, 2017

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
Copy link
Collaborator

lgordey commented Apr 22, 2018

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

@lgordey
Copy link
Collaborator

lgordey commented Apr 22, 2018

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
Copy link

lllel commented May 6, 2018

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

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
Copy link
Collaborator

lgordey commented May 7, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants