在前端开发中，图标是非常常用的元素。clarity-icons 是一款基于 SVG 的图标库，由 VMware 开发并维护，提供了 900 多个高品质的图标。本文将详细介绍如何使用 clarity-icons。
安装 clarity-icons
首先，在项目根目录下安装 clarity-icons：
npm install clarity-icons
导入 clarity-icons
可以通过以下方式导入 clarity-icons：
方式一：直接引用 SVG 文件
在 HTML 中使用 <img> 标签去引用 clarity-icons 提供的 SVG 图标，例如：
<img src="./node_modules/clarity-icons/svg/action.svg">
方式二：使用 ES6 导入
使用 ES6 的 import 语法导入 clarity-icons：
import '@clr/icons'; import '@clr/icons/shapes/all-shapes';
方式三：使用 Angular
如果你正在使用 Angular，可以使用 Clarity UI 库中的 ClarityIconsModule 模块来导入 clarity-icons：
-- -------------------- ---- ------- ------ - ------------- -------- - ---- ------------- -------------------------------- -- -------- ------------------ ----------- ------------- --------------- -------- --------------------- ---------- -------------- -- ------ ----- --------- --
使用 clarity-icons
成功导入 clarity-icons 后，就可以开始使用其中的图标了。
基本使用
可以使用 <clr-icon> 标签来展示图标：
<clr-icon shape="user"></clr-icon>
其中，shape 属性指定了要展示的图标名称。
自定义尺寸和颜色
使用 size 属性可以自定义图标的大小，例如：
<clr-icon shape="user" size="36"></clr-icon>
使用 color 属性可以自定义图标的颜色，例如：
<clr-icon shape="user" color="blue"></clr-icon>
也可以使用 CSS 样式来自定义尺寸和颜色：
.my-icon {
width: 48px;
height: 48px;
fill: red;
}<clr-icon shape="user" class="my-icon"></clr-icon>
按钮中使用
在按钮中使用 clarity-icons 也非常简单：
<button><clr-icon shape="plus"></clr-icon> 新建</button>
表单中使用
在表单中使用 clarity-icons 也非常简单：
<label> <clr-icon shape="search"></clr-icon> <input type="text" placeholder="搜索..." /> </label>
总结
本文介绍了如何安装、导入和使用 clarity-icons 图标库。无论是在普通 HTML 中展示图标，还是在 Angular 项目中使用，clarity-icons 都提供了非常方便的 API。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33754