前言
用于构建 Web 前端应用程序时，我们通常会使用一些封装好的资源包，这些资源包可以提高我们的开发效率，让我们能够更好地组织和管理代码。@svg-icons/zondicons 就是这样一个资源包，它提供了多种 SVG 图标，以便我们在 Web 应用程序中使用。
本文将介绍如何使用 @svg-icons/zondicons，包括如何安装、如何使用和如何调整样式等。
安装
在开始使用 @svg-icons/zondicons 之前，我们需要先安装它。
使用 npm 命令进行安装：
npm install @svg-icons/zondicons --save
使用
安装完成后，我们就可以在项目中引用 @svg-icons/zondicons 提供的图标了。
引入
@svg-icons/zondicons 包含 557 个 SVG 图标，我们可以单独引入需要使用的图标。例如，我们想使用团队图标，可以按如下方式引入它：
import { zondiconsTeam } from '@svg-icons/zondicons';调用
引入所需的图标后，我们就可以在应用程序中调用它了。我们可以使用以下方式在 HTML 和 CSS 中调用 @svg-icons/zondicons 提供的图标：
HTML
在 HTML 中，使用 <svg> 标签来调用 SVG 图标：
<svg width="32" height="32" viewBox="0 0 32 32">
<path d="${zondiconsTeam}" />
</svg>CSS
在 CSS 中，我们可以使用 background-image 来设置图标背景：
.icon {
background-image: url("${zondiconsTeam}");
background-size: 32px 32px;
}在应用程序中调用 @svg-icons/zondicons 提供的图标时也可以进行样式调整，例如更改图标颜色和大小等。
改变样式
通过 CSS 改变样式是一种非常灵活和实用的方法。
我们可以通过以下方式更改 @svg-icons/zondicons 提供的图标颜色：
.icon--danger {
color: red;
}
.icon--warning {
color: orange;
}我们还可以通过以下方式更改图标大小：
-- -------------------- ---- ------- ------------ - ------- ----- ------ ----- - ------------ - ------- ----- ------ ----- -
结语
本文介绍了如何安装、使用和调整样式 @svg-icons/zondicons，它是一个非常实用的资源包，可以加快我们开发 Web 应用程序的速度。通过掌握本文所述的技能，我们可以更好地组织和管理前端代码，提高我们的开发效率，帮助我们更好地完成 Web 应用程序的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f24a4cb3b0ab45f74a8b90d