@blueeast/bluerain-plugin-vector-icons 使用教程

前言

随着前端技术的不断发展，我们能够对网页上的内容进行更加细致个性化的设置。而在这其中，图标设计也不可或缺。@blueeast/bluerain-plugin-vector-icons 就是这样一款工具，它提供了全面、高质量的矢量图标资源和自定制图标的功能，方便了前端开发人员的工作。本文将详细介绍该工具的使用教程。

安装

@blueeast/bluerain-plugin-vector-icons 是一个 npm 包，因此可以在终端中通过 npm 命令进行安装。可以通过 yarn 来安装也可以使用 npm。以下是具体步骤：

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

使用方式

引入本地图标

  1. 安装 @blueeast/bluerain-plugin-vector-icons 后，需要把需要使用的图标下载到本地中，比如将 icon-home.svg 下载至本地文件夹 /assets/icons。

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

  2. 在使用的 html 中反转义该 svg 文件。

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

在项目中自定义图标

而如果使用的是自定义的图标，需要进行如下操作：

  1. 新建 my-icon.svg 文件，格式示例如下：

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

  2. 在项目中引入 my-icon.svg。

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

    或者在项目中通过 require 引入：

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

    然后就可以在页面中使用该图标：

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

用法示例

以下是在 vue 中使用 @blueeast/bluerain-plugin-vector-icons 的完整示例。

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

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

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

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

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

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

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

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

结语

@blueeast/bluerain-plugin-vector-icons 提供了一种简单的方式来使用矢量图标，在项目开发中扮演了越来越重要的角色。学习、使用和了解 @blueeast/bluerain-plugin-vector-icons 工具可以帮助我们更加高效地开发 Web 应用程序。

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

阅读全文

猜你喜欢

  • npm 包 relite 使用教程

    在前端开发中，我们常常需要进行状态管理，而 relite 可以帮助我们更方便地进行状态管理。本文将详细介绍 relite 的使用方法，让你能够在项目中快速上手 relite，并掌握其深层次特性。

    4 年前
  • npm 包 create-app 使用教程

    在前端开发中，我们经常需要从头开始构建一个新的应用程序。基础设置需要许多繁琐的步骤，例如文件夹结构、配置文件等等。如果每次都要手动设置这些，就会非常浪费时间和精力。

    4 年前
  • npm 包 gulp-strip-code 使用教程

    在前端开发中，我们为了提高代码的性能和可读性，经常需要进行代码的精简和清理工作。其中一种常用的方法是通过删除或注释掉特定的代码块来达到这个目的。但手动完成这个过程会非常耗费时间。

    4 年前
  • npm 包 jest-runner-tsc 使用教程

    在前端开发过程中，我们不仅要保证代码正确性，还要保证代码的可读性和可维护性。为了达到这一目的，我们通常需要编写测试代码来测试我们的应用程序。jest-runner-tsc 是一个基于 Jest 的运行...

    4 年前
  • npm 包 eslint-plugin-testing-library 使用教程

    作为前端开发人员，我们知道测试是保证产品质量的不可或缺的一环。然而，编写高质量的测试代码并不是一件容易的事情，而 ESLint 是一个帮助我们避免常见错误和提高代码质量的工具。

    4 年前
  • npm 包 eslint-plugin-jest-dom 使用教程

    简介 为了提高代码质量和维护性，我们需要使用代码检查工具对代码进行检查。eslint-plugin-jest-dom 是一个 npm 包，它为 Jest DOM 断言库提供了 ESLint 规则，帮助...

    4 年前
  • npm 包 multispinner 使用教程

    在前端开发中，我们经常需要在命令行中运行多个并发任务，比如启动本地开发服务器、编译代码、打包项目等等。在这种情况下，我们需要一个工具来帮助我们管理这些任务，并且让任务状态清晰可见。

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

    aesthetic-react 是一个用于 React 应用的样式管理工具。它可以帮助开发者快速、方便地实现样式的统一管理，减轻了样式重构和调整的负担。本文将介绍 aesthetic-react 的基...

    4 年前
  • npm 包 aesthetic 使用教程

    简介 aesthetic 是一个用于提供 CSS 样式主题的 JavaScript 库。它使用了一些内置的预处理器，例如 Less、Sass 和 Stylus，同时还支持对 CSS Modules 和...

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

    在前端开发中，多语言支持是一个非常重要和必要的功能。如果你的应用需要支持多语言，那么你就需要使用一个好用的国际化库来帮助你完成这项任务。在本文中，我们将介绍一个非常流行的 npm 包 react-i1...

    4 年前
  • npm 包 ptz-i18n 使用教程

    在开发 Web 应用程序时，多语言支持是必不可少的。ptz-i18n 是一个轻量级、易于使用的 npm 包，它提供了处理多语言文本的方法。本文将介绍它的使用方法以及一些实际应用案例。

    4 年前
  • npm 包 gatsby-remark-reading-time 使用教程

    本文将介绍如何使用 npm 包 gatsby-remark-reading-time 来实现一个在博客文章中自动计算阅读时间的功能。这个包是基于 Gatsby 插件的，旨在为 Gatsby 框架上的博...

    4 年前
  • npm 包 gatsby-remark-prismjs 使用教程

    在开发网站和应用程序时，我们经常需要展示和高亮显示代码。在前端开发中，有很多库可以实现代码高亮，其中一个流行的工具是 PrismJS。 PrismJS 是一款开源的轻量级语法高亮库，支持多种语言，用法...

    4 年前
  • npm 包 gatsby-remark-prettier 使用教程

    在前端开发中，使用 Gatsby 作为静态网站生成器已经成为一种趋势，而 gatsby-remark-prettier 这个 npm 包可以帮助我们更好地保持我们的代码格式统一，提高我们的代码可读性。

    4 年前
  • npm 包 gatsby-remark-external-links 使用教程

    在前端开发中，很多时候我们需要在网站中引用外部链接，例如引用一些第三方库或者其他网站的资源。这时候，我们就需要使用到 gatsby-remark-external-links 这个 npm 包来方便地...

    4 年前
  • npm 包 gatsby-remark-autolink-headers 使用教程

    简介 gatsby-remark-autolink-headers 是一个 Gatsby 插件，它可以自动为网页中的标题添加锚点链接，方便用户在页面中进行快速跳转。

    4 年前
  • npm 包 gatsby-plugin-sharp 使用教程

    前言 gatsby-plugin-sharp 是一个专门为 Gatsby 网站优化图片的 npm 包。它可以自动将原始图片进行压缩和优化，并生成不同尺寸和格式的图片。

    4 年前
  • npm 包 gatsby-plugin-remove-trailing-slashes 使用教程

    在开发网站时，一个常见的问题就是 URL 的结尾是否应该包含斜杠。需要注意的是，在某些情况下，URL 的结尾含有斜杠和不含有斜杠推断出的意义是不同的。 例如，访问 https://example.co...

    4 年前
  • npm 包 gatsby-plugin-react-helmet 使用教程

    介绍 gatsby-plugin-react-helmet 是 Gatsby 官方推荐的一个插件，用于方便地管理网站头部信息（head）。通过使用该插件，我们可以轻松地为网站添加 metadata、s...

    4 年前
  • NPM 包 Gatsby-Plugin-Offline 使用教程

    前端开发中，很多时候我们需要面对用户可能处在离线状态的情况。为了保证用户体验，我们需要保证网站在离线状态下依然能够正常使用。其中一个解决方案就是使用 PWA（Progressive Web App） ...

    4 年前

相关推荐

    暂无文章