npm 包 webpack-iconfont-plugin-nodejs 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

前言

随着前端开发的不断发展，越来越多的项目需要使用 iconfont 来实现图标的展示。针对这个需求，有很多开源的工具包来支持前端开发人员完成 iconfont 在项目中的使用。其中 webpack-iconfont-plugin-nodejs 就是一个非常优秀的 npm 包，能够帮助开发人员轻松使用 iconfont。

简介

webpack-iconfont-plugin-nodejs 是一个 webpack 插件，可以将 iconfont 抽离出来为单独的文件，方便项目的开发和维护。支持将字体文件、css 文件和 html 文件单独抽离出来。它支持自动生成多种格式的字体文件和 css 文件，满足各种需求。

安装

使用 npm 安装：

--- ------- ------------------------------ ----------

使用方法

1. 配置 webpack 插件

在 webpack 配置文件中添加如下代码：

----- -------------- - ------------------------------------------
----- ---- - ----------------

-------------- - -
    -- ---
    -------- -
        -- ---
        --- ----------------
            ---- ------------------- -- -------- ------
            ------- ----------- -- -------- ------ --
            ----- -
                ----- ------------------------------------------
                ---- ---------------------------------------
                ----- ----------------------------------------
            -- -- ------
            ------ - -- ------
                -------- -----------
                ---- ----------------------- ----------------------
            --
            ------------ ----------------------- ------------------ -- --- ----
            -------- ------- ------ ------- -------- ------- -- -------
            ----------- ----- -- ---- ------
            -------- --- -- ---- -------
        --
    -
    -- ---
--

其中的参数说明：

  • src：iconfont 所在的文件夹路径
  • family：iconfont 的 family 名称
  • dest：输出的字体文件、css 文件和 html 文件路径
  • watch：启用增量编译配置
  • cssTemplate：css 模板文件路径
  • formats：支持输出的格式
  • fontHeight：font height
  • descent：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 配置文件中使用。

--- ------- -------- ----------
----- -------------- - ------------------------------------------
----- ---- - ----------------
----- -------- - --------------------

----- ----------- - ----------------------- ------------------

-------------- - -
    -- ---
    -------- -
        -- ---
        --- ----------------
            -- ---
            ------------
            -- ---
        --
    -
    -- ---
--

-- ------
--------------------------------

5. iconfont 文件处理

webpack-iconfont-plugin-nodejs 默认支持处理 svg 格式的 iconfont 文件，我们还可以通过配置 loaders 来支持处理其他格式的 iconfont 文件，例如 woff、woff2 等。

需要注意的是，在配置 svg-loader 的过程中，由于增量编译会对文件进行缓存，当文件内容没有发生变化时，增量编译不会再次执行 svg-loader，这样就会导致生成的 hash 值不正确。为了解决这个问题，我们可以安装一下 hash-sum 包并对 svg 文件进行 hash 操作。

--- ------- -------- ----------
----- -------------- - ------------------------------------------
----- ---- - ----------------
----- ------- - --------------------

-------------- - -
    -- ---
    ------- -
        ------ -
            -- ---
            -
                ----- ------------------
                ------- --------------------
                -------- -
                    ----------- -----
                    ------------- -------- ------- ---------
                    --------- ---------------------------------------------
                -
            -
        -
    --
    -------- -
        -- ---
        --- ----------------
            -- ---
            -------- ------- ------ ------- -------- -------
            -- ---
        --
    -
    -- ---
--

示例代码

  • iconfont 的 svg 文件：
---- -------- ---
---- ---------------------------------- ---------- - ---- ------
  -----
    ------- ------------------------------------------------------------------------------------ ---- ------------------ ---------------------- ----------------------- ---- ------------------------------------------------------------------------------------- ---- ------------------ ---------------------- ------------------------
    -------------------
  --------
------
  • webpack 配置文件：
----- -------------- - ------------------------------------------
----- ---- - ----------------
----- -------- - --------------------
----- ------- - --------------------

