在前端开发中，我们经常需要使用图标来增强网站的视觉效果。而这种需求可以通过使用图标库来解决。@emotion-icons/material-outlined 就是一种可嵌入应用程序中的图标库，其提供了大量现成的图标，以供使用者调用和修改。
包的基本介绍
@emotion-icons/material-outlined 是一种基于 Emotion 的 Web 应用程序，可用于开发 JavaScript 应用程序中的完整组件。此包提供了一个图标集，包括 Material Design 所需的所有图标。 @emotion-icons/material-outlined 提供了符号表，以便利用内置 svg 以及自定义 SVG。
常见的使用方式有两种：
1. 直接使用 SVG
在 HTML 的 img 标签中引用 SVG，然后在 CSS 中进行样式定制，可以方便地控制图标的大小和颜色，比如：
<img src="./my-icon.svg" alt="my icon" class="my-class" />
.my-class { width: 24px; height: 24px; fill: blue; }
2. 使用装饰器加入组件中
借助@emotion/styled 和 @emotion-icons/material-outlined 等依赖来新建一个 Material Icon 的组件，代码如下：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------ ---- ------------------ ------ - ------------------ - ---- ----------------------------------- ----- ---------- - --------------------------- ---------- ----- ------ -------- -- ----- ----------- - -- -- - ------ - ----- ------- -------- --------- ----------- -- ------ -- -- ------ ------- ------------展开代码
包的安装与使用
在项目中安装 @emotion-icons/material-outlined 包，通过以下命令进行安装：
npm install @emotion-icons/material-outlined --save
或者，您也可以使用 Yarn 进行安装：
yarn add @emotion-icons/material-outlined
安装完成后，即可在代码中引用该包，例如上面的使用示例。
包的文档
@emotion-icons/material-outlined 库提供了非常详细的文档和使用方法，您可以在这里找到它们：https://github.com/emotion-icons/material-outlined
文档提供了各种使用示例，包括基本用法、SVG 的使用、自定义 SVG、颜色、大小等的调整，帮助您更好地使用此包。
总结
@emotion-icons/material-outlined 是一种强大的图标库，能够让您快速、轻松地为您的应用程序添加图标。本教程提供了一步步操作的方法、代码实现和说明，帮助您更加深入地了解和掌握这个优秀的库，让您进行前端开发更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f24a39f3b0ab45f74a8b901
