0

我希望能够加载 FontAwesome 子集（支持我网站中使用的核心图标），然后延迟加载整个 fontawesome 库（因此 CMS 内容作者可以使用他们想要的任何图标。

FontAwesome Kits 已经发布（因为我有一个 Kickstarter 支持者许可证）。

我想我可以简单地创建我的font-awesome-subset.js并使用 eventListener onDOMContentLoaded来加载fontawesome/js/all.js，但是当两个文件都被加载时，只有子集的图标被转换为 SVG。

假设问题是library.add()我的子集中没有被 覆盖all.js，然后我尝试创建另一个font-awesome-all.js可以调用的文件library.add('far', 'fas'...)，但是 webpack 认为将所有图标都包含在font-awesome-subset.js 和 font-awesome-all.js中会更有效。

关于如何做到这一点的任何建议？

这是一个代码示例：

// font-awesome-subset.js
import {list,of,icons,I,want} from 'font-awesome-pro/js-packages/@fortawesome/pro-brands-svg-icons/index.es.js'; // using the github repo, since as a kickstarter backer I dont have access to the private NPM.
import {library, dom} from 'font-awesome-pro/js-packages/@fortawesome/fontawesome-svg-core/index.es.js';

library.add( list,of,icons,I,want );
dom.i2svg();

document.addEventListener('DOMContentLoaded', function () {
    const scriptEle = document.createElement('script');
    
    scriptEle.src =
        // first attempt: file loads, but icons dont appear.
        // 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js';
        // second attempt: webpack includes everything from `font-awesome-all.js` in this file as well.
       './font-awesome-all.js';

    document.head.appendChild(scriptEle);
});


//font-awesome-all.js
import { far } from 'font-awesome-pro/js-packages/@fortawesome/pro-regular-svg-icons/index.es';
import { fas } from 'font-awesome-pro/js-packages/@fortawesome/pro-solid-svg-icons/index.es.js';
import { fab } from 'font-awesome-pro/js-packages/@fortawesome/pro-brands-svg-icons/index.es.js';

import {
    library,
    dom,
} from 'font-awesome-pro/js-packages/@fortawesome/fontawesome-svg-core/index.es';

library.add(far, fas, fab);
dom.i2svg();
dom.watch();
4

0 回答 0