在前端开发中，图标的作用是不言而喻的。然而，在实际开发中，我们往往需要花费大量时间寻找适合自己项目的图标以及将其集成到项目中。最近，一个叫做 sui-icon 的 npm 包，可以帮助我们更加方便地使用图标。
sui-icon 简介
sui-icon 是一个基于 SVG 的图标库，它包含了大量的常用图标，例如：arrow、menu、search 等。sui-icon 的优点在于它具有良好的可扩展性，同时还支持自定义颜色、大小等多种属性。
如何使用 sui-icon
安装 sui-icon
在使用 sui-icon 前，我们需要将其安装到项目中。您可以使用 npm 或者 yarn 来安装：
npm install sui-icon
或者
yarn add sui-icon
引入 sui-icon
引入 sui-icon 很简单，只需要在 HTML 中添加以下代码：
<link rel="stylesheet" href="path/to/sui-icon.css" />
使用 sui-icon
一旦引入了 sui-icon，我们就可以在 HTML 中使用该图标库。例如，在按钮上添加一个搜索图标，可以使用以下代码：
<button>
<svg class="sui-icon">
<use xlink:href="path/to/sui-icon.svg#icon-search"></use>
</svg>
Search
</button>其中，.sui-icon 是 sui-icon 提供的样式类，#icon-search 是图标的名称。这里我们使用了 SVG 的 use 标签，可以在 HTML 中直接引用其他文件中的 SVG 文件。
使用自定义样式
sui-icon 除了自带的样式外，还支持自定义的样式。例如，我们可以为图标添加背景颜色、修改图标的大小等。下面是一个自定义样式的示例代码：
<svg class="sui-icon customize-icon" style="background-color: #333; width: 50px; height: 50px"> <use xlink:href="path/to/sui-icon.svg#icon-search"></use> </svg>
其中，.customize-icon 是自定义的样式类，我们在其中修改了 SVG 的背景颜色以及宽度和高度。
总结
sui-icon 的使用非常简单，只需几步操作即可快速引入图标库，并轻松引用其中的图标。它不仅提供了大量的常用图标，而且还支持自定义样式，非常适合前端开发者使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e20520b171f02e1d46