Webpack - svg ikonky pomocí SVGSpritemapPlugin (3)

Webpack - svg ikonky pomocí SVGSpritemapPlugin (3)

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>

Komentáře

Vaše reakce na Webpack - svg ikonky pomocí SVGSpritemapPlugin (3)
Kobyla
#1895

05.04.2024 [1]
Čau,

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

Hanz
#1899

14.04.2024 [2]
Poslední komentář
Ahoj,

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.

Související obsah

webpack

javascript

npm

js

svg

Reference

Podívejte se na naše reference

Prohlédnout

Aplikace

Podívejte se na naše aplikace

Prohlédnout

Co umíme?

Podívejte se co umíme

Prohlédnout

Co umíme?

Vytváříme sofistikované aplikace pro náročné

Od webových aplikací přes android až po převodové můstky či složité informační systémy.

Podívejte se k nám

Máte ještě čas? Podívejte se na další rubriky

Tento web používá soubory cookie. Dalším procházením tohoto webu vyjadřujete souhlas s jejich používáním.. Více informací zde.