Nyní se naučíme pomocí webpacku převést všechny svg ikonky (zbuildit) do jediného souboru icons.svg a pak je zobrazovat.
webpack.config.js
plugins: [
new SVGSpritemapPlugin("www/assets/icons/**/*.svg", {
output: {
filename: "../images/icons.svg"
},
sprite: {
prefix: false,
generate: {
title: false
}
}
}),
......
Co to udělá?
Všechny svg ikonky v assets/icons/ to převede do jediného souboru assets/images/icons.svg
Jak to používat?
V kódu pak voláme ikonky tímto způsobem:
< svg class="icon-e-mail-tiny icon">< use xlink:href="/assets/images/icons.svg#e-mail-tiny">< /use>< /svg>
používám webpack a jquery. Všechny cesty ve webpacku jsou ok, ale přesto mám v kódu chybu
Uncaught ReferenceError: $ is not defined
když se snažím v aplikaci zavolat cokoliv přes jquery např.
$(document).on('keyup', function(e) { ...
Zkusil jsem do webpacku přidat
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}),
Ale vůbec to nepomohlo. Co s tím? Díky
má to více řešení, ale zkusi tohle - udělej soubor jquery.js a ten přidej do webpacku.
V tom souboru bude:
import jquery from 'jquery';
window.$ = jquery;
Udělej rebuild a už ti to půjde.