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