npm 包 @procore/core-icons 使用教程
写在前面
在前端开发中，使用图标是非常常见的操作。而如何引入图标则是我们需要考虑的问题。在这方面，@procore/core-icons npm 包提供了一种使用简单、功能强大的方式来引入图标。本文将介绍如何使用这个 npm 包，帮助大家更加方便地使用图标。
安装
首先，我们需要安装 @procore/core-icons 包。可以通过以下命令来安装：
--- ------- -------------------
使用
安装完成后，我们就可以在项目中引入这个包并使用其中的图标。可以根据自己的需要选取需要使用的图标，也可以引入整个包来使用所有图标。
引入单个图标
要引入单个图标，需要在页面的 HTML 中添加以下标签：
------------- -------------------------------
其中 IconName 是需要引用的图标的名称。举个例子，如果我们需要在页面中引用“打勾”的图标，那么可以这样写：
------------- --------------------------------
这里需要注意，不同的图标名称是区分大小写的。
引入多个图标
如果要引入多个图标，可以通过 import 语句来实现：
------ - ---------- --------- - ---- -------------------------------------------------
其中 IconSubset 是图标的名称集合，包含了所有要引用的图标。这样，我们就可以通过 IconName1 和 IconName2 来使用这两个图标了。
开启 IE11 支持
如果需要在 IE11 上使用这个 npm 包，需要进行以下配置：
在 main.js 中添加以下语句：
------ ---------------------------------------------------------
如果不需要使用全部的图标，可以只引入需要使用的图标的 core-icons-ie11.js 文件。
示例代码
下面是一个完整的使用示例。
--------- -----
----- ----------
------
----- --------------- --
--------- ---------------------------
-------
------
------ ------------------------
------------
------------- --------------------------------
------------
--------
-----------------------
-----------------
---------
------- -------------------------
-------
------------- - --------- - ---- ------------------------------------------------- -- -- -- ------ - -- ---------- ---- ------------------------------------------------- -- ----- - ---------- --------- - - -----------
-- - ------------ -- ------------ - ------ ----- ------- ----- ----- ---- -
总结
在前端开发中，使用图标是很常见的操作。而 @procore/core-icons 这个 npm 包提供了一种使用方便、功能强大的方式来引入图标。通过本文的介绍，我们可以更加方便地使用这个包来引入图标，提高我们的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/116830