在前端开发中，图标库是必不可少的元素之一。而@patternkit/pk-assets-icons 就是一款非常好用的 npm 包，它提供了超过 7000 个 SVG 图标。今天，我们就来介绍一下如何使用这个包。
安装
首先，我们需要在项目中安装它。运行以下命令：
npm install @patternkit/pk-assets-icons
使用
安装完毕后，我们需要在应用中引入它。可以通过以下方式：
import { IconSet } from '@patternkit/pk-assets-icons';然后，我们就可以使用任何其中的图标了。比如：
const trashCanIcon = IconSet.TrashCan;
在这个例子中，我们将 TrashCan 图标赋给了 trashCanIcon 常量。这个图标的属性可以通过访问 trashCanIcon.bemModifier、trashCanIcon.viewBoxWidth 等等，获取到和修改。
添加到 HTML 中
我们可以使用以下代码将图标添加到 HTML 中：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<use xlink:href="#{icon-id}"></use>
</svg>在这个例子中，我们要将 icon-id 替换成我们实际所需要的图标的 ID。
示例
最后，让我们来看一下如何在实际的场景中使用这个包。
-- -------------------- ---- ------- ------ - ------- - ---- ------------------------------ ----- ---------- - --------------------------------- -------------------- - - ---- ---------------------------------- ---------- - -- ---- ---- ----------------------------------------------------- ------ ------------------- ------------------------ - ------- --------------------------- - --------- -------------------- - ------ ------------------------------------ -- -- - ---------------------- --- --------------------------------------
在这个示例中，我们创建了一个用 SVG 图标和文字来显示“返回”的按钮。
总结
@patternkit/pk-assets-icons 是一个非常有用的 npm 包，它提供了大量的 SVG 图标。我们只需要安装它，就可以在项目中随意使用。本文介绍了如何在项目中使用它，并提供了一个示例。我们希望这篇文章对你有所帮助，也希望你能够享受到使用这个包的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005584281e8991b448d573c