简介
Liconjs 是一个轻量级的 JavaScript/TypeScript 库，主要用于将 SVG 图标转换为可伸缩的图标。他支持多种图标样式和自定义颜色和大小，同时也兼容多个框架（如 React、Vue、Angular 等）以及原生 JavaScript。
安装
Liconjs 可以通过 npm 安装：
npm i liconjs
使用
1. 导入
你可以通过以下方式将 Liconjs 载入你的项目中：
在 JavaScript/TypeScript 中
import { Licon } from 'liconjs';在 HTML 中
首先，你需要在 HTML 头部中添加 Liconjs 文件：
<head>
<script src="path/to/liconjs.js"></script>
</head>然后你可以通过 Licon 全局对象来调用 Liconjs 中的方法。
2. 初始化
在直接使用 Liconjs 的组件前，你需要先在你的项目中初始化它：
const licon = new Licon({
style: 'solid',
size: 50,
});其中，style 表示图标样式，可以值为 solid、outline 或 brand，默认值为 solid。size 表示图标大小，默认值为 16。
3. 使用图标
在初始化完成后，你可以使用 Liconjs 中的某个图标来代替 HTML 中的图标标签：
<!-- 使用账户图标 -->
<div>${licon.icon('user')} 用户名</div>
<!-- 使用搜索图标 -->
<button>${licon.icon('search')} 搜索</button>这里是 licon.icon() 函数的使用，它需要传一个参数，即引入的图标的名称。在上述例子中，user、search 都是 Liconjs 支持的图标名称。你可以通过 Liconjs 官方文档 查看完整的图标列表。
4. 自定义
为了使得 Liconjs 的适用更广，它也提供了一些自定义的 API。举一个例子，我们通过自定义颜色和大小来使用一个用户图标：
const customLicon = new Licon({
style: 'outline',
size: 100,
color: 'red',
});
document.write(`自定义图标：${customLicon.icon('user')}`);这里 customLicon 对象被构造时，添加了一个 color 属性，它被用于图标的颜色。你还可以使用 size 属性来自定义图标的大小。
5. 单文件组件中使用
在 Vue 或其他 Vue-like 框架的单文件组件中，你需要在 components 中加入 Licon 组件并注册到子组件中：
-- -------------------- ---- -------
----------
-----
------ ---------------- ------------------ ---------------- --
------- ------------------------- ---- -----------
------
-----------
--------
------ - ----- - ---- ----------
------ ------- -
----- --------------
----------- -
-----
--
------ -
------ -
----- -------
--------- -------
--------- ---
---------- -------
-
--
-------- -
--------------- -
-- ---- --------
-
-
-
---------在以上的例子中，我们引入了 Licon 组件并在 data 中定义了三个属性：iconName、iconSize、iconColor，它们分别用于图标的名字、大小、颜色，然后我们在模板中使用它们进行渲染。在实际所在的 Vue 组件中，你可以将 iconName 等数据传入子组件并进行监听。
结语
本篇文章介绍了 Liconjs 在前端类项目中的应用，当然它一样适用于后端，如 Node.js。本篇文章只是介绍了Liconjs 小部分功能，你还可以前往 Liconjs 官方文档 了解更多细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608581e8991b448deb9e