----- ----------- - ----------------------- ------------------

-------------- - -
    ----- --------------
    ------ -----------------
    ------- -
        --------- ------------
        ----- ----------------------- -------
    --
    ------- -
        ------ -
            -
                ----- ---------
                ---- ---------------- -------------
            --
            -
                ----- ----------------------
                ---- -
                    -
                        ------- -------------
                    -
                -
            --
            -
                ----- ------------------
                ------- --------------------
                -------- -
                    ----------- -----
                    ------------- -------- ------- ---------
                    --------- ---------------------------------------------
                -
            -
        -
    --
    -------- -
        --- ----------------
            ---- -------------------
            ------- -----------
            ----- -
                ----- ------------------------------------------
                ---- ---------------------------------------
                ----- ----------------------------------------
            --
            ------ -
                -------- -----------
                ---- ----------------------- ----------------------
            --
            ------------
            -------- ------- ------ ------- -------- -------
            ----------- -----
            -------- ---
        --
    --
    ---------- -
        ------------ -------------------- --------
        --------- -----
        ----- ----
    -
--

--------------------------------
  • html 文件：
--------- -----
------
------
    ----- ----------------
    -----------------------
    ----- ---------------- ------------------------------------------
-------
------
    -- --------------- ---------------
    -- --------------- ------------------
    -- --------------- ----------------
-------
-------
  • css 样式表：
---------- -
    ------------ -----------
    ---- --------------------------------------
    ---- -------------------------------------------- ----------------------------
         --------------------------------------- ----------------
         -------------------------------------- ---------------
         ------------------------------------- -------------------
         ---------------------------------------------- --------------
    ------------ -------
    ----------- -------
-

---------------- -
    ------------ -----------
    ------------ -------
    ----------- -------
    --------------- -------
    -------- -------------
    ------------------------ ----------
    ----------------------- ------------
    ---------- -----
    ------------ --
    --------- ---------
-

-------------------------- -
    -------- --------
-

----------------------------- -
    -------- --------
-

--------------------------- -
    -------- --------
-

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb141b5cbfe1ea06110ff

阅读全文

