understand how to use plugin
Opened this issue · 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__);
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).
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?
@kazagkazag Thanks for response :)
@rustam87 I dont think so :( But feel free to send a PR with fix =)
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/
Подскажите, что тут не так? Сделал всё как в документации описано, но не работает.
Появляется пустой файл свг, более того даже с именем не тем, которое я указал..
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__);