npm 包 @svg-icons/material-rounded 使用教程

阅读时长 3 分钟读完

近年来,随着前端技术的不断发展,我们如今在前端开发中广泛使用的各种软件库和框架,已经为我们带来了很大的便利。其中,npm 包就是我们经常使用的一种便民工具,它集合了许多前端开发中需要的代码和库,让我们能够更加快捷地开发我们的应用程序。

在这篇文章中,我们要分享一下 npm 包 @svg-icons/material-rounded 的使用教程。该包可以让我们使用 material design 风格的图标,以 SVG 形式嵌入到我们的应用程序中。

安装

安装该包非常简单,只需要执行以下命令:

接下来,我们就可以愉快地使用其中的图标了。

使用

首先,我们需要在应用程序的 HTML 文件头部引入相关的 SVG 文件,如下所示:

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

然后,在需要使用图标的地方,我们可以直接添加如下的 HTML 代码:

其中,icon_name 是具体要使用的图标的名称。可以在官方文档中查看所有的图标名称。

示例代码

在以下示例代码中,我们将使用 npm 包 @svg-icons/material-rounded 来添加两个 material design 风格的图标。

HTML 代码:

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

以上是 npm 包 @svg-icons/material-rounded 的使用教程,希望对你有所帮助。这个包可以让我们非常方便地使用 material design 风格的图标,同时也可以让我们更加高效地开发我们的应用程序。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5f70003ba9b7065299ccba8d

纠错
反馈