前言
随着前端开发的不断发展,越来越多的项目需要使用 iconfont 来实现图标的展示。针对这个需求,有很多开源的工具包来支持前端开发人员完成 iconfont 在项目中的使用。其中 webpack-iconfont-plugin-nodejs 就是一个非常优秀的 npm 包,能够帮助开发人员轻松使用 iconfont。
简介
webpack-iconfont-plugin-nodejs 是一个 webpack 插件,可以将 iconfont 抽离出来为单独的文件,方便项目的开发和维护。支持将字体文件、css 文件和 html 文件单独抽离出来。它支持自动生成多种格式的字体文件和 css 文件,满足各种需求。
安装
使用 npm 安装:
npm install webpack-iconfont-plugin-nodejs --save-dev
使用方法
1. 配置 webpack 插件
在 webpack 配置文件中添加如下代码:
-- -------------------- ---- ------- ----- -------------- - ------------------------------------------ ----- ---- - ---------------- -------------- - - -- --- -------- - -- --- --- ---------------- ---- ------------------- -- -------- ------ ------- ----------- -- -------- ------ -- ----- - ----- ------------------------------------------ ---- --------------------------------------- ----- ---------------------------------------- -- -- ------ ------ - -- ------ -------- ----------- ---- ----------------------- ---------------------- -- ------------ ----------------------- ------------------ -- --- ---- -------- ------- ------ ------- -------- ------- -- ------- ----------- ----- -- ---- ------ -------- --- -- ---- ------- -- - -- --- --
其中的参数说明:
src
:iconfont 所在的文件夹路径family
:iconfont 的 family 名称dest
:输出的字体文件、css 文件和 html 文件路径watch
:启用增量编译配置cssTemplate
:css 模板文件路径formats
:支持输出的格式fontHeight
:font heightdescent
:font descent
2. 在项目中使用
在 html 文件或 css 样式表中使用 iconfont:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ----- ---------------- ------------------------------------------ ------- ------ -- --------------- --------------- -- --------------- ------------------ -- --------------- ---------------- ------- -------
-- -------------------- ---- ------- ---------- - ------------ ----------- ---- -------------------------------------- ---- -------------------------------------------- ---------------------------- --------------------------------------- ---------------- -------------------------------------- --------------- ------------------------------------- ------------------- ---------------------------------------------- -------------- ------------ ------- ----------- ------- - ---------------- - ------------ ----------- ------------ ------- ----------- ------- --------------- ------- -------- ------------- ------------------------ ---------- ----------------------- ------------ ---------- ----- ------------ -- --------- --------- - -------------------------- - -------- -------- - ----------------------------- - -------- -------- - --------------------------- - -------- -------- -
3. 增量编译
采用增量编译,可以对比前后两次编译所执行的操作,只编译修改过的文件,从而开启增量编译。
-- -------------------- ---- ------- ----- -------------- - ------------------------------------------ ----- ---- - ---------------- -------------- - - -- --- -------- - -- --- --- ---------------- -- --- ------ - -- ------ -------- ----------- ---- ----------------------- ---------------------- -- -- --- -- - -- --- --
其中:
pattern
:需要监控的文件路径模式,支持 glob patterns。cwd
:监控的文件夹路径。
4. css 模板
默认情况下,webpack-iconfont-plugin-nodejs 生成的 css 文件可能不满足我们的实际使用需求。因此,我们可以自定义一个 css 模板文件,并在 webpack 配置文件中配置。
-- -------------------- ---- ------- ---------- - ------------ ------------- ---- --------------------- ---------------- -------------------- --------------- ------------------- ------------------- ------------------- ---------------------------- ------------------------------ -------------- ------------ ------- ----------- ------- - ---------- -------------------------------------- - -------- - - ----------
其中:
{{family}}
表示 iconfont 的 family 名称;{{font}}
表示字体文件的路径;{{#icons}}...{{/icons}}
表示循环所有的 icon。
**注:**我们需要安装 nunjucks 模板引擎包,并在 webpack 配置文件中使用。
npm install nunjucks --save-dev
-- -------------------- ---- ------- ----- -------------- - ------------------------------------------ ----- ---- - ---------------- ----- -------- - -------------------- ----- ----------- - ----------------------- ------------------ -------------- - - -- --- -------- - -- --- --- ---------------- -- --- ------------ -- --- -- - -- --- -- -- ------ --------------------------------
5. iconfont 文件处理
webpack-iconfont-plugin-nodejs 默认支持处理 svg 格式的 iconfont 文件,我们还可以通过配置 loaders 来支持处理其他格式的 iconfont 文件,例如 woff、woff2 等。
需要注意的是,在配置 svg-loader 的过程中,由于增量编译会对文件进行缓存,当文件内容没有发生变化时,增量编译不会再次执行 svg-loader,这样就会导致生成的 hash 值不正确。为了解决这个问题,我们可以安装一下 hash-sum
包并对 svg 文件进行 hash 操作。
npm install hash-sum --save-dev
-- -------------------- ---- ------- ----- -------------- - ------------------------------------------ ----- ---- - ---------------- ----- ------- - -------------------- -------------- - - -- --- ------- - ------ - -- --- - ----- ------------------ ------- -------------------- -------- - ----------- ----- ------------- -------- ------- --------- --------- --------------------------------------------- - - - -- -------- - -- --- --- ---------------- -- --- -------- ------- ------ ------- -------- ------- -- --- -- - -- --- --
示例代码
- iconfont 的 svg 文件:
<!-- home.svg --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <path d="M160 480H96v320h64v64h32v-64h224v64h32v-64h64V480h-64v-32h-32v32h-64v-32h-32v32h-224v-32z m-64 352h-32v-32h32v32z m32-128h-32v-32h32v32z m-32-160h-32v-32h32v32z m448 192h-64v128h64v64h32v-64h224v64h32v-64h64V704h-64v-32h-32v32h-64v-32h-32v32h-224v-32z m-64 352h-32v-32h32v32z m32-128h-32v-32h32v32z m-32-160h-32v-32h32v32z" fill="currentColor" ></path> </svg>
- webpack 配置文件:
-- -------------------- ---- ------- ----- -------------- - ------------------------------------------ ----- ---- - ---------------- ----- -------- - -------------------- ----- ------- - -------------------- ----- ----------- - ----------------------- ------------------ -------------- - - ----- -------------- ------ ----------------- ------- - --------- ------------ ----- ----------------------- ------- -- ------- - ------ - - ----- --------- ---- ---------------- ------------- -- - ----- ---------------------- ---- - - ------- ------------- - - -- - ----- ------------------ ------- -------------------- -------- - ----------- ----- ------------- -------- ------- --------- --------- --------------------------------------------- - - - -- -------- - --- ---------------- ---- ------------------- ------- ----------- ----- - ----- ------------------------------------------ ---- --------------------------------------- ----- ---------------------------------------- -- ------ - -------- ----------- ---- ----------------------- ---------------------- -- ------------ -------- ------- ------ ------- -------- ------- ----------- ----- -------- --- -- -- ---------- - ------------ -------------------- -------- --------- ----- ----- ---- - -- --------------------------------
- html 文件:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ----- ---------------- ------------------------------------------ ------- ------ -- --------------- --------------- -- --------------- ------------------ -- --------------- ---------------- ------- -------
- css 样式表:
-- -------------------- ---- ------- ---------- - ------------ ----------- ---- -------------------------------------- ---- -------------------------------------------- ---------------------------- --------------------------------------- ---------------- -------------------------------------- --------------- ------------------------------------- ------------------- ---------------------------------------------- -------------- ------------ ------- ----------- ------- - ---------------- - ------------ ----------- ------------ ------- ----------- ------- --------------- ------- -------- ------------- ------------------------ ---------- ----------------------- ------------ ---------- ----- ------------ -- --------- --------- - -------------------------- - -------- -------- - ----------------------------- - -------- -------- - --------------------------- - -------- -------- -
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedb141b5cbfe1ea06110ff