简介
@styled-icons/material-rounded 是一个可重复使用的图标库，其中包含了许多 Material Design 圆角风格的图标，具有轻量、易用的优点。本教程将介绍如何使用该 npm 包来给自己的前端项目添加图标。
安装
@styled-icons/material-rounded 包可以使用 npm 安装：
npm install @styled-icons/material-rounded
这将把该包安装到您的项目中，并添加它作为依赖。
使用
现在，在您的项目的某个地方，您可以导入并使用这些图标：
import { Alarm, Phone, Accessibility } from '@styled-icons/material-rounded';上面的代码演示如何从 @styled-icons/material-rounded 包中导入三个图标，它们是 Alarm、Phone 和 Accessibility。您现在可以使用它们在您的项目中渲染像这样的图标：
<Alarm size={32} color="#f00" />这将在您的项目中呈现一个 32px 的大小为红色的闹钟图标。这是一种快速、便捷地在项目中使用这些图标的方法。
自定义
对于那些希望进行一些更高级和个性化的定制的用户，@styled-icons/material-rounded 还提供了一些更多的选项。例如，您可以在导入时为每个图标指定自定义颜色和大小：
-- -------------------- ---- ------- ------ - ------ ------ ------------- - ---- --------------------------------- ----- ----------- - -------------- ------ ----- ------ ----- ------- ----- -- ----- ----------- - -------------- ------ ----- ------ ----- ------- ----- -- ----- ------------------- - ---------------------- ------ ----- ------ ----- ------- ----- --
这里，我们导入了相同的三个图标，并使用 styled-components 库来对其进行个性化定制。使用 styled-components 的优点是，您可以轻松地为每个图标指定自定义样式。
示例
以下是完整代码示例，演示如何在您的项目中使用 @styled-icons/material-rounded：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
------ - ------ ------ ------------- - ---- ---------------------------------
----- ----------- - --------------
------ -----
------ -----
------- -----
--
----- ----------- - --------------
------ -----
------ -----
------- -----
--
----- ------------------- - ----------------------
------ -----
------ -----
------- -----
--
-------- ----- -
------ -
-----
------------ --
------------ --
-------------------- --
------
--
-
------ ------- ----这将呈现一个包含三个自定义图标的 div 元素。
总结
@styled-icons/material-rounded 是一个方便的图标库，可以帮助前端开发人员快速添加漂亮的 Material Design 圆角风格的图标。本教程介绍了如何将其导入到您的项目中以及如何通过个性化定制来定制它们。希望它能对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaaf4b5cbfe1ea06105f4