介绍
@svg-icons/material-sharp 是一个基于 Material Design 设计风格的 SVG 图标库。该库提供了多种尺寸的图标，方便开发者在前端项目中直接使用。
安装
@svg-icons/material-sharp 可以通过 npm 包管理工具进行安装。在命令行中输入以下命令即可：
--- ------- -------------------------
使用
在 HTML 中使用
在 HTML 中使用 @svg-icons/material-sharp 可以通过 <svg> 标签的 use 属性实现。具体步骤如下：
- 在 HTML 文件头部引入 @svg-icons/material-sharp 的 CSS 文件：
----- ---------------- --------------------------------------------------------
- 在 HTML 文件中使用
<svg>标签，并设置use属性值为需要使用的图标的 ID：
---- ------------- ---- ------------------------------------------------------------- ------
xlink:href是 SVG 标准属性，用于指定 SVG 图像文件中的某个元素。
在 CSS 中使用
@svg-icons/material-sharp 还可以通过 CSS 的 background-image 属性在样式表中使用。具体步骤如下：
在 CSS 文件中引入 @svg-icons/material-sharp CSS 文件（同上）。
使用
background-image属性引入需要使用的图标：
--- - ----------------- ------------------------------------------------- -
注意：使用
background-image属性时需要设置元素的宽度和高度。
在 JavaScript 中使用
在 JavaScript 中使用 @svg-icons/material-sharp，可以通过创建元素 <svg> 和 <use> 元素来实现。具体步骤如下：
- 在 JavaScript 中创建
<svg>元素：
--- --- - ------------------------------------------------------ ------- --------------------------
- 创建
<use>元素，并设置xlink:href属性值为需要使用的图标的 ID：
--- --- - ------------------------------------------------------ ------- -------------------------------------------------- ------------- --------------------------------------------- ---------------------
注意：JavaScript 中使用
<svg>元素需要创建命名空间。
示例代码
--------- -----
------
------
-------------------------------- ------------
----- ---------------- --------------------------------------------------------
-------
----- -
------ -----
------- -----
-
--------
-------
------
---- -------------
---- -------------------------------------------------------------
------
---- ------------- ----- ------- ----- ----------------- -----------------------------------------------------------
--------
--- --- - ------------------------------------------------------ -------
--------------------------
--- --- - ------------------------------------------------------ -------
-------------------------------------------------- ------------- -------------------------------------------------
---------------------
-------------------------------
---------
-------
-------结语
@svg-icons/material-sharp 是一个非常实用的前端 SVG 图标库。本文介绍了如何安装和使用该库，并提供了示例代码。希望本文能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f24c7f73b0ab45f74a8b923