简介
@svg-icons/material-filled 是一个提供 Material Design 风格图标的 npm 包。它包含了 1000 多个 Material Design 风格的图标，覆盖了各种应用场景。使用这个包可以让你轻松地添加漂亮、一致性的图标到你的前端项目中。
安装
你可以通过 npm 安装这个包，使用以下命令：
--- ------- --------------------------
使用
导入图标
在应用中使用这个包的图标，需要先导入需要的图标。有两种导入方式：
方式一：使用 ES6 import 语法
你可以使用 ES6 的 import 语法导入需要的图标，如：
------ - --------- - ---- ---------------------------------------
方式二：使用 CommonJS require 语法
你也可以使用 CommonJS 的 require 语法导入需要的图标，如：
----- - --------- - - ------------------------------------------------
使用图标
图标导入后，就可以在应用中使用它们了。有两种使用方式：
方式一：以组件方式使用
你可以把导入的图标组件当做一个 React 组件使用，如：
------ - --------- - ---- --------------------------------------- -------- ------------- - ------ ---------- --- -
方式二：以 SVG 标签方式使用
你也可以以 SVG 标签的形式使用导入的图标，如：
------ - --------- - ---- --------------------------------------- -------- ------------- - ------ ---- ---------- - -- -------------- --------- -
程序化地操作图标
@svg-icons/material-filled 提供了多种图标操作方法，可以帮助你更好地使用和操作图标。以下是常用的几种方法：
颜色和大小
你可以通过设置 color 和 fontSize 样式，来调整图标的颜色和大小，如：
------ - --------- - ---- --------------------------------------- -------- ------------- - ------ ---------- -------- ------ ------ --------- ------ -- --- -
设为按钮图标
你可以把图标设为按钮的图标，如：
------ - --------- - ---- ---------------------------------------
-------- ---------- -
------ -
--------
---------- --
----
---------
--
-旋转
你可以通过设置样式 transform: rotate(90deg) 来对图标进行旋转，如：
------ - --------- - ---- --------------------------------------- -------- ------------- - ------ ---------- -------- ---------- --------------- -- --- -
总结
@svg-icons/material-filled 提供了高质量、丰富的 Material Design 风格图标，让我们可以轻松地为前端应用添加漂亮、一致性的图标。使用这个包需要掌握导入、使用和操作图标的方法，理解它们可以让你使用更得心应手。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f24d3ae3b0ab45f74a8b92a