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

介绍

@svg-icons/material-sharp 是一个基于 Material Design 设计风格的 SVG 图标库。该库提供了多种尺寸的图标，方便开发者在前端项目中直接使用。

安装

@svg-icons/material-sharp 可以通过 npm 包管理工具进行安装。在命令行中输入以下命令即可：

npm install @svg-icons/material-sharp

使用

在 HTML 中使用

在 HTML 中使用 @svg-icons/material-sharp 可以通过 <svg> 标签的 use 属性实现。具体步骤如下：

1. 在 HTML 文件头部引入 @svg-icons/material-sharp 的 CSS 文件：

<link rel="stylesheet" href="@svg-icons/material-sharp/css/material-sharp.css">

1. 在 HTML 文件中使用 <svg> 标签，并设置 use 属性值为需要使用的图标的 ID：

<svg class="icon">
  <use xlink:href="@svg-icons/material-sharp/sprite.svg#home"></use>
</svg>

xlink:href 是 SVG 标准属性，用于指定 SVG 图像文件中的某个元素。

在 CSS 中使用

@svg-icons/material-sharp 还可以通过 CSS 的 background-image 属性在样式表中使用。具体步骤如下：

1. 在 CSS 文件中引入 @svg-icons/material-sharp CSS 文件（同上）。

2. 使用 background-image 属性引入需要使用的图标：

div {
  background-image: url('@svg-icons/material-sharp/sprite.svg#home');
}

注意：使用 background-image 属性时需要设置元素的宽度和高度。

在 JavaScript 中使用

在 JavaScript 中使用 @svg-icons/material-sharp，可以通过创建元素 <svg> 和 <use> 元素来实现。具体步骤如下：

1. 在 JavaScript 中创建 <svg> 元素：

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.classList.add('icon');

1. 创建 <use> 元素，并设置 xlink:href 属性值为需要使用的图标的 ID：

var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '@svg-icons/material-sharp/sprite.svg#home');
svg.appendChild(use);

注意：JavaScript 中使用 <svg> 元素需要创建命名空间。

示例代码

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

结语

@svg-icons/material-sharp 是一个非常实用的前端 SVG 图标库。本文介绍了如何安装和使用该库，并提供了示例代码。希望本文能对前端开发者有所帮助。

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