什么是 @styled-icons/material-sharp？
@styled-icons/material-sharp 是一个包含了 Material Sharp 风格的图标库，可以方便地在前端项目中使用。该库可通过 npm 安装，并可以在 HTML 或 CSS 中直接引用。
如何安装 @styled-icons/material-sharp？
@styled-icons/material-sharp 可以通过 npm 安装到项目中：
--- ------- ----------------------------
如何使用 @styled-icons/material-sharp？
@styled-icons/material-sharp 提供了多种方式来使用图标，在这里我们介绍其中两种。
使用 React JSX
首先，我们需要在项目中引入 @styled-icons/material-sharp：
------ - ----- - ---- ------------------------------
然后，在 JSX 中使用 Alarm 图标：
-------- ------------- -
------ -
-----
------ --------- --
------
-
-使用 CSS
首先，我们需要在 HTML 中引入对应的 CSS 文件：
----- -------------------------------------------------------------------------------------- -----------------
然后，在 HTML 中使用 Alarm 图标：
-- --------------------------------- ----------------- -----------
支持的图标类型
目前，@styled-icons/material-sharp 支持 26 种 Material Design 风格的图标，包括 Alarm、AddAlarm、ArrowBack、ArrowDownward、ArrowDropUp、ArrowForward、ArrowUpward、Bookmark、Check、Close、Delete、Edit、Favorite、Home、Info、List、Menu、MoreHoriz、MoreVert、Refresh、Search、Share、Star、ThumbUp、ThumbDown、Warning。
下面是一些示例代码：
------ - ----- - ---- ------------------------------
------ - ----- - ---- ------------------------------
------ - ------ - ---- ------------------------------
-------- ------------- -
------ -
--
------ --------- --
------ --------- --
------- --------- --
---
-
-或者，在 HTML 中使用：
----- -------------------------------------------------------------------------------------- ----------------- -- --------------------------------- ----------------- ----------- -- --------------------------------- ----------------- ----------- -- ---------------------------------- ----------------- -----------
总结
@styled-icons/material-sharp 是一款方便使用的图标库，可以极大地提高前端开发的效率。在引入图标库时，需要注意库的使用方式和支持的图标类型，以便于正确使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaaf4b5cbfe1ea06105f5