search

Padax / w-components

JavaScript library based on Web Components.
MIT License
22 stars 2 forks source link

#94: Import icon-font files with Webpack asset modules #155

Closed nizniz187 closed 2 years ago

nizniz187 commented 2 years ago

Solution In a Nutshell

We pack icon-font files along with our w-components NPM module, then let the users decide if they are going to import them either by JS import (with Webpack) or manually (with vanilla JS).

Changes in Detail

1. Add a icon-font CSS file for outside project to easily import. image image (The CSS import was supposed to be imported as a side effect. However a named import & export was seemed to be needed for being detected used and then bundled by Webpack. Wierd...)

2. Add Webpack modules to parse & bundle CSS & TTF files image image

3. After Webpack bundling, the icon-font files will be outputed as separated files, and the related @font-face CSS will be bundled within the JS file. image When we run the official site, the @font-face CSS will be automatically inserted as <style> tag into HTML. image

cwpeng commented 2 years ago

Finally, we get our icon font back in official website. Excellent solution.