npm 包 svg-fill-loader 使用教程

svg-fill-loader 是一个用于 webpack 构建的 npm 包，它可以帮助前端开发者在使用 SVG 图片时，自动完成填充色的替换操作。

在传统的前端开发模式中，使用 SVG 图片需要编写大量代码来完成填充色替换的操作。而使用 svg-fill-loader，我们只需要通过简单的配置即可在项目中实现 SVG 图片的填充色替换。

安装

在使用 svg-fill-loader 之前，我们需要先在项目中安装它。使用以下命令可以快速地将 svg-fill-loader 安装在项目中：

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

SVG 图片的填充色修改是通过 PostCSS 插件实现的。因此，在安装 svg-fill-loader 之前，我们还需要安装 postcss-preset-env 以及 postcss-svg-sprite。

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

配置

在安装完 svg-fill-loader 以及相关的 PostCSS 插件之后，我们需要对项目的 webpack 配置文件进行相关配置。

在 webpack.config.js 文件中，加入以下代码：

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

以上代码中，我们通过 module.rules 的方式对 .svg 文件和 .css 文件进行处理。其中：

  • 对于 .svg 文件，我们使用 svg-fill-loader 进行处理，并且指定 attr 为 'fill'，表示将 SVG 文件中的所有 fill 属性全部替换为指定的颜色。
  • 对于 .css 文件，我们使用 postcss-loader 进行处理，并且在插件列表中加入了 postcss-svg-sprite 和 postcss-preset-env。其中，postcss-svg-sprite 用于生成 SVG 雪碧图，而 postcss-preset-env 则提供了更多的 CSS 兼容性处理功能。

使用

当我们完成了安装和配置后，就可以愉快地开始使用 svg-fill-loader 了。

假设我们有一张名为 logo.svg 的 SVG 图片，其中包含了多个 fill 属性。

在页面需要显示该 SVG 图片时，我们只需要像下面这样写：

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

而在代码中需要修改该 SVG 图片的 fill 属性时，我们只需要在 CSS 文件中编写如下代码：

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

然后，在 HTML 中对该 SVG 图片对应的元素设置 class 属性并赋值为 svg_demo，就可以将 SVG 图片中的 fill 属性全部替换为红色了。代码如下：

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

示例代码

以下代码演示了如何使用 svg-fill-loader 修改 SVG 图片的颜色。

HTML

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

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

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

webpack.config.js

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

index.css

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

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

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

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

阅读全文

