@custom-elements/icon 是一款用于前端开发的图标库，包含了众多常用的图标，使用简便，可完全定制化，是一款非常实用的前端工具。
安装
使用 npm 安装 @custom-elements/icon 很简单，只需在终端输入以下命令即可：
npm install @custom-elements/icon
如果你使用 yarn，则可输入以下命令：
yarn add @custom-elements/icon
使用
使用 @custom-elements/icon 的前提是在你的项目中已经使用了 Custom Elements，如果你尚未使用 Custom Elements，需要先安装 Custom Elements：
npm install @webcomponents/custom-elements
或者使用 yarn 安装：
yarn add @webcomponents/custom-elements
在项目中引入 @custom-elements/icon，使用 import 将其引入：
import '@custom-elements/icon';
然后，在页面中使用 <ces-icon> 标签来添加图标，例如：
<ces-icon icon="share"></ces-icon>
其中，icon 属性指定了要添加的图标。你可以在 官方文档 中查看所有可用的图标列表。
定制化
@custom-elements/icon 提供了许多定制化选项，以满足开发者的不同需求。
修改颜色
可以使用 color 属性来修改图标的颜色，例如：
<ces-icon icon="share" color="red"></ces-icon>
修改大小
可以使用 size 属性来修改图标的大小，例如：
<ces-icon icon="share" size="32"></ces-icon>
修改组件样式
可以使用 CSS 来修改 <ces-icon> 组件的样式，例如：
ces-icon {
color: blue;
width: 24px;
height: 24px;
}示例代码
下面是一个完整的示例代码，演示了如何使用 @custom-elements/icon 来添加一个分享图标：
-- -------------------- ---- -------
--------- -----
------
------
------- --------------
------ ---------------------------------
------ ------------------------
---------
-------
-------- -
------ -----
------- -----
-
--------
-------
------
--------- ------------ -----------------------
--------- ------------ ---------------------
-------
-------结语
@custom-elements/icon 是一款非常实用的前端工具，可以方便地添加各种常用图标，并且提供了多种定制化选项，希望读者可以利用这个工具来提升自己的开发效率，更好地完成项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d5d81e8991b448e6fe1