前言
在前端开发中，我们经常需要使用各种各样的图标来丰富我们的页面内容。Iconfont 是一种常见的解决方案，但是使用 Iconfont 也有一些限制，比如只能使用设计好的图标，而无法自己定义。如果我们需要自定义图标，就可以借助 partican 这个 npm 包来实现。
partican 是一个轻量级的 SVG 图标库，提供了丰富的 SVG 图标集。使用 partican，我们可以轻松地自定义 SVG 图标，并将其集成到我们的项目中。
在本文中，我们将学习如何使用 partican 这个 npm 包，并通过一个示例项目来演示其使用方法。
环境准备
在使用 partican 之前，我们需要准备好 Node.js 环境，并安装 npm 包管理器。
首先，我们需要在终端中输入以下命令，安装 partican：
npm install partican --save
接下来，我们需要在项目中引入 partican。可以通过以下方式引入：
import { createIcon } from 'partican';使用 partican
在介绍如何使用 partican 前，我们先来看一下 partican 支持的图标集。
partican 提供了两个集合，分别是 "Material Design" 和 "Ionicons"，我们可以通过以下方式来获取这些图标：
import { MaterialDesign, Ionicons } from 'partican';在这个例子中，我们将以 "Material Design" 图标集为例，来介绍如何使用 partican。
创建一个 SVG 图标
使用 partican，我们可以轻松地自定义 SVG 图标：
const icon = createIcon(MaterialDesign, 'account_circle');
在这个例子中，我们创建了一个名为 "icon" 的 SVG 图标，其来源于 "Material Design" 图标集中的 "account_circle" 图标。
将 SVG 图标插入到页面中
接下来，我们将 SVG 图标插入到我们的页面中：
document.body.appendChild(icon);
现在，我们可以在页面中看到一个名为 "account_circle" 的 SVG 图标。
样式化 SVG 图标
我们可以使用 CSS 样式来改变 SVG 图标的表现：
icon {
fill: red;
}在这个例子中，我们将 SVG 图标的填充颜色改为红色。
示例项目
下面，我们将通过一个示例项目来演示 partican 的使用方法。
首先，我们在终端中输入以下命令，创建一个名为 "partican-demo" 的示例项目：
npm init
接着，我们在项目根目录中创建一个名为 "index.html" 的文件，并在文件中添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
-------
---- -
----- --------
------ ------
------- ------
------- -----
-
--------
-------
------
----- ------------------
----- ------------------
-------
------- ------------------------
-------在这个文件中，我们定义了以下样式：
- 填充颜色为 #4CAF50
- 宽度为 100 像素
- 高度为 100 像素
- 边距为 10 像素
同时，我们在页面中定义了两个不同的 SVG 图标。
接下来，我们在项目根目录中创建一个名为 "index.js" 的文件，并添加以下代码：
-- -------------------- ---- ------- ------ - ---------- - ---- ----------- ------ - -------------- - ---- ----------- ----- ----- - -------------------------- ------------------ ----- ----- - -------------------------- ----------------- ---------------------------------------------------- ----------------------------------------------------
在这个文件中，我们首先引入了 partican 和 "Material Design" 图标集。然后，我们创建了两个不同的 SVG 图标，并将这些图标插入到页面中。
最后，我们在终端中输入以下命令，启动示例项目：
npx http-server .
现在，我们可以在浏览器中访问 "http://localhost:8080"，并在页面中看到我们刚刚创建的 SVG 图标。
结论
本文中，我们介绍了如何使用 partican 这个 npm 包来自定义 SVG 图标，并将其集成到我们的项目中。我们从环境准备开始，一步步地介绍了如何使用 partican。最后，我们通过一个示例项目演示了 partican 的使用方法。
由于篇幅限制，本文只是介绍了 partican 的基础使用方法。如果您对 partican 更深入的使用方法感兴趣，可以查看 partican 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572f581e8991b448e919a