猜你喜欢

  • npm 包 awesome-streetview 使用教程

    如果你是一名前端开发者，并且对谷歌地球上的街景图像感兴趣，那么 awesome-streetview 这个 npm 包，无疑是为你量身定制的。这个包提供了一种简单的方法来获取和显示任何经纬度的街景图片...

    5 年前
  • npm 包 google-panorama-url 使用教程

    前言 Google 街景是一项非常实用的功能，可以让我们快速了解一个地区的视觉环境。而 google-panorama-url 这个 npm 包就是帮助我们获取 Google 街景图的 URL 的工具...

    5 年前
  • npm 包 google-panorama-tiles 使用教程

    1. 是什么 google-panorama-tiles 是一个基于谷歌街景图 API 提供纹理坐标瓦片的 npm 包。它使得在 Three.js 和其他 WebGL 应用中显示实景图像更加容易。

    5 年前
  • npm 包 load-img 使用教程

    在现代 Web 开发中，前端工程师需要经常加载图片并进行相关的操作。npm 包 load-img 就是一个非常好用的图片加载工具，它可以简化图片加载的过程并提高用户体验。

    5 年前
  • npm 包 async-image-loader 使用教程

    在前端开发中，我们经常需要加载图片来丰富页面内容。然而，图片加载过程中会导致页面卡顿，影响用户体验。为了解决这个问题，我们可以使用异步加载图片的方法。而这个方法可以通过使用 npm 包 async-i...

    5 年前
  • npm 包 google-panorama-by-id 使用教程

    前言 在前端开发中，使用第三方库可以大大提高开发效率。而使用 npm 包是这些库中最为常见的一种方式。在本文中，我们将介绍一个 npm 包，它叫做 google-panorama-by-id。

    5 年前
  • npm 包 dom-events 使用教程

    简介 在前端开发过程中，我们通常需要监听页面上的各种事件，如鼠标点击、滚动、键盘按下等等。这时候，我们可以使用一些库来帮助我们绑定和处理这些事件。其中，一个非常好用的库就是 dom-events。

    5 年前
  • 使用 Google Panoarama Zoom Level 进行前端地图应用开发

    什么是 npm 包 在学习如何使用 Google Panoarama Zoom Level 之前，我们需要了解一些基础知识：npm 包。NPM 是一个 JavaScript 包管理器，让开发者可以方便...

    5 年前
  • Webkit 支持 dark mode

    在现代 web 开发中，dark mode 已经成为了一种趋势。在传统的浅色主题之外，更多人需要选择一个适合自己的黑暗模式，以便更好地使用他们最喜欢的网站和应用程序。

    5 年前
  • npm 包 google-panorama-equirectangular 使用教程

    Google-panorama-equirectangular 是一个基于 Three.js 的 npm 包，可使用户能够在网站中嵌入 360 度全景图像。这个包可以轻松地将全景图像转换为一个可解析的...

    5 年前
  • npm 包 google-panorama-by-location 使用教程

    Google Pano By Location 是一个基于 Google 地图的 npm 包，允许用户通过经纬度获取 Google 街景照片，并将其嵌入到你的网站中。

    5 年前
  • npm 包 devtool 使用教程

    前端开发中，我们常常需要进行调试工作。浏览器提供了一些调试工具，但是他们并不能满足所有的需求。这时候，npm 包 devtool 就很好用了。 devtool 是什么？ devtool 是一个命令行工...

    5 年前
  • npm 包 Miclint 使用教程

    前言 在编写前端代码的过程中，我们常常需要保证代码的质量和规范性。Miclint 就是一款帮助我们完成这项任务的 npm 工具包。它支持对 JavaScript 和 TypeScript 代码进行静态...

    5 年前
  • npm 包 tapava 使用教程

    前言 在前端开发过程中，我们经常需要进行单元测试来确保代码的质量和正确性。而 npm 包 tapava 就是一个非常好用的工具，它提供了一组简单易用、功能强大的 API，帮助我们更方便地编写和运行测试...

    5 年前
  • npm 包 download-npm-package 使用教程

    npm 是前端开发中必不可少的工具，它能够让我们方便地安装、升级、卸载各种 JavaScript 包，从而加速我们的开发进程。但是，有时候我们需要下载某个 npm 包的源码，进行源码分析或者修改。

    5 年前
  • NPM 包 m-ejs 使用教程

    简介 m-ejs 是一款基于 EJS 模板引擎的 Node.js 模板渲染器，可以用于前端开发中的模板渲染。使用 m-ejs 可以使前端开发变得更加简单、高效，同时还有更好的可维护性。

    5 年前
  • npm 包 rc-qrcode 使用教程

    QR Code 是一种二维码的图形格式，通常用来存放一些文本信息、链接及其他数据，以便于快速、方便地扫描处理。 rc-qrcode 是一个简单易用的 npm 包，可以帮助开发人员快速地生成 QR Co...

    5 年前
  • npm 包 semver-extra 使用教程

    前言 在前端开发中，npm 包是必不可少的一部分。随着项目的不断扩大和发展，我们需要更好地管理依赖关系和版本。semver-extra 就是为此而生的一个 npm 包。

    5 年前
  • npm 包 promis 使用教程

    什么是 promis promis 是 Promise 简写，是一种异步编程的解决方案。它是 ES6 中新增的对象，用来处理异步操作中的回调函数陷阱。相比较于传统的回调函数，使用 promis 可以更...

    5 年前
  • npm 包 exit-on-epipe 使用教程

    在 Node.js 应用程序中，当输出管道被关闭时，通常会收到 EPIPE 错误。这是因为当程序输出到终端时，用户可能会意外地关闭终端或连接丢失而终止了应用程序。通常情况下，EPIPE 错误并不是一个...

    5 年前

相关推荐

    暂无文章