unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.
https://www.npmjs.com/package/unplugin-icons
MIT License
4.13k stars 144 forks source link

Each Icon has its JS file in production build? #373

Closed galaczi closed 3 months ago

galaczi commented 3 months ago

Hi, I am using unplugin icons with a Sveltekit project. Just did a preview and noticed each icon has its own js file created. There are pages where I use like 50 icons, so that's 50 of these files. Is this the intended behavior?

import {s as u, q as o, r as c, H as v, u as d, b as f, l as w, f as h, v as m, i as x, n as g, w as _} from "./scheduler.C8pNHso9.js";
import {g as p} from "./spread.CN4WR7uZ.js";
import {S as B, i as H} from "./index.TZ6SeM_-.js";
function b(l) {
    let e, a, r = '<path fill="currentColor" d="m4.22 11.29l7.07-7.07a6.01 6.01 0 0 1 8.49 0c2.34 2.34 2.34 6.14 0 8.49l-7.07 7.07c-2.35 2.34-6.15 2.34-8.49 0a6.01 6.01 0 0 1 0-8.49m1.42 1.42a3.98 3.98 0 0 0-1.04 3.86l5.99-5.98l4.24 4.24l3.53-3.54a3.98 3.98 0 0 0 0-5.65a3.98 3.98 0 0 0-5.65 0z"/>', n = [{
        viewBox: "0 0 24 24"
    }, {
        width: "1.2em"
    }, {
        height: "1.2em"
    }, l[0]], i = {};
    for (let t = 0; t < n.length; t += 1)
        i = o(i, n[t]);
    return {
        c() {
            e = c("svg"),
            a = new v(!0),
            this.h()
        },
        l(t) {
            e = d(t, "svg", {
                viewBox: !0,
                width: !0,
                height: !0
            });
            var s = f(e);
            a = w(s, !0),
            s.forEach(h),
            this.h()
        },
        h() {
            a.a = null,
            m(e, i)
        },
        m(t, s) {
            x(t, e, s),
            a.m(r, e)
        },
        p(t, [s]) {
            m(e, i = p(n, [{
                viewBox: "0 0 24 24"
            }, {
                width: "1.2em"
            }, {
                height: "1.2em"
            }, s & 1 && t[0]]))
        },
        i: g,
        o: g,
        d(t) {
            t && h(e)
        }
    }
}
function q(l, e, a) {
    return l.$$set = r=>{
        a(0, e = o(o({}, e), _(r)))
    }
    ,
    e = _(e),
    [e]
}
class S extends B {
    constructor(e) {
        super(),
        H(this, e, q, b, u, {})
    }
}
export {S as P};

This is how I am importing them:

import MdiChevronRight from 'virtual:icons/mdi/chevron-right'

Originally posted by @galaczi in https://github.com/unplugin/unplugin-icons/discussions/372

antfu commented 3 months ago

Yes this is how it works. I would generally recommend CSS icons instead: https://antfu.me/posts/icons-in-pure-css