什么是 @styled-icons/material-sharp？
@styled-icons/material-sharp 是一个包含了 Material Sharp 风格的图标库，可以方便地在前端项目中使用。该库可通过 npm 安装，并可以在 HTML 或 CSS 中直接引用。
如何安装 @styled-icons/material-sharp？
@styled-icons/material-sharp 可以通过 npm 安装到项目中：
npm install @styled-icons/material-sharp
如何使用 @styled-icons/material-sharp？
@styled-icons/material-sharp 提供了多种方式来使用图标，在这里我们介绍其中两种。
使用 React JSX
首先，我们需要在项目中引入 @styled-icons/material-sharp：
import { Alarm } from '@styled-icons/material-sharp'然后，在 JSX 中使用 Alarm 图标：
function MyComponent() {
return (
<div>
<Alarm size={32} />
</div>
)
}使用 CSS
首先，我们需要在 HTML 中引入对应的 CSS 文件：
<link href="/path/to/node_modules/@styled-icons/material-sharp/dist/StyledMaterialSharp.css" rel="stylesheet">
然后，在 HTML 中使用 Alarm 图标：
<i class="StyledMaterialSharp-alarm" style="font-size: 32px;"></i>
支持的图标类型
目前，@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 中使用：
<link href="/path/to/node_modules/@styled-icons/material-sharp/dist/StyledMaterialSharp.css" rel="stylesheet"> <i class="StyledMaterialSharp-close" style="font-size: 32px;"></i> <i class="StyledMaterialSharp-share" style="font-size: 32px;"></i> <i class="StyledMaterialSharp-search" style="font-size: 32px;"></i>
总结
@styled-icons/material-sharp 是一款方便使用的图标库，可以极大地提高前端开发的效率。在引入图标库时，需要注意库的使用方式和支持的图标类型，以便于正确使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf4b5cbfe1ea06105f5