猜你喜欢

  • npm 包 rsmq 使用教程

    在 Node.js 开发中，消息队列是实现异步通信的重要方式之一。npm 上有许多优秀的消息队列库，本文将介绍一款轻量化的消息队列库 rsmq 的使用教程。 安装 使用 npm 安装 rsmq ---...

    4 年前
  • npm包 @types/signale

    介绍 在前端开发中，我们经常需要在控制台输出一些信息来检查程序的执行情况。不过，我们都知道控制台输出的信息很不直观，难以区分不同的信息。为了解决这个问题，有些开发者使用了第三方的库来美化控制台输出的信...

    4 年前
  • npm 包 grunt-http 使用教程

    在前端开发中，使用自动化构建工具可以有效地提升开发效率，而 grunt-http 是一个常用的 npm 包，它可以让我们在 grunt 任务中发送 HTTP 请求，方便地处理 API 接口等相关操作。

    4 年前
  • npm 包 react-test-utils 使用教程

    React 是现代 Web 前端最热门的框架之一，它使得开发交互式的 UI 更加简单。而在 React 开发过程中，我们需要使用测试工具来确保项目的质量。react-test-utils 是 Reac...

    4 年前
  • npm 包 @types/peerjs 使用教程

    在前端开发中，我们经常需要使用到 PeerJS 来实现 WebRTC 技术，接下来我们将会探讨如何使用 npm 包 @types/peerjs 来优化我们的开发流程。

    4 年前
  • npm 包 stun-js 使用教程

    什么是 stun-js？ stun-js 是一个使用 TypeScript 实现的实时通信库，它提供了多种通信方式来满足开发者的需求，包括 WebSocket、WebRTC、HTTP 等多种协议。

    4 年前
  • npm 包 turn-js 使用教程

    在前端开发中，我们经常需要创建和展示各种各样的文档和图片。为了优化用户的体验和效果，我们需要使用一些工具和插件来实现页面的翻页、缩放等操作。其中一个非常实用的工具就是 turn.js，它是一个开源的 ...

    4 年前
  • npm 包 winston-browser 使用教程

    Winston-browser 是一个在浏览器端使用 Winston 日志库的 npm 包。它可以在前端应用中记录日志，并将日志以指定格式输出到浏览器控制台或者服务器端。

    4 年前
  • npm 包 winston-debug 使用教程

    Winston 是一个 Node.js 的日志管理库，winson-debug 是它的一个拓展库，能够将日志输出到控制台并保留调试信息，方便开发者快速定位错误，本篇文章将介绍 winston-debu...

    4 年前
  • NPM包Winston-meta-wrapper使用教程

    在前端开发过程中，我们需要监控应用程序的运行状态，以保证系统稳定性。其中，日志记录是一个重要且必要的技术。我们可以使用Winston工具来记录应用程序的日志。而在Winston的基础上，开发者们还创建...

    4 年前
  • NPM 包 Strawman 使用教程

    Strawman 是一个基于 React 的 UI 组件库，它提供了许多常用的 UI 组件，比如按钮、输入框、下拉框、表格等等，可以帮助我们快速构建 Web 应用的用户界面。

    4 年前
  • npm 包 apprtc-socket 使用教程

    简介 apprtc-socket 是一个用于实现 WebRTC 信令传输的 npm 包，适用于前端开发。通过使用 apprtc-socket，可以方便的实现 WebRTC 应用中的信令传输功能。

    4 年前
  • npm 包 react-lazy-load-image-component 使用教程

    当涉及到在前端应用程序中加载图像时，我们往往会抱怨页面加载速度过慢，这通常是由于许多图像在页面加载时一次性加载而导致的。为了解决这个问题，我们可以使用“react-lazy-load-image-co...

    4 年前
  • npm包：inquirer-recursive使用教程

    在前端开发中，经常需要从用户处获取一些信息来做相应的处理。而命令行应用程序是最常见的应用程序之一。这时候，我们就需要使用命令行交互工具来帮助我们完成这些操作了。其中，npm包inquirer-recu...

    4 年前
  • npm 包 @let/eslint-config 使用教程

    介绍 在前端开发中，代码质量的保证是非常重要的。而 ESLint 作为代码规范的工具，可以帮助我们检查代码规范性，从而提高代码质量。为了方便团队和个人使用 ESLint，许多人开发了自己的eslint...

    4 年前
  • npm 包 parse-packagejson-name 使用教程

    在前端开发中，我们经常需要使用各种 npm 包来帮助我们完成各种任务。npm 包的名称通常是由两部分组成：包名和版本号。然而，有些时候我们需要对包名进行分解，比如获取包的作者信息等。

    4 年前
  • npm 包@blossom-gql/core 使用教程

    简介 @blossom-gql/core 是一款前端开发工具，旨在简化前端开发中的 GraphQL API 的管理和调用。该工具采用 TypeORM 来生成我们所需的 GraphQL 接口，同时也支持...

    4 年前
  • npm 包 @rstacruz/gatsby-remark-component 使用教程

    前言 在 web 前端开发中，我们经常需要使用各种库和框架来提高开发效率。而 npm 包就是其中一种非常重要的资源。在此，我们将介绍一个名为 @rstacruz/gatsby-remark-compo...

    4 年前
  • npm 包 @types/ansi-escapes 使用教程

    什么是 @types/ansi-escapes？ @types/ansi-escapes 是一款基于 TypeScript 的 npm 包，它提供了一个 TypeScript 类型定义，可以帮助你更好...

    4 年前
  • npm 包 @types/camelcase 使用教程

    在前端开发中，使用 TypeScript 可以提高代码的可维护性和可读性。但是，当你在使用 TypeScript 中调用 JavaScript 库的时候，你可能会遇到一个问题：TypeScript 并...

    4 年前

相关推荐

    暂